先说大体思路:父组件通过给子组件传递数据(属性)告知子组件有可能需要重新渲染,子组件自己根据传来的数据(在componentWillReceiveProps方法中)决定是否有必要进行重新渲染。
根据React文档,父组件可以通过属性(props)把数据传递给子组件,但需要注意的是这个传递动作只发生的render的过程中,在组件已经渲染完毕之后,传递就会停止。假设父组件内部定义了变量A,并赋给了子组件的某个属性,当这个变量A 的值发生改变,并不足以让子组件刷新。只要变量A的变化不足以引发父组件调用自身的render方法进行重新渲染,这个变量A的值就不会主动传递给子组件。这段话的目的在于明确组件的数据传递需要由渲染来驱动,而不是由数据的变化来驱动的。因此父组件要传递数据给子组件,第一步是要触发父组件对自身的重新渲染。
按照React文档上说的,通过在父组件中调用setState()或者forceUpdate()都可以引起组件对自身的重新渲染,这就完成了上述的第一步。那么成功将数据通过属性传递给了子组件后,也还是不一定能引发子组件的更新,因为组件有权决定当接收到外部传来的属性的时候要怎么处理,而具体实现就定义在组件的componentWillReceiveProps方法里,在组件首次渲染完毕之后,这个方法会在组件每次接收到外部传来的属性时被调用(组件首次加载时除外)。通常,使用RN定义好的很多组件(比如Text、Image等)时,会发现当给它们赋予新的属性,它们相应的UI特征就会改变,那是因为这些组件都已经在componentWillReceiveProps方法中实现了在接收到外部传来的属性的时候就进行重新渲染。因此如果发现有些组件未能按预想般进行刷新,可以查看该组件的源码中componentWillReceiveProps方法的实现,看看传给该控件的属性是否满足了它的刷新条件。另外,如果要自定义一些控件,而且希望控件在第一次加载完毕后还能受属性的影响而进行刷新,就要自己去实现componentWillReceiveProps方法,根据接收到的属性,主动调用setState方法进行自我刷新。
总结:1.当前组件重新渲染的必要条件是:setState或者forceUpdate。
2.父组件Props的传递发生在父组件render的过程中。