react基础

react 特点

1. 单项数据流
2. 非纯粹mvvm框架

react 元素 与组件的区别

1. react element

是什么: react的最小构建模块
特征:Immutable object
如何创建: react.creatElement react.cloneElement
如何使用: {} 放入大括号中 标准有children

2. react component

是什么: 是组件 Function/class
如何创建: 返回组件的Function(无状态)/继承react.commont
如何使用: <xxx attr={xxx}>

react 受控组件与非受控组件的区别

1. 受控组件:所有状态交给react组件管理
2. 非受控组件:状态交给原生dom管理

---

react 生命周期

react的生命周期分成三类

Mounting :These methods are called when an instance of a component is being created and inserted into the DOM

Mounting:当创建组件的实例并将其插入DOM时，将调用这些方法

1. constructor:初始化本地状态

React组件的构造函数在挂载之前被调用
构造函数中不要引入引起副作用的方法/函数 (函数订阅/ajax)

2. getDerivedStateFromProps

在初始化状态/更新状态下都会使用到.
返回值更新state状态

3. componentWillMount/UNSAFE_componentWillMount

改名UNSAFE_componentWillMount,react 17将会去掉componentWillMount名称
服务端渲染唯一钩子函数
render函数之前执行,setState执行之后不会再次触发render函数

4. render
5. componentDidMount

用于与浏览器直接交互,事件订阅,ajax请求,并且此时调用 setState,导致调用 可以引发额外渲染,(render函数可能被调用两次,但是react虚拟dom处理,用户未必会看到中间状态)
只在初始化调用一次
优化点

---

Updating :An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

Updating :更新可以由props或state的更改引起。这些方法在组件重新呈现时被调用:

1. componentWillReceiveProps/UNSAFE_componentWillReceiveProps.<UNSAFE_componentWillReceiveProps:用户服务端渲染>

不推荐使用,react 17将会去掉这个功能(getDerivedStateFromProps=>推荐这个来替换该函数)

2. static getDerivedStateFromProps

同上

3. shouldComponentUpdate

手动对比属性变化,若返回true,则执行render函数,若为false则不执行render函数
优化点.使用React.PureComponent来做优化(在面对纯对象时候,比如props/state 没有对象嵌套对象的情况下使用)
轻易不修改此函数

4. componentWillUpdate/UNSAFE_componentWillUpdate

名称将在react17 换成 UNSAFE_componentWillUpdate
shouldComponentUpdate:返回false将不执行
不能使用setState也不能使用redux
看着前缀 UNSAFE 不安全啊,少用少用

5. render

同上

6. getSnapshotBeforeUpdate

该方法在render 之后 实际改动（比如 DOM 更新）发生前的“瞬间”被调用(异步渲染方法...)
返回作值为componentDidUpdate函数的第三个参数

7. componentDidUpdate

除了初始化外,每次render更新视图之后都会执行到此处
这里发送也可能用于发送ajax(通过状态对比)
shouldComponentUpdate 返回false将不会执行(该函数返回false时候也不执行render函数,而此函数发送在render更新之后)
若实现getSnapshotBeforeUpdate函数,此函数将会把返回值抛给componentDidUpdate作为第三个参数,否则第三个参数将为undefined

---

Unmounting:This method is called when a component is being removed from the DOM

Unmounting:当从DOM中删除组件时，将调用此方法

1. componentWillUnmount

在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理操作，例如使定时器失效，取消网络请求或清理在其中创建的任何订阅componentDidMount()。你不应该setState()在这里调用，因为组件不会被重新渲染。

react 优化

生命周期优化

1. shouldComponentUpdate 函数 在props/state中没有对象嵌套对象的情况下,可以使用 React.PureComponent 来做优化,简单
2. componentDidMount 函数 与浏览器交互存在消耗

减少状态

1. 尽量使用无状态组件

避免全量更新

1. react-addons-update:共享结构.https://github.com/camsong/blog/issues/3

---

本次更新基于react16.4