本文主要内容来自React官方文档中的“Thinking React”部分，总结算是又一篇笔记。主要介绍使用React开发组件的官方思路。代码内容经笔者改写为较熟悉的ES5语法。
React——在我们看来，是用javascript快速开发大型web应用的捷径。这在Facebook和Instagram实践中得到了证实。
假设我们已经拿到了一个蹩脚设计师给的设计稿：
从后端返回来的一组json数据包括商品类，商品名，价格和库存：
我们在根目录下创建一个json.json文件。放入这些信息，模拟从后台获取的数据。
需求：实现商品的展示，筛选功能，
你要做的第一件事就是在纸上画出每个子组件,并逐一给它们命名。 或者更简单点，把设计稿psd图层组名就可以作为React组件的名字——从逻辑上说，他俩基本是一回事。
组件应该如何分类嵌套? 秘籍在于：一个组件应该只做一件事。 跟英译中一样，如果句子最终变得又臭又长,那你就应该把它分解成更精悍的短句，短又怎么了？
向用户反馈一个JSON里的数据信息时，你会发现,如果你的json框架搭的没问题，则你的UI也(或者说组件结构)会将很好地映射出来。 用户界面和数据模型始终遵循相同的信息架构——意味着把UI分割为组件是一件轻松的事。这里可以留意下给出的json数据排列方式——同一个的数据都放一块了。这为后文的生成商品类提供了极大的方便。
如下图，你看到在这个APP里有5个组件。我们着重标出了每个组件应该展示什么数据。
- UI面板(橙色):包含完整的应用。
- 搜索框(蓝色):接收用户输入信息
- 商品面板(绿色):用于展示按照一定规则过滤后的数据。
- 商品类别目录(青色):显示每个商品类别的标题
- 商品信息(红色):显示每个商品
留意到商品列表,你会发现表头(包含“名称”和“价格”的标签)可以不是组件————这根据自身习惯因人而异。本例中,我们把它划归到商品面板,是因为它是数据呈现的一部分。 然而,假使这个表头很复杂(比如说，我要对它实现点击排序),那它肯定得独立划分为一个表头组件。
既然我们已经确定了组件,接下来就是安排层次结构。这也很简单：在层次结构中，需要关联其它组件才能显示的组件，就是子组件。
如果你还是不得要领，那么看这个。
*
*
首先思考数据流向
商品目录实际上是分辨data的category属性，通过遍历把不同属性放到数组内就行了。
商品信息也是遍历。如果遇到stocked属性为false（没库存）,就把该商品名显示为红色。
整个架构应该是在ajax方法的回调中实现。这里使用jquery的方法。
效果大概是这样：
迄今我们完成了最为简单的部分——根据数据模型渲染你的UI，封装完了的组件层次结构。然而这还没有任何交互——差不多可以实现交互功能的时候了。
但在此之前，最好明确以下几个问题。
- 静态渲染和交互实现最好分离开来写。写一个静态的版本可能要打很多代码，而不用什么想东西；添加交互并不需要太多代码，但是你需要大量思考。
- 静态版本的应用,父到子组件间的数据交流是通过用来传递的。如果你已经熟悉状态（state）的概念，那么需要记住：对于静态版本完全不必要使用state。 状态针对的是交互————所谓“数据可以随时间改变”的东西。
- 你可以按照自顶向下或自底向上的方式来构建你的组件——都没问题。 在简单的的demo中,自上而下通常更加容易,但大的项目里面,自下而上构建更方便测试。
小结：完成了静态版本,这个组件就是可复用的了。在本文这个例子的静态版本中，组件只有一个方法，组件结构的顶部(App)以data为支撑。 如果你改变data的内容再刷新，UI将被更新。没有什么复杂的改变。 React的单向数据流(单向绑定)保持所有数据内容的模块化和效率。
触发你的底层数据改变。最好的方法就是。
而让UI交互起来的第一步奥义在于：不要重复！不要重复！不要重复！（Don't Reapeat Yourself）。你得明确你的需求，需要哪些状态——不必要的通通删掉。比方说，你做一个待办事项列表（TODO List）,完全没必要给你的待办事项各自设置单独状态——相反，把它们放到一个数组里就可以了。
回顾我们案例中的所有交互元素，它们包括：
- 原始呈现的商品列表
- 搜索框内的内容
- 复选框是否被点选
- 过滤后的商品列表
让我们逐一思考，哪一个可以作为状态——对每个交互元素都得问三个问题:
- 它是通过父级组件的传进来的吗？,如果是，这个交互元素可能不是状态。
- 它随着时间的推移依然保持不变吗? 如果是,它可能不是状态。
- 你能可以根据组件的props和其它的state计算出来吗? 如果可以,它绝对不是状态。
在这个简单的demo中，是通过传进来的。所以可以直接判断它不是状态。和不可能通过计算得到，而且可以随时间而改变——它们是状态。至于，它是根据搜索框和复选框的内容而计算得出的结果，所以它不是状态。
因此，我们得出，底层的状态就两个：
交互实现的第二步就是：找到哪个是可变的组件，或者是拥有状态的组件。
记住，React是单向数据流，父级组件通常无法知道子组件拥有哪些状态——最有挑战性的地方就在于此。你可以参照以下思路，对每个交互元素的状态从三个方面考虑：
- 确定每个组件是不是依赖于状态？
- 找到共同的先代组件(所有需要状态子组件的共同祖先)。
- 常见的组件所有者或另一个更高层次结构的组件。
注：如果你找不到一个有值得拥有状态的组件，可以创建一个调试用的新组件，让它拥有所有状态，并把它加到常见所有者组件的上层。
个人以为其实主要考虑第三个就差不多了。接下来把这一策略用于本文案例:
- 商品面板()展示商品内容时，基于搜索框（）和复选框的状态
- 是所有组件（包括它自己）的共同所有者。
- 在理论上上，搜索框和复选框的状态放App里是有意义的。
好了,所以我们决定,状态都放App里。
接着。把这两个状态通过传进搜索框和商品面板。最后，根据相应的props值，渲染搜索框的文本内容，并对商品内容执行过滤。
到目前为止,这个应用已经完成的差不多了。它有正确的和。 现在是时候来支持数据流动的另一种方式:底层数据把信息反馈到上层。
React让数据流一目了然,使人容易理解程序是如何工作的,但它比起传统的双向数据绑定实现，你确实还得多打一些代码。
怎么好意思说应用已经完成得差不多了呢？由于受到顶层state的影响。输入框完全不能键入内容，复选框也是点选不了，简直是在愚弄用户——但这是故意的——从React的价值取向来说，输入的内容必须从状态的所有者传入。
试想接下来要发生什么。当用户输入内容，触发onChange。将通过回调传递信息给，然后app根据回调的信息用来刷新状态。
要明白一个原理：用户并不是不能输入东西，只是输入后被被顶层状态给挡住了。
思路：
- 我在App中设置一个方法，此方法有两个参数，传入的两个参数将分别被设置为状态中的和的值。
- 把这个方法作为一个属性(在此命名为)传进子组件里边去！
- 用户输入时，用一个ref值把用户输入内容存入到SearBar的一个私有属性比如中。在ES6语法下简写确实比较方便：
- 然后onChange事件激活,把你用ref记录存下来的值作为参数给传进去。就成功影响App的state。
全部代码如下：
效果：
好了，功德圆满了。文档说，“ it's really just a few lines of code”就实现了这个UI。但我把文档用ES5语法重写，去掉空行，注释，也估计要100多行。为此结语是这么说的：
尽管写的比你平时要多一点，但是记住：代码读出来的价值远大于写出来的价值——况且React还那么好读。当你构建一个大型的组件库，你会欣赏这种明朗的，模块化的代码风格,当重用你的代码,就会体会到它的方便。
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- React.js入门笔记(再续)：评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=https://www.shuzhiduo.com/A/1O5E6A4d7a/&q ...
- React.js入门笔记 创建hello world 的6种方式
一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站. ...
- React.js 入门与实战课程思维导图
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- React.js - 入门
React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- React.js入门
React 入门实例教程 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. ...
- React.js入门必须知道的那些事
首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...
- Yii2 使用a标签发送post请求
<?= Html::a('text', 'url', [ 'data' => [ 'method' => 'post', 'params' => [ 'params_key' ...
- Mongodb基本数据类型、常用命令之增加、更新、删除
1.null---表示空值或者该字段不存在,如{"name":null} 2.布尔 --- 和java中的布尔一样,有两种:true,false,如{"sex" ...
- Mysql 安装-windows X64
1.首先下载mysql文件包 2.将下载到的mysql-5.6.24-x64.zip进行解压. 3.安装,直接下一步. 4.进入文件夹内复制my-default.ini文件,并重命名为my.ini 5 ...
- Linux 如何实现 VLAN - 每天5分钟玩转 OpenStack（12）
LAN 表示 Local Area Network,本地局域网,通常使用 Hub 和 Switch 来连接 LAN 中的计算机.一般来说,两台计算机连入同一个 Hub 或者 Switch 时,它们就在 ...
- wubi安装ubuntukylin-14.04
自ubuntukylin-14.04发布以来一直想体验一下,正好五一休假有了时间,在经历了一番坎坷后终于安装成功.安装环境为Win7家庭高级版,至于采用wubi方式安装,只因Linux水平差和图省事, ...
- C++中的也能使用正则表达式
正则表达式Regex(regular expression)是一种强大的描述字符序列的工具.在许多语言中都存在着正则表达式,C++11中也将正则表达式纳入了新标准的一部分,不仅如此,它还支持了6种不同 ...
- hdu5317 RGCDQ （质因子种数+预处理）
RGCDQ 题意:F(x)表示x的质因子的种数.给区间[L,R],求max(GCD(F(i),F(j)) (L≤i<j≤R).(2<=L < R<=) 题解:可以 ...
- faster_rcnn c++版本的 caffe 封装，动态库（2）
摘要: 转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ github上的代码链接,求给星星:) https:// ...
- 综合实战--文件上传系统【JDBC&IO&Socket】
本文纯属记录第一次实战遇到的坑和知识,如果后边有时间再做整理. 1,先写了个操作数据库的工具类SqlTool,照着JDBC资料打完之后,测试的时候出错了,java.lang.ClassNotFound ...
- google的云盘与公司网盘
很多人都很期待Google推出的云存储服务,也就是公司网盘.因为多数人相信,没有比google更适合做云存储的公司了,作为一个标准的Web公司或者说互联网公司,云端理所应当的优秀.但比起几年前听传言时 ...
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdreactjs/63365.html