react使用过程中遇到的问题？是怎么解决的？

[SUNYIMIN]

问题1: 当我们将props上的值，赋给了state，在组件第一次渲染过程，子组件可以从state获取props的值，当props更新后，组件在渲染的过程不能从state中获取最新的props的值。

为什么不能重新在state中获取最新的props的值，主要是react的construct构造函数，只会在组件第一次 创建实例的时候执行，后续的更新渲染，组件的实例已经存在，不会重新创建了。除非在组件销毁后，再次创建组件的时候会执行。

解决方案一：子组件不要将props的值赋值到state中，render中直接通过this.props取值

解决方案二：通过componentWillReceiveProps这个生命力周期函数监听props的变化

  componentWillReceiveProps(nextProps) {
    this.setState({
      text: nextProps.text
    })
  }

1.组件初次渲染时不会执行componentWillReceiveProps；

2.当props发生变化时执行componentWillReceiveProps；

3.在这个函数里面，旧的属性仍可以通过this.props来获取；

4.此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。即可以根据属性的变化，通过调用this.setState()来更新你的组件状态，在该函数中调用 this.setState() 将不会引起第二次渲染。

注意不要在componentWillReceiveProps中调用回调函数，去更改父级组件的状态，更新props，这样会导致死循环，导致页面崩溃

componentWillReceiveProps还存在一个问题：只要父组件引起了你的组件的 重新render，你的组件就会触发componentWillReceiveProps方法，即使你组件接收的props没有发生任何变化。在新的react版本中componentWillReceiveProps这个生命周期函数即将被废弃

[SUNYIMIN]

解决方法三：getDerivedStateFromProps

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log(nextProps, prevState)
    if(nextProps.text !== prevState.text) {
      return {
        text: nextProps.text
      }
    }
    return null
  }

将props映射到组件的state，接受两个参数，最新的props值,和组件当前的props值，如果两者不一致，将props最新的值赋给state，相等的情况则直接返回null 只要父级引起的渲染，不管props有没有更新，getDerivedStateFromProps都会执行。由于是静态方法，该函数内是取不到当前组件的实例，不用担心回调引起的死循环

[SUNYIMIN]

在react中，执行方法需要绑定this。不然取不到当前组件的实例对象 上例中解构赋值获取到的handleClick这个方法在执行时就会报错，Class的内部是强制运行在严格模式下的，此处的this在赋值中丢失了原有的指向，在运行时指向了undefined，而undefined是没有属性的

[SUNYIMIN]

hooks中直接更新引用类型的数据，不会触发render。 主要是：传入的数据要是不可变数据，防止函数内部修改数据，会影响外部

[SUNYIMIN]

每次父组件的更新，都会带动子组件的更新渲染，如何避免一些不必要的更新渲染