React 记录(6)

React 记录(6)

React文档：https://www.reactjscn.com/docs/react-component.html

慢慢学习：对照教程文档，逐句猜解，截图

React官网：https://reactjs.org
React中文网站：https://www.reactjscn.com
Github地址：https://github.com/facebook/react
React 技术栈系列教程：http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html

生命周期

React生命周期图

直观感受：
所谓阶段：一个组件的添加，渲染，移除，中间会调用条件判断，编程添加附加动作
也就是一个过程我要调用用这些方法，都有默认方法，你可以修改，，称为生命周期方法，标识完整功能执行到哪个函数了。

组件的生命周期分成三个状态：

• 创建阶段（Mounting）：已插入真实 DOM
• 更新阶段（Updating）：正在被重新渲染
• 卸载阶段（Unmounting）：已移出真实 DOM

从 React v16 开始，还对生命周期加入了错误处理（Error Handling）

参考：重新认识 React 生命周期
参考：基础|图解ES6中的React生命周期
参考：React 组件生命周期
参考：简述 React 组件生命周期
参考：如何通俗易懂地解释React生命周期方法？

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
• shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

React 16.3 新增的生命周期方法

• getDerivedStateFromProps()
• getSnapshotBeforeUpdate()

虽然废弃了这三个生命周期方法，但是为了向下兼容，将会做渐进式调整。（详情见#12028）

V16.3 并未删除这三个生命周期，同时还为它们新增以 UNSAFE_ 前缀为别名的三个函数 UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()。

V17 版本将会删除 componentWillMount()、componentWillReceiveProps()、componentWillUpdate() 这三个函数，会保留使用 UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()

创建阶段 Mounting