zoukankan      html  css  js  c++  java
  • React钩子函数问题,解决父组件实时更新子组件的值

    情景:tab切换的时候,渲染当前tab中的组件的数据更新,
    一般想到的就是我切换的时候给子组件传一个id进去,然后子组件进行this.props.id放在子组件的state中,进行渲染,但是问题是,如果我再点击tab更新state.id后,子组件的state不会更新,还是一开始初始化的数据,

    方法一:在切换的时候调用子组件的方法更新state,但是这个方法不是很友好
    方法二:利用钩子函数操作getDerivedStateFromProps
    子组件.js

    //getDerivedStateFromProps类似componentWillReceiveProps向这个钩子,听说要被舍弃,对比问题网上也有
    
    //这是个静态方法,不能进行调用this;
    static getDerivedStateFromProps(nextProps, prevState) {
            // console.log(nextProps.test);
            // console.log(prevState.test);
            if (nextProps.test !== prevState.test) {
                          //这里就可以实时更新子组件的test了,nextProps.test就是父组件传入的数据,跟当前的test对比
                return {
                    test: nextProps.test,
                };
            } else {
                return null;
            }
        }
    

    如果你进行一些数据请求的话并且对请求的数据进行数据处理,那么这个函数的显示很累赘,你就想写一个方法然后进行this调用,结果这个钩子又不能this,
    方法三:利用钩子函数操作componentDidUpdate

    //这个钩子也可以进行更新数据,进行渲染
    componentDidUpdate(prevProps) {
            // console.log();
            // console.log(prevProps.test);
            if (this.props.test != prevProps.test) {
                this.setState({
                    test: this.props.test,
                });
            }
        }
    

    注:对于钩子函数的详细讲解可以去百度查阅,这里只是在写代码中找到一些解决问题的小技巧,有问题望指正

     链接:https://www.jianshu.com/p/f51d9370b430
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    vue.js代码开发最常见的功能集合
    干货|程序员常去的14个顶级开发社区
    17个Web前端开发工程师必看的国外网站
    识别“百度权重”作弊的方法
    问题与对策:CSS的margin塌陷(collapse)
    程序猿,你们这么拼是找不到妹纸的!
    Jquery UI的datepicker插件使用方法
    初识Ajax---简单的Ajax应用实例
    Ajax解决缓存的5种方法
    Jquery+bootstrap实现静态博客主题
  • 原文地址:https://www.cnblogs.com/snowhite/p/15090715.html
Copyright © 2011-2022 走看看