React渲染机制与生命周期

1. 一个组件加载完毕后,如果既没有外部驱动,也没有内部驱动,是不会进行重新渲染的。

2. 组件想要对自身进行刷新,可以通过调用setState()或者forceUpdate()来实现,这是让组件刷新的内部驱动

3.父组件通过给子组件传递props,告知子组件有可能重新渲染,子组件自己根据传来的数据(在componentWillReceiveProps方法中)决定是否有必要进行重新渲染。

   父组件可以通过props吧数据传递给子组件,但需要注意的是这个传递动作只发生render的过程中,在组件已经渲染完毕后,传递会停止。

   加入父组件内部定义了变量A ,并赋给了子组件某个属性,当A的值发生改变,并不足以让子组件刷新。只要A的变化不足以引发父组件调用自身render方法进行重新渲染,就不会传递。

   组件的数据传递需要render驱动,而不是由数据变化驱动的

   在父组件中调用setState()或者forceUpdate()都可以引起组件对自身的重新渲染。这就完成了第一步,成功把props传给子组件。而子组件有全决定当接收到外部传来的属性的时候要怎么处理,具体实现在componentWillReceiveProps方法里,在组件首次渲染完毕之后,这个方法会在组件每次接收到外部传来的props的时候被调用。

4. shouldComponentUpdate方法

    shouldComponentUpdate方法默认返回true,这就导致了每次更新都重新渲染。

    当React将要渲染组件时他会执行shouldComponentUpdate方法来看它是否返回true(组建应该更新,也就是重新渲染)。你只要重写shouldComponentUpdate方法让他根据情况返回true或者false来告诉React什么时候重新渲染。

5.React组件生命周期

    首次实例化:getDefaultProps——>getInitialState——>componentWillMount——>render——>componentDidMount

    实例化完成后的更新:getInitialState——>componentWillMount——>render——>componentDidMount

  组件已存在时的状态改变:componentwillReceiveProps——>shouldComponentUpdate——>componentWillUpdate——>render——>omponentDidUpdate

猜你喜欢

转载自blog.csdn.net/m0_37829710/article/details/82748900