4.React生命周期

4.React生命周期

4.1引出生命周期

    class Life extends React.Component {

        state = {
            opacity:0.5
        }

        death = () => {
            // 卸载定时器
            // clearInterval(this.timer)
            // 卸载组件
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))

        }

        // 生命周期钩子函数
        // 组件挂载完调用
        componentDidMount(){
            this.timer = setInterval(()=>{
                // 获取原状态
                let {opacity} = this.state
                // 减小0.1
                opacity -= 0.1
                // 设置新的透明度
                if (opacity <= 0) opacity = 1
                this.setState({opacity})

            }, 200)
        }

        // 组件将要卸载操作
        componentWillUnmount(){
            // 卸载定时器
            clearInterval(this.timer)
        }

        render(){
            return (
                <div>
                    <h2 style={{opacity: this.state.opacity}}>yeyang is da hanbi</h2>
                    <button onClick={this.death}>don't life</button>
                </div>
            )
        }
    }

4.2 react生命周期（旧）（17.0版本之前）

    /*
    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() ====> 常用
                ----  一般在这个钩子中做一些收尾的事，如关闭定时器、取消订阅消息
     */

    class Count extends React.Component {

        constructor(props) {
            console.log('Count---constructor')
            super(props);
            this.state = {
                count: 0
            }
        }

        // state = {
        //     count: 0
        // }

        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: 'benz'
        }

        changeCar = () => {
             this.setState({
                 carName: 'bmw'
             })
        }

        render(){
            return (
                <div>
                  <div>我是A组件</div>
                    <button onClick={this.changeCar}>换车</button>
                    <B carName={this.state.carName}/>
                </div>
            )
        }
    }

    // 子组件B
    class B extends React.Component{
        // 组件将要接收新的props的钩子
        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(){
            return (
                <div>
                     我是B组件, 接收的车是：{this.props.carName}
                </div>
            )
        }
    }

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

4.3 react生命周期（新）（17.0版本之后）

    /*
    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()
    */

    class Count extends React.Component {

        constructor(props) {
            console.log('Count---constructor')
            super(props);
            this.state = {
                count: 0
            }
        }

        // state = {
        //     count: 0
        // }

        add = () => {
            const {count} = this.state
            this.setState({
                count: count+1
            })
        }

        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        force = () => {
            this.forceUpdate()  // 强制更新钩子
        }

        // 若state的值在任何时候都取决于props，可以使用该方法
        static getDerivedStateFromProps(props ,state){
            console.log('Count---getDerivedStateFromProps', props, state)
            return null   // 返回 state对象或者null
        }

        // 在更新之前获取快照
        getSnapshotBeforeUpdate(){
            console.log('Count---getSnapshotBeforeUpdate')
            return 'abc'
        }

        // 组件挂载完成的钩子
        componentDidMount(){
            console.log('Count---componentDidMount')
        }

        // 组件将要卸载时的钩子
        componentWillUnmount(){
            console.log('Count---componentWillUnmount')
        }

        // 控制组件更新的阀门： 是否更新组件钩子
        shouldComponentUpdate(){
            console.log('Count---shouldComponentUpdate')
            return true
        }

        // 组件更新完的钩子
        componentDidUpdate(preProps, preState, snapshotValue){
            console.log('Count---componentDidUpdate', preProps, preState, snapshotValue)
        }

        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>
            )
        }
    }

    ReactDOM.render(<Count count={199}/>, document.getElementById('test'))

4.4 getSnapshotBeforeUpdate使用场景

拖动滚动条让滚动条停留在当前数据位置

    class NewList 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) {
            console.log(preProps, preState, height)
            console.log(this.refs.list.scrollTop) // 当前距离滚动条顶端的距离
            this.refs.list.scrollTop += (this.refs.list.scrollHeight - height)
            // this.refs.list.scrollTop += 30
        }

        render() {
            console.log('NewList---render')
            const {newsArr} = this.state
            return (
                <div className="list" ref='list'>
                    {
                        newsArr.map((n, index) => {
                            return <div key={index} className="news">{n}</div>

                        })
                    }
                </div>
            )
        }
    }

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