这是我参与

「第四届青训营」笔记创作活动的第8天

简述React

React主要用于构建UI，起源于Facebook内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

特点：

• 采用声明式写法
• 通过使用模拟DOM减少与DOM的交互
• 实现了单项响应的数据流

React 的设计思路

UI编程问题

• 状态更新UI需要手动调用DOM更新
• 缺少基本的封装和隔离，代码层面没有组件化
• UI之间依赖复杂需要手动维护，依赖链路长会遇到 'CallBack Hell'

响应式系统

转换式： 通过给定的输入值经过编译器的数值计算后得到输出

响应式： 通过监控系统监听事件来更改UI界面

运行过程

• 绑定的事件发生
• 执行既定的回调函数
• 状态变更
• 更新UI界面

通过声明就能确定状态间的依赖关系，代码可复用可封装，每当状态更新时UI会相应更新

组件化

• 将UI界面分割成若干小部分，形成包含root节点的树形结构
• 父组件可以将状态传入组件内部
• 组件内拥有状态，外部不可见

状态归属问题

子组件可以继承父组件的状态，讨论状态的归属可以寻找离组件最近的父节点，直到最顶节点

React是单向数据流 数据只会影响下一级节点，父组件数据通过props传递给子组件，子组件更新了props，会导致父组件和其他关联的数据更新，UI渲染也会随数据变化而更新
单向数据流是框架本身对数据流向的限制

组件设计

• 组件声明了状态和UI的映射
• 组件拥有Props(外部)/State(私有) 两种状态
• 组件可由其他组件合成
• 会根据当前 Props(外部)/State(私有) 返回UI

生命周期