react componentWillReceiveProps

最新推荐文章于 2023-12-19 22:27:49 发布

qq_27449993

最新推荐文章于 2023-12-19 22:27:49 发布

阅读量2.4w

点赞数 9

分类专栏： react 前端文章标签： reactjs javascript

本文链接：https://blog.csdn.net/qq_27449993/article/details/107358145

版权

前端同时被 2 个专栏收录

114 篇文章

订阅专栏

react

8 篇文章

订阅专栏

本文详细探讨了React中componentWillReceiveProps生命周期方法的工作原理，指出它可以在接收到新属性时更新组件状态。但需要注意，当传递的是引用类型属性时，即使属性值改变，组件可能不会重新渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结：

1.组件初次渲染时不会执行componentWillReceiveProps；

2.当props发生变化时执行componentWillReceiveProps；

3.在这个函数里面，旧的属性仍可以通过this.props来获取；

4.此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。即可以根据属性的变化，通过调用this.setState()来更新你的组件状态，在该函数中调用 this.setState() 将不会引起第二次渲染。

5.也可在此函数内根据需要调用自己的自定义函数，来对prop的改变做出一些响应。

注意：
当父组件向子组件传递引用类型（或复合类型，比如对象、数组等）的属性时，要注意打印的this.props和nextProps的内容是一致的，因为引用类型在内存中只有一份，传值时是浅拷贝

import React, {
    Component
} from 'react'
//当组件执行完componentDidMount函数后，就进入了
class ParentBy extends Component {
    constructor() {
        super()
        this.state = {
            count: 4,
        }
    }
    setSave(){
        this.setState({
            count:this.state.count+1,
            

        })
    }
    render() {
        return ( <div> <button onClick = {
            this.setSave.bind(this)
        }>fdjaksfkl</button> parent{this.state.count} <Son value={this.state.count}> </Son></div> )
    }
}
class Son extends Component {
    constructor(prop) {
        super()
        this.state={
            count:prop.value,
            jiuzhi:prop.value
        }
    }
    render() {
        return ( <div> Son jiuzhi {this.state.jiuzhi}xinzhi{this.state.count}fuzhi{this.props.value}</div>)
        }
        componentWillReceiveProps(nextProp){
console.log(this.props.value)
this.setState({
    count:nextProp.value,
    jiuzhi:this.props.value
})
        }
    }
   
    class Count extends Component {
        constructor() {
            super()
            //
            this.state = {
                num: 2
            }
        }
        setSave() {
            this.setState({
                num: this.state.num + 1
            })
        }
        render() {
            return ( <div>
                <div ref = 'countH' onClick = {
                    this.setSave.bind(this)
                } > f附件打开啦JFK拉萨的是 </div>
                当店count++{
                    this.state.num
                } <ParentBy> </ParentBy> </div>
            )
        }
        shouldComponentUpdate(nextProp, nextState) {
            return (this.state.num % 2 == 0) ? true : false
        }
        componentWillUpdate() {
            console.log(this.refs.countH.innerHTML)

        }
    }

    export default class Index extends Component {
        render() {
            return ( <div >
                我是首页 <Count > </Count> </div>
            )
        }
    }