react 特点
- 单项数据流
- 非纯粹mvvm框架
react 元素 与组件的区别
- react element
是什么: react的最小构建模块
特征:Immutable object
如何创建: react.creatElement react.cloneElement
如何使用: {} 放入大括号中 标准有children
- react component
是什么: 是组件 Function/class
如何创建: 返回组件的Function(无状态)/继承react.commont
如何使用: <xxx attr={xxx}>
react 受控组件与非受控组件的区别
- 受控组件:所有状态交给react组件管理
- 非受控组件:状态交给原生dom管理
react 生命周期
react的生命周期分成三类
Mounting :These methods are called when an instance of a component is being created and inserted into the DOM
Mounting:当创建组件的实例并将其插入DOM时，将调用这些方法
- constructor:初始化本地状态
React组件的构造函数在挂载之前被调用
构造函数中不要引入引起副作用的方法/函数 (函数订阅/ajax)
- getDerivedStateFromProps
在初始化状态/更新状态下都会使用到.
返回值更新state状态
- componentWillMount/UNSAFE_componentWillMount
改名UNSAFE_componentWillMount,react 17将会去掉componentWillMount名称
服务端渲染唯一钩子函数
render函数之前执行,setState执行之后不会再次触发render函数
- render
- 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的更改引起。这些方法在组件重新呈现时被调用:
- componentWillReceiveProps/UNSAFE_componentWillReceiveProps.<UNSAFE_componentWillReceiveProps:用户服务端渲染>
不推荐使用,react 17将会去掉这个功能(getDerivedStateFromProps=>推荐这个来替换该函数)
- static getDerivedStateFromProps
同上
- shouldComponentUpdate
手动对比属性变化,若返回true,则执行render函数,若为false则不执行render函数
优化点.使用React.PureComponent来做优化(在面对纯对象时候,比如props/state 没有对象嵌套对象的情况下使用)
轻易不修改此函数
- componentWillUpdate/UNSAFE_componentWillUpdate
名称将在react17 换成 UNSAFE_componentWillUpdate
shouldComponentUpdate:返回false将不执行
不能使用setState也不能使用redux
看着前缀 UNSAFE 不安全啊,少用少用
- render
同上
- getSnapshotBeforeUpdate
该方法在render 之后 实际改动（比如 DOM 更新）发生前的“瞬间”被调用(异步渲染方法...)
返回作值为componentDidUpdate函数的第三个参数
- 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中删除组件时，将调用此方法
- componentWillUnmount
在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理操作，例如使定时器失效，取消网络请求或清理在其中创建的任何订阅componentDidMount()。你不应该setState()在这里调用，因为组件不会被重新渲染。
react 优化
生命周期优化
- shouldComponentUpdate 函数 在props/state中没有对象嵌套对象的情况下,可以使用 React.PureComponent 来做优化,简单
- componentDidMount 函数 与浏览器交互存在消耗
减少状态
- 尽量使用无状态组件
避免全量更新
- react-addons-update:共享结构.https://github.com/camsong/blog/issues/3
本次更新基于react16.4
