react父組件更改props子組件無(wú)法刷新原因及解決方法

更新時(shí)間：2022年09月08日 14:46:33 作者：奉先何在2019

使用過(guò)vue的朋友都知道，vue父組件更改props的值，子組件是會(huì)刷新的，而react就未必，今天通過(guò)一個(gè)例子給大家介紹react父組件更改props子組件無(wú)法刷新原因,需要的朋友可以參考下

項(xiàng)目場(chǎng)景：

使用過(guò)vue的朋友都知道，vue父組件更改props的值，子組件是會(huì)刷新的，而react就未必。
先看以下例子：

1、創(chuàng)建父組件

antd-mobile依賴需要自行引入

export default class Parent2 extends Component {
    constructor(props){
        super(props)
//初始化state
        this.state={
            parentVal: 10,
        }
    }

    count=1
    handleClick=()=>{
        this.setState({
            parentVal:this.state.parentVal+1
        })
    }

    changeCount=()=>{
        this.count=this.count+1
        console.log(this.count)
    }

    componentDidMount() {
        console.log("父組件生命周期======：Mount")
    }

    //掛載完成后更新?tīng)顟B(tài)值，render()結(jié)束后會(huì)執(zhí)行componentDidUpdate()鉤子函數(shù)
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("父組件生命周期======：Update")
    }

    componentWillUnmount() {
        console.log("父組件生命周期======：Unmount")
    }
    render() {
        console.log("父組件生命周期======：render")
        return (
            <div>
                父組件
                <p>{this.state.parentVal}</p>
                <Divider>分割線</Divider>

                <Button   color='primary' size='small' onClick={this.handleClick}>更改state的值</Button>
                <p>父組件調(diào)用setState()時(shí)，子組件也會(huì)執(zhí)行render()方法，</p>
                <Button   color='primary' size='small' onClick={this.changeCount}>更改count的值</Button>



                <Child2 number={this.state.parentVal} count={this.count}/>
            </div>

        )
    }
}

2、創(chuàng)建子組件

export default class Child2 extends Component {

    constructor(props){
        super(props)
    }
    componentDidMount() {
        console.log("子組件生命周期======：Mount")
    }
    //掛載完成后更新?tīng)顟B(tài)值，render()結(jié)束后會(huì)執(zhí)行componentDidUpdate()鉤子函數(shù)
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("子組件生命周期======：Update")
    }

    componentWillUnmount() {
        console.log("子組件生命周期======：Unmount")
    }
    render() {
        console.log("子組件生命周期======：render")
        return (
            <div style={{background:'yellow',padding:20}}>
               <p>父組件state中傳值：{this.props.number}</p>
                <p>父組件非state中傳值：{this.props.count}</p>
            </div>

        )
    }
}

問(wèn)題描述

這里有兩個(gè)變量，一個(gè)count，不是父組件state中的值，一個(gè)numer是父組件state中的值。

點(diǎn)擊更改‘更改state的值’按鈕，父子組件同步刷新，而點(diǎn)擊更改count的值按鈕，子組件不會(huì)刷新

原因分析：

父組件更改count的值，雖然父組件count值改變，但是不會(huì)更改子組件的值，props是單向傳遞的

情況組件掛載生命周期鉤子函數(shù)執(zhí)行控制臺(tái)打印數(shù)據(jù)

在這里插入圖片描述

父組件執(zhí)行setState()結(jié)果：

在這里插入圖片描述

要想讓子組件更新dom，必須讓子組件執(zhí)行render()方法，而父組件執(zhí)行render()方法后，子組件也會(huì)執(zhí)行render()方法，這就是為何父組件調(diào)用了setSate()方法，子組件會(huì)刷新。
當(dāng)更改了count的值，比如count連續(xù)加1，變成了9，此時(shí)父組件調(diào)用this.setState()更改狀態(tài)值，

此時(shí)子組件的count也變成了9，因?yàn)閏ount并沒(méi)有清除，父子組件又先后調(diào)用了render()方法，因此渲染上了最新的props的屬性值