日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react父組件更改props子組件無法刷新原因及解決方法_React

作者：奉先何在2019 ? 更新時間： 2022-11-02 編程語言

項目場景：

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

1、創建父組件

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

    //掛載完成后更新狀態值，render()結束后會執行componentDidUpdate()鉤子函數
    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>父組件調用setState()時，子組件也會執行render()方法，</p>
                <Button   color='primary' size='small' onClick={this.changeCount}>更改count的值</Button>



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

        )
    }
}

2、創建子組件

export default class Child2 extends Component {

    constructor(props){
        super(props)
    }
    componentDidMount() {
        console.log("子組件生命周期======：Mount")
    }
    //掛載完成后更新狀態值，render()結束后會執行componentDidUpdate()鉤子函數
    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>

        )
    }
}

問題描述

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

點擊更改‘更改state的值’按鈕，父子組件同步刷新，而點擊更改count的值按鈕，子組件不會刷新

原因分析：

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

情況組件掛載生命周期鉤子函數執行控制臺打印數據

在這里插入圖片描述


父組件執行setState()結果：

在這里插入圖片描述

  • 要想讓子組件更新dom，必須讓子組件執行render()方法，而父組件執行render()方法后，子組件也會執行render()方法，這就是為何父組件調用了setSate()方法，子組件會刷新。
  • 當更改了count的值，比如count連續加1，變成了9，此時父組件調用this.setState()更改狀態值，

此時子組件的count也變成了9，因為count并沒有清除，父子組件又先后調用了render()方法，因此渲染上了最新的props的屬性值

如果子組件是函數組件，則render后，count值會變為初始值，那么父組件setState()之后，子組件render()函數執行時收到的還是最初的值，這和子組件是類組件有區別，大家可以自己嘗試，

解決方案：

如果想要傳遞子組件的props改變后刷新子組件dom，就要將父組件的state中的值傳給子組件，而不是將普通的變量傳遞給子組件

vue更改props的值子組件會刷新，因為vue中傳遞給props的值也是父組件狀態中的變量

原文鏈接：https://blog.csdn.net/lvfengxian2019/article/details/126724921

欄目分類
最近更新