**这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

React设计思路

UI编程痛点：

• 状态（即声明的变量）更新，UI不会自动更新，需要手动调用DOM进行更新；
• 代码没有组件化，欠缺代码封装与隔离；
• UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到回调地狱。

响应式编程：

• 状态更新，UI自动更新
• 前端代码组件化，可复用，可封装
• 状态之间的互相依赖关系，只需声明即可（如A=B+C的关系，每次不需要再手动维护）

React的设计与实现——组件化：

• 组件是原子组件或组件的组合
• 组件内拥有状态，外部不可见
• 父组件可将状态传入子组件内部
• React是单向数据流（父组件给子组件传东西）

组件设计：

• 组件声明了状态和UI的映射（根据当前的State和Props返回一个UI)
• 组件有Props和State 两种状态（Props是父组件传给它的状态/State是组件自身的私有状态）
• 组件可由其它组件拼装而成

React 推荐使用组合来进行组件的复用，而不是继承，背后有什么样的考虑？

降低代码耦合度，提高复用性。通过继承实现的代码复用是一种“白盒复用”，通过组合实现代码复用是一种“黑盒复用”，对象内部细节不可见。

Props/State/Refs

React属性Props:组件其实就是函数，接受特定的输入（props），产生特定的输出（React Elements.return jsx）。React的组件必须像纯函数那样使用其props，props是外部传入的，不可修改。 React状态State:状态是私有的，组件内部的数据可以动态改变，通过this.setState()方法。 Refs:Refs可以用来操作DOM，使用场景有：获取图片宽高、输入框聚焦。要写成回调形式的ref。 Forms表单是受控组件，用Refs将其转换为非受控组件。

Context

Props是由上到下单向传递的，Context提供了在组件中共享全局数据的方法。 React.createContext() Context是一个对象，里面有两个变量：Provider和Consumer,都是组件，在根节点外侧用Provider进行包裹，在需要使用此数据的结点外侧用Consumer包裹。

组件间通信

利用redux可以支持任何形式的通信。