React入门 - 生命周期day03

Silver〄line

已于 2022-09-30 15:30:00 修改

阅读量275

点赞数

分类专栏：入门React 文章标签： react.js 前端

于 2022-09-23 13:55:43 首次发布

本文链接：https://blog.csdn.net/weixin_53758026/article/details/127009173

版权

入门React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.旧版本的生命周期

附链接：React.Component – React

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

                1.constructor()

                2.componentWillMount()

                3.render()

                *4.componentDidMount()

                    一般做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

                1.shouldComponentUpdate()

                2.componentWillUpdate()

                **3.render() 必须使用

                4.componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

                *1.componentWillUnmount()

                    一般做一些收尾的事，例如：关闭定时器、取消订阅消息

    <script type="text/babel">
        class Count extends React.Component {
            constructor(props) {
                super(props)
                this.state = { count: 0 }
                console.log('Count---constructor');
            }
            // 加1按钮
            add = () => {
                const { count } = this.state
                this.setState({ count: count + 1 })
            }
            // 卸载组件
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 不改变状态，强制更新
            force = () => {
                this.forceUpdate()
            }
            // 组件将要挂载
            componentWillMount() {
                console.log('Count---componentWillMount');
            }
            // 组件挂载完毕
            componentDidMount() {
                console.log('Count---componentDidMount');
            }
            // 组件将要卸载
            componentWillUnmount() {
                console.log('Count---componentWillUnmount');
            }

            // 控制组件更新的“阀门”
            shouldComponentUpdate() {
                console.log('Count---shouldComponentUpdate');
                return true
            }

            // 组件将要更新
            componentWillUpdate() {
                console.log('Count---componentWillUpdate');
            }

            // 组件更新完毕
            componentDidUpdate() {
                console.log('Count---componentDidUpdate');
            }

            // 初始化渲染、状态更新之后
            render() {
                console.log('Count---render');
                const { count } = this.state
                return (
                    <div>
                        <h2>当前求和为：{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>强制更新</button>
                    </div>
                )
            }
        }

        // 父组件A
        class A extends React.Component {
            state = { carName: '奔驰' }
            changeCar = () => {
                this.setState({ carName: '奥拓' })
            }
            render() {
                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName} />
                    </div>
                )
            }
        }

        // 子组件B
        class B extends React.Component {
            // 组件将要接收参数
            componentWillReceiveProps(props) {
                console.log('B---componentWillReceiveProps', props);
            }

            // 控制组件更新的“阀门”
            shouldComponentUpdate() {
                console.log('B---shouldComponentUpdate');
                return true
            }

            // 组件将要更新
            componentWillUpdate() {
                console.log('B---componentWillUpdate');
            }

            // 组件更新完毕
            componentDidUpdate() {
                console.log('B---componentDidUpdate');
            }

            render() {
                console.log('B---render');
                return (
                    <div>B组件展示的车是：{this.props.carName}</div>
                )
            }
        }

        ReactDOM.render(<A />, document.getElementById('test'))
    </script>

2.新版本的生命周期

官方说明：

17.0：删除 componentWillMount、componentWillReceiveProps 和 componentWillUpdate。（在此版本之后，只有新的 “UNSAFE_” 生命周期名称可以使用。）

附链接：异步渲染之更新 – React Blog

1.废弃3个Will(加前缀UNSAFE_)

componentWillMount

componentWillUpdate

componentWillReceiveProps

2.新增2个get

getDerivedStateFromProps()

getSnapshotBeforeUpdate()

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

                        1.constructor()

                        2.getDerivedStateFromProps

                        3.render()

                        4.componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

                        1.getDerivedStateFromProps

                        2.shouldComponentUpdate()

                        3.render()

                        4.getSnapshotBeforeUpdate

                        5.componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

                        1.componentWillUnmount()

    <script type="text/babel">
        class Count extends React.Component {
            constructor(props) {
                super(props)
                this.state = { count: 0 }
                console.log('Count---constructor');
            }
            // 加1按钮
            add = () => {
                const { count } = this.state
                this.setState({ count: count + 1 })
            }
            // 卸载组件
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 不改变状态，强制更新
            force = () => {
                this.forceUpdate()
            }
            // 组件将要挂载
            UNSAFE_componentWillMount() {
                console.log('Count---componentWillMount');
            }
            // 组件挂载完毕
            componentDidMount() {
                console.log('Count---componentDidMount');
            }
            // 组件将要卸载
            componentWillUnmount() {
                console.log('Count---componentWillUnmount');
            }

            // 控制组件更新的“阀门”
            shouldComponentUpdate() {
                console.log('Count---shouldComponentUpdate');
                return true
            }

            // 组件将要更新
            UNSAFE_componentWillUpdate() {
                console.log('Count---componentWillUpdate');
            }

            // 组件更新完毕
            componentDidUpdate() {
                console.log('Count---componentDidUpdate');
            }

            // 初始化渲染、状态更新之后
            render() {
                console.log('Count---render');
                const { count } = this.state
                return (
                    <div>
                        <h2>当前求和为：{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>强制更新</button>
                    </div>
                )
            }
        }

        // 父组件A
        class A extends React.Component {
            state = { carName: '奔驰' }
            changeCar = () => {
                this.setState({ carName: '奥拓' })
            }
            render() {
                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName} />
                    </div>
                )
            }
        }

        // 子组件B
        class B extends React.Component {
            // 组件将要接收参数
            UNSAFE_componentWillReceiveProps(props) {
                console.log('B---componentWillReceiveProps', props);
            }

            render() {
                console.log('B---render');
                return (
                    <div>B组件展示的车是：{this.props.carName}</div>
                )
            }
        }

        ReactDOM.render(<Count />, document.getElementById('test'))
    </script>

例子1：getSnapshotBeforeUpdate的使用场景

    <script type="text/babel">
        class NewsList extends React.Component {
            state = { newsArr: [] }

            componentDidMount() {
                setInterval(() => {
                    const { newsArr } = this.state
                    const news = '新闻' + (newsArr.length + 1)
                    this.setState({ newsArr: [news, ...newsArr] })
                }, 1000);
            }

            getSnapshotBeforeUpdate() {
                return this.refs.list.scrollHeight
            }

            componentDidUpdate(preProps, preState, height) {
                // 距离滚动条的高度+30
                this.refs.list.scrollTop += this.refs.list.scrollHeight - height
            }

            render() {
                return (
                    <div className="list" ref="list">
                        {
                            this.state.newsArr.map((n, index) => {
                                return <div key={index} className="news">{n}</div>
                            })
                        }
                    </div>
                )
            }
        }
        ReactDOM.render(<NewsList />, document.getElementById('test'))
    </script>