IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> react父组件更改props子组件无法刷新原因 -> 正文阅读

[JavaScript知识库]react父组件更改props子组件无法刷新原因

项目场景:

使用过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的值也是父组件状态中的变量

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-13 11:05:12  更:2022-09-13 11:06:12 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 11:00:21-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码