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

来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。