这是我参与「第四届青训营 」笔记发明活动的第3天

React的前史与运用

运用场景

1. 前端运用开发，如Facebook、Netflix网页版
2. 移动端原生运用，如Android、IOS的app
3. 结合Electron，进行桌面运用开发

开展前史

• 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的React的设计。
• 2011年 Jordan Walke 发明晰FaxJS，也便是后来的React原型:

• 2012年在Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到运用, Jordan Walke 根据 FaxJS 的经历开发出了React
• 2014年-今天 生态大爆发，各种环绕React的新工具/新框架开始呈现

React的设计思路

UI编程的痛点

1. 状况更新的时分，UI不会自动更新，需求手动调用DOM接口进行更新
2. 欠缺根本的代码层面的封装和阻隔，代码层面没有组件化
3. UI之间的数据依靠联系，需求手动保护，假如依靠链路长，则会遇到回调阴间

React的呈现，便是为了解决这三大痛点

呼应式与转化式

• 转化式体系：给定输入求解输出，比如编译器的完成，数值计算等场景
• 呼应式体系：监听事情，由消息驱动，需求有一个监控体系去关注事情，并对事情做出呼应，更新UI界面

前端开发的场景中，转化式体系不适合，而呼应式体系就能完美解决前面的三大痛点

呼应式编程

• 状况更新，UI也会进行更新
• 前端代码组件化，可复用，可封装
• 状况之间的相互依靠联系，只需声明即可

组件化

用树状结构表示组件之间的联系

• 组件是组件的组合/原子组件
• 组件内拥有自己的状况，外部不可见
• 父组件可将状况传入组件内部

状况归属问题

下面这个图中，右上角的当时价格数据应当归属到那个组件去管理？

答案是归于根节点Root，由于这个属性会被多个子组件共享

这也导致了一个问题，当多个子组件需求共享数据的时分，就得将共享数据提升到父组件中，这其实是不好的

已然现在知道当时价格是由Root结点管理的，那子组件需求修正当时价格时该怎么办呢？

由于在js中，函数是一等公民，所以可以将函数也作为属性传递给子组件，那么就可以在Root组件中界说一个修正当时价格的函数，然后将这个函数传给子组件，当子组件需求修正当时价格时，就调用该函数即可

组件设计

• 组件声明晰状况和UI的映射
• 组件有Props/State两种状况，前者是父组件传入的数据，后者是组件内部保护的数据
• 组件可由其他组件组装而成