一、React 出现的历史背景及特性介绍
- 传统
Web UI开发问题出现的根源，如下所示：
- 传统
UI操作关注太多细节 - 应用程序状态分散在各处，难以追踪 和维护
-
传统
DOM API关注太多细节，React始终整体刷新页面，无需关心细节 -
React很简单，如下所示：
- 1个新概念
- 4个必须
API - 单向数据流
- 完整的错误提示
React解决了UI细节问题，数据模型使用Flux架构，单向数据流
二、以组件方式考虑 UI 的构建
-
以组件方式考虑
UI，将UI组织成组件树的形式 -
理解
React组件，如下所示：
porps + state = viewReact组件一般不提供方法，而是某种状态机React组件可以理解为一个纯函数- 单向数据绑定
- 创建一个简单的组件，
TabSelect，如下所示：
- 创建静态
UI - 考虑组件的状态形成
- 考虑组件的交互方式
- 受控组件和非受控组件，如下所示：
- 受控组件，表单元素状态由使用者维护
- 非受控组件，表单元素状态
DOM自身维护
- 何时创建组件，单一职责原则，如下所示：
- 每个组件只做一件事
- 如果组件变得复杂，那么应该拆分成小组件
- 数据状态管理，
DRY原则，如下所示：
- 能计算得到的状态就不要单独存储
- 组件尽量无状态，所需数据通过
props获取
三、JSX 的本质，不是模版引擎，而是语法糖
-
理解
JSX，不是模版语言，而是一种语法糖 -
JSX，在Javascript代码中直接写HTML标记 -
JSX的本质，动态创建组件的语法糖 -
在
JSX中使用表达式，如下所示：
JSX本身也是表达式- 在属性中使用表达式
- 延展属性
- 表达式作为子元素
JSX优点，如下所示：
- 声明式创建界面的直观
- 代码动态创建界面的灵活
- 无需学习新的模版语言
- 约定，自定义组件以大写字母开头，如下所示：
React认为小写的tag是原生DOM节点，如div- 大写字母开头为自定义组件
JSX标记可以直接使用属性语法，例如<menu.Item />
四、React 组件的生命周期及其使用场景
react的生命周期，如下所示：
Render阶段，纯净且没有副作用，可能会被react暂停，中止或重新启动Pre-commit阶段，可以读取DOMCommit阶段，可以使用DOM，运行副作用，安排更新
constructor，如下所示：
- 用于初始化内部状态，很少使用
- 唯一可以直接修改
state的地方
getDerivedStateFromProps，如下所示：
- 当
state需要从props初始化使用 - 尽量不要使用，维护两者状态一致性会增加复杂度
- 每次
render都会调用 - 典型场景，表单控件获取默认值
componentDidMount，如下所示：
UI渲染完成后调用- 只执行一次
- 典型场景，获取外部资源
componentWillUnmount，如下所示：
- 组件移除时被调用
- 典型场景，资源释放
getSnapshotBeforeUpdate，如下所示：
- 在页面
render之前调用，state已更新 - 典型场景，获取
render之前的DOM状态
componentDidUpdate，如下所示：
- 每次
UI更新时被调用 - 典型场景，页面需要根据
props变化重新获取数据
shouldComponentUpdate，如下所示：
- 决定
Virtual DOM是否要重绘 - 一般可以由
PureComponent自动实现 - 典型场景，性能优化