react/react native 组件的刷新机制

组件(Component)的刷新机制

一个组件在加载完毕后，如果既没有外部驱动，也没有内部驱动，是不会进行重新渲染的。按照React文档上说的，组件想要对自身进行刷新，可以通过调用setState()或者forceUpdate()来实现，这是让组件刷新的其中一种办法，也就是我说的内部驱动。而另一种则是由外部驱动，也就是让父组件驱动子组件进行重新渲染，那么下面就是阐述父组件如何让子组件发生重新渲染。

先说大体思路：父组件通过给子组件传递数据（属性）告知子组件有可能需要重新渲染，子组件自己根据传来的数据（在componentWillReceiveProps方法中）决定是否有必要进行重新渲染。

根据React文档，父组件可以通过属性（props）把数据传递给子组件，但需要注意的是这个传递动作只发生的render的过程中，在组件已经渲染完毕之后，传递就会停止。假设父组件内部定义了变量A，并赋给了子组件的某个属性，当这个变量A 的值发生改变，并不足以让子组件刷新。只要变量A的变化不足以引发父组件调用自身的render方法进行重新渲染，这个变量A的值就不会主动传递给子组件。这段话的目的在于明确组件的数据传递需要由渲染来驱动，而不是由数据的变化来驱动的。因此父组件要传递数据给子组件，第一步是要触发父组件对自身的重新渲染。

按照React文档上说的，通过在父组件中调用setState()或者forceUpdate()都可以引起组件对自身的重新渲染，这就完成了上述的第一步。那么成功将数据通过属性传递给了子组件后，也还是不一定能引发子组件的更新，因为组件有权决定当接收到外部传来的属性的时候要怎么处理，而具体实现就定义在组件的componentWillReceiveProps方法里，在组件首次渲染完毕之后，这个方法会在组件每次接收到外部传来的属性时被调用（组件首次加载时除外）。通常，使用RN定义好的很多组件（比如Text、Image等）时，会发现当给它们赋予新的属性，它们相应的UI特征就会改变，那是因为这些组件都已经在componentWillReceiveProps方法中实现了在接收到外部传来的属性的时候就进行重新渲染。因此如果发现有些组件未能按预想般进行刷新，可以查看该组件的源码中componentWillReceiveProps方法的实现，看看传给该控件的属性是否满足了它的刷新条件。另外，如果要自定义一些控件，而且希望控件在第一次加载完毕后还能受属性的影响而进行刷新，就要自己去实现componentWillReceiveProps方法，根据接收到的属性，主动调用setState方法进行自我刷新。

每天进步一点点，希望今天进步的一点能比昨天的一点要多一点。