React 编程思想翻译及学习笔记
第一步:把UI图按组件层次结构拆分开
FilterableProductTable
(橙色): 包含整个例子SearchBar
(蓝色): 接收所有用户输入ProductTable
(绿色): 基于用户输入显示与过滤数据集ProductCategoryRow
(青绿色): 显示每组数据归类标题ProductRow
(红色): 显示每一行数据
层次结构如下:
FilterableProductTable
SearchBar
ProductTable
ProductCategoryRow
ProductRow
第二步:用React做出一个静态版的UI
现在你已经有了层次结构,是时候要实现应该了,最简单的方法就是用你的数据模型来做一个版本然后渲染UI但不需要交互。最好就是把过程解偶开,只需要写不需要想太多交互的东西。
建的时候,你将要想用props传数据的方式来重用别的组件。props是一种数据由父传子的方式。如果你熟悉state的概念,不要只用state来做静态版本。因为它只用来做交互,即数据经常改变时用上。
你可以由上而下或者由下而上来做,即你可以从最高层FilterableProductTable或者由最低层ProductRow开始。但通常,简单项目一般是由上而下;大型项目,则由下而上更好,并要编写测试。
最后,你将有一个可以重用的组件库来渲染数据模型。组件只有render()方法,因为它只是一个静态版本。最高层FilterableProductTable将负责接收数据模型作为prop使用。如果你修改数据模型,再调用ReactDOM.render()就可以更新到UI。非常简单就能看到你的UI更新了什么和哪里做了修改,因为React是通过单向数据流或者叫单向数据绑定来同步数据与UI并且速度非常快。
第三步:识别出最小并完整的UI状态
思考我们例子中所有数据碎片. 我们有:
- 初始列的所有产品
- 搜索输入框文字内容
- 勾选框状态
- 过滤后的产品列表
那让我们看看哪个是可以用作state。简单的对这些数据问3个问题。
- 它是从父用过props传过来的吗?如果是它很可以就不是state。
- 它是经常变化的吗?如果不是,它不是state。
- 你可以通过其他的组件中的state或者props来计算到它吗?如果是,它就不是state。
初始列的所有产品是通过props传进来的,所以它不是state。搜索输入框文字内容和勾选框状态非常似state,因为他们可以经常改并且不能从其他组件计算得到。最后,过滤后的产品列表不是state,因为它是可以通过搜索输入框文字内容和勾选框状态结合初始列的所有产品计算出来的。
所以最后,我们的state是:
- 搜索输入框文字内容
- 勾选框状态
第四步:识别你的state将寄生于哪里。
好,现在我们已经识别出应用的state集。下一步,我们需要识别哪些组件修改或者拥有这些state
记住:React是单向数据流结构。它可能不会马上清晰是哪个组件拥有什么state。 这对新手来说经常是最有挑战性的部分, 因此要跟着这些步骤来弄清楚:
对于你的应用中的每一个state:
- 弄清楚每个组件基于这个state渲染些什么。
- 找一个共同宿主组件(一个所有组件之上的组件在结构上需要这个state)。
- 要么是这个共同宿主组件,要么是另一个在层次之上的组件应该拥有这个state。
- 如果你找不到这个组件,可以为了用来存储state去在结构或者层次之上新建一个组件来做这事。
让我们用这策略来应该到我们的应用上吧:
ProductTable
需要基于state来过滤产品列表,SearchBar
需要显示搜索文字和勾选状态- 它们共同宿主是
FilterableProductTable
。 - 概念上过滤内容值和勾选值寄生于
FilterableProductTable
绝对是可以的。
好,那我们就这样做吧。首先,为FilterableProductTable
增加一个getInitialState()
方法,返回值是{filterText: '', inStockOnly: false}
来反映应用的初始状态。然后,把filterText
和inStockOnly
作为props传给ProductTable
和SearchBar
。最后用这些props来过滤ProductTable
的行和设置ProductTable
中表单的值。
你可以开始看到你的应该将如何表现:设置filterText
为"ball"并刷新页面。你应该可以看到数据表已经正确更新。
第五步:添加反向数据流
如果你尝试去在这版本上输入或者打勾 ,你将看到React会忽略你的输入。这是有意为之,因为我们已经设了输入框的 prop值总是等于FilterableProductTable
传过来的state
值。
React使得数据流 准确地容易的明白你的程序如何工作,但比传统的双向数据绑定需要写得更多一点 代码。React提供一个叫ReactLink
的插件让这模式使用起来与双向数据绑定一样式 方便,但这文章的目的,是要保持所有东西都清晰。
如果你尝试去在这版本上输入或者打勾 ,你将看到React会忽略你的输入。这是有意为之,因为我们已经设了输入框的 prop值总是等于FilterableProductTable
传过来的state
值。
让我们想想我们要些什么。我们想要确保无论何时用户改变了表单,我们 就更新state
值去反映用户输入。既然组件应该只更新他们自己的state
,那么无论 何时state
应该更新时,FilterableProductTable
将传一个回调函数给SearchBar
并触发它。我们可以用输入框的onChange
事件去接收它。然后 FilterableProductTable
传来的回调函数将执行setState()
函数,之后我们的应 用将被更新。
虽然这样听起来比较复杂,但也就那么几行代码。你的数据如何在应用中流转将会很清晰 。
RunJS源码:http://runjs.cn/code/cgfurbyq
引用自:http://facebook.github.io/react/docs/thinking-in-react.html
React 编程思想翻译及学习笔记的更多相关文章
- Oracle User Management FAQ翻译及学习笔记
转载 最近了解到AME 的东西,很迫切,先转载一篇 [@more@] Oracle User Management FAQ翻译及学习笔记 写在前面 本文主要是翻译的英文版的Oracle User Ma ...
- 《C#并发编程经典实例》学习笔记—2.7 避免上下文延续
避免上下文延续 在默认情况下,一个 async 方法在被 await 调用后恢复运行时,会在原来的上下文中运行. 为了避免在上下文中恢复运行,可让 await 调用 ConfigureAwait 方法 ...
- 《C#并发编程经典实例》学习笔记—3.1 数据的并行处理
问题 有一批数据,需要对每个元素进行相同的操作.该操作是计算密集型的,需要耗费一定的时间. 解决方案 常见的操作可以粗略分为 计算密集型操作 和 IO密集型操作.计算密集型操作主要是依赖于CPU计算, ...
- 《Swift程序设计语言》中国翻译和学习笔记page23
·<The Swift Programming Language>中文翻译及读书笔记,附件中为英文原版教程 因21页之前内容和技术关系不大,不做翻译整理,从第21页開始 · 页 1 本页主 ...
- 《C#并发编程经典实例》学习笔记-第一章并发编程概述
并发编程的术语 并发 同时做多件事情 多线程 并发的一种形式,它采用多个线程来执行程序. 多线程是并发的一种形式,但不是唯一的形式. 并行处理 把正在执行的大量的任务分割成小块,分配给多个同时运行的线 ...
- 《C#并发编程经典实例》学习笔记-关于并发编程的几个误解
误解一:并发就是多线程 实际上多线程只是并发编程的一种形式,在C#中还有很多更实用.更方便的并发编程技术,包括异步编程.并行编程.TPL 数据流.响应式编程等. 误解二:只有大型服务器程序才需要考虑并 ...
- 《Objective-C高级编程》の内存管理の学习笔记
此日志用于记录下学习过程中碰到的问题 转载请注明出处: http://www.cnblogs.com/xdxer/p/4069650.html <Objective-C高级编程> 人民邮电 ...
- 浅谈React编程思想
React是Facebook推出的面向视图层开发的一个框架,用于解决大型应用,包括如何很好地管理DOM结构,是构建大型,快速Web app的首选方式. React使用JavaScript来构建用户界面 ...
- 读《Java并发编程的艺术》学习笔记(一)
接下来一个系列,是关于<Java并发编程的艺术>这本书的读书笔记以及相关知识点,主要是为了方便日后多次复习和防止忘记.废话不多说,直接步入主题: 第1章 并发编程的挑战 并发编程的目的是 ...
随机推荐
- Linux htop工具使用详解
一.Htop的使用简介 大家可能对top监控软件比较熟悉,今天我为大家介绍另外一个监控软件Htop,姑且称之为top的增强版,相比top其有着很多自身的优势.如下: 两者相比起来,top比较繁琐 默认 ...
- Autoit3 获取WinForm下的ToolTip
相比Autohotkey,在我看来,Autoit最实用的就是对于WinForm Application的良好支持 然而,要想将鼠标放在WinForm的ToolTip上,简直无异于自己把自己举起来,故而 ...
- headroom.js –在不需要页头时将其隐藏
官方网站 http://www.bootcss.com/p/headroom.js/
- React入门
一.引入Reactjs 方法一:直接下载相关js文件引入网页,其中react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 ...
- WinForm用户控件、动态创建添加控件、timer控件--2016年12月12日
好文要顶 关注我 收藏该文 徐淳 关注 - 1 粉丝 - 3 0 0 用户控件: 通过布局将多个控件整合为一个控件,根据自己的需要进行修改,可对用户控件内的所有控件及控件属性进行修 ...
- Intern---Microsoft Academic China Team
项目二: AEther: 项目 一.项目需求:对搜索关键词进行类别的统计分析,为了后面的entity-rank做准备. 0,各种关键数据统计: 数据量:1个月数据:about 1000T. 1,对IE ...
- Debian-based Linux distributions 安装 virtualbox
Add the following line to your /etc/apt/sources.list: deb http://download.virtualbox.org/virtualbox/ ...
- ubuntu14.04下直接修改apache2默认目录导致wordpress样式改变的解决办法
一开始看到网上有各种各样的解决方法: 第一种是直接将 sites-available目录下的000-default.conf中的下列代码: DocumentRoot /var/www/html 修改为 ...
- 判断 .NET Framework安装版本
How To Determine the .NET Framework Installed Versions This topic is a how to.Please keep it as clea ...
- UILabel 根据文本内容设置frame
CGRect senderFrame = cell.senderLabel.frame; CGRect creatAtFrame = cell.creatAtLabel.frame; CG ...