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
生命周期
组件的生命周期分成三个状态:
- 创建阶段(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()