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章 并发编程的挑战 并发编程的目的是 ...
随机推荐
- 【codevs1282】约瑟夫问题
题目描述 有编号从1到N的N个小朋友在玩一种出圈的游戏.开始时N个小朋友围成一圈,编号为I+1的小朋友站在编号为I小朋友左边.编号为1的小朋友站在编号为N的小朋友左边.首先编号为1的小朋友开始报数,接 ...
- 2016icpc大连站总结(呐 如果把这段回忆,起个名字珍藏起来,叫它“宝物”应该很合适吧)
10月15号一早乘飞机去了大连,12点这样到了海事大学,是一所很大的学校,来往的学生有些穿着海军服.然后我们到体育馆领了衣服,就去食堂吃午饭,中间有段小插曲,就是我们队的餐券没领..不过那里的负责人让 ...
- 使用SVG绘制湖南地图
项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...
- applicationContext.xml的基本配置文件
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- Noip2016 总结&反思
一直在期盼的联赛,真正来临时,却远不像我想象的样子. 有些事,真的不敢再想. 算法可以离线,时光却不能倒流.dfs可以回溯,现实却没有如果. 有些事,注定只能成为缺憾,抱恨终生. 不得不说今年Noip ...
- mysql基础类型知识总结
Mysql知识回顾 http://www.educity.cn/wenda/596225.html http://blog.csdn.net/dyllove98/article/details/928 ...
- C语言移位算符">>"
右移算符>>是将二进制数的每一位右移.如:a=32,a>>2,就是将32的二进制数100000每一个二进制位向右移动两位.得到的是二进制数1000,也就是8. #include ...
- git 发布命令
git add . git commit -m "备注" git push -u origin master
- checkbox check all or ancheck all
<script type="text/javascript" src="js/jQuery.1.8.3.min.js"></script> ...
- sqlserver添加主键
sqlServer中给表添加主键的sql: alter table market_media_medical_history alter column pk_id bigint not null; a ...