09-组件生命周期-新版本17.0.1

新版中生命周期示意图

image.png
新版本废弃了三个钩子函数(omponentWillMount、shouldComponentUpdate及componentWillUpdate )新增了getDerivedStateFromProps、getSnapshotBeforeUpdate

验证getDerivedStateFromProps钩子函数执行顺序

  <script type="text/babel">
        // 继承类必须写
        class Count extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    count: 0
                }
            }
            add = () => {
                const { count } = this.state;
                this.setState({
                    count: count + 1
                })
            }
            static getDerivedStateFromProps() {
                console.log('getDerivedStateFromProps')
                return {count: 199}
            }
            render() {
                console.log('render执行了')
                return (
                    <div>
                        <p>{this.state.count}</p>
                        <button onClick={this.add}>按钮</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Count />,
            document.getElementById('example')
        );
    </script>
image.png

代码解释: getDerivedStateFromProps钩子函数必须写成静态(static ),必须返回一个state object或者null,如果返回一个state object包含初始化state中的key,则key以钩子函数返回的state object中key为主,并且后续无法更改这个key。该钩子函数参数为props,返回该props即可。使用场景罕见,使用概率极低。

getSnapshotBeforeUpdate钩子函数验证

  <script type="text/babel">
        // 继承类必须写
        class Count extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    count: 0
                }
            }
            add = () => {
                const { count } = this.state;
                this.setState({
                    count: count + 1
                })
            }
            static getDerivedStateFromProps() {
                console.log('getDerivedStateFromProps')
                return null
            }
            // 组件更新之前的快照
            getSnapshotBeforeUpdate(){
                console.log('getSnapshotBeforeUpdate')
                return '测试'
            }
            // 初次渲染传递的props,上一次的state,getSnapshotBeforeUpdate钩子返回的值
            componentDidUpdate(preProps,preState,snapshotValue){
                console.log('componentDidUpdate',preProps,preState,snapshotValue)
            }
            render() {
                console.log('render执行了')
                return (
                    <div>
                        <p>{this.state.count}</p>
                        <button onClick={this.add}>按钮</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Count count="tom"/>,
            document.getElementById('example')
        );
    </script>

代码解释:getSnapshotBeforeUpdate钩子函数默认需要返回一个value或者null,其中在componentDidUpdate钩子函数中可以接收到初次渲染传递的props,先前的state及getSnapshotBeforeUpdate返回的value值

初次渲染时打印结果:
image.png

点击按钮打印结果:
image.png

getSnapshotBeforeUpdate使用场景

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容