Reactjs Component 渲染(Render)机制

        一个组件在加载完毕后,如果既没有外部驱动,也没有内部驱动,是不会进行重新渲染的。按照React文档上说的,组件想要对自身进行刷新,可以通过调用setState()或者forceUpdate()来实现,这是让组件刷新的其中一种办法,也就是我说的内部驱动。而另一种则是由外部驱动,也就是让父组件驱动子组件进行重新渲染,那么下面就是阐述父组件如何让子组件发生重新渲染。
       先说大体思路:父组件通过给子组件传递数据(属性)告知子组件有可能需要重新渲染,子组件自己根据传来的数据(在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的过程中。


你可能感兴趣的:(Reactjs Component 渲染(Render)机制)