React-Native 深入理解UI重新渲染的过程

• 当需要 React Native 重新渲染UI时，开发者使用最多的就是setState 函数。初次之外，React Native 还提供了replaceState 函数与forceUpdate函数。

• 合并状态机变量

  • React Native 框架使用 setState 函数来合并状态机变量。setState函数的原型是： setState(oldState, callback)
    所以，开发者传递给setState函数的是一个使用箭头符号定义的函数。React Native 想清楚了如何高效地渲染界面时，它会调用这个函数来查看哪些状态机变量需要被改变，并改变那些状态机变量，然后重新渲染。
    为什么 React Native 需要想一想如何才能高效地重新渲染界面呢？因为一个组建的UI的可变部分不仅由它自己的状态机变量构成，还会由父组件传递进来的属性构成。崽子组件来看，父组件传递进来的属性是不可变的，但父组件可以改变它。如果父组件改变了它，那么子组件的UI就需要重新渲染。同时，本组件的状态机变量还有可能成为某子组件的属性，那么本组件的状态机变量的改变必然要求子组件的UI也要被渲染。在父组件层层嵌套的结构下，React Native 需要计算哪一级的哪些部分需要重新渲染，而哪些部分可以保持原来的值等，如此才能做到高效地重新渲染界面。当某子组件也需要重新渲染是，那么该子组件的各个生命周期函数都会被按生命周期规则调用。

  • 代码

    constructor(props) {
        super(props);
        this.state = {
          inputedNum: '我是初始值',
        };
    }
    
    updateNum(newText) {
        this.setState((oldState) => {
           for (var aName in oldState) {
               console.log(aName);
               console.log(oldState[aName]);
           }      
           return {
              inputedNum: newText,
              aBrandnewStateVariable: 'I am a new variable.'
           };
        }, this.changeNumDone);
    }
    
    changeNumDone() {
      console.log('React Native has changed inputed Num');
    }
    

    • 如果函数updateNum第一次传入的参数为“我是第一次赋值”，第二次再传入参数“我是第二次赋值”，执行代码可看到如下打印：

    1      index.ios.js:   inputedNum
    2      index.ios.js:   我是初始值
    3      index.ios.js:   React Native has changed inputed Num
    4      index.ios.js:   inputedNum
    5      index.ios.js:   我是第一次赋值
    6      index.ios.js:   aBrandnewStateVariable
    7      index.ios.js:   I am a new variable.
    8      index.ios.js:   React Native has changed inputed Num
    

    • 当在this.setState函数中使用箭头符号定义的函数被执行时，传递进去的参数是还没有被改变的当前所有的状态机变量。
    • 在这几行代码中，要求加入一个新的状态机变量。这在setState函数将传入函数的返回值与当前状态机做一个合并操作，名称相同的状态机变量就用新状态机变量的值覆盖老的，有新增加的状态机变量就直接增加，原来状态机中存在的在本次设置状态机变量的值时没有赋予新值的状态机保持不变。如果setState函数将传入函数的返回值与当前状态机相比没有任何修改与增加，那么将不会进行渲染。
    • 还可以给this.setState函数提供第二个可选参数——一个回调函数，它将在setState完成并且重新渲染完成后被调用。我们要求 React Native 修改变量并且重新渲染界面不在this.setState函数被调用后马上执行。如果还有些操作要求在界面重新渲染完成后进行，那么就不能放在调用this.setState的语句后，而是应当放在回调函数中。

• 判断是否渲染

  • React Native 框架使用手榴弹ComponentUpdate 函数来判断接下来是否进行渲染。这个函数的原型是：boolean shouldComponentUpdate(nextProps, nextState)
    React Native 组件可以实现shouldComponentUpdate函数。如果实现了这个函数，当React Native 决定重新渲染组件时，会先调用这个函数。如果这个函数返回false，React Native 将放弃渲染组件。

  • 示例

    shouldComponentUpdate() {
        if (this.state.inputeNum.length < 3)  return false;
        return true;
    }
    

• 强制启动渲染

  • React Native 框架使用forceUpdate函数向开发者提供强制启动渲染能力。这个函数的原型是：forceUpdate(callback)
  • 如果开发者因为某种原因，使得UI中可变数据的来源必须从状态机变量与属性外获取，那么可以使用 React Native 提供的forceUpdate 函数，开发者通过这个函数要求 React Native 重新渲染界面。这个函数的调用将会导致所有级别的所有UI组件重新读取、计算、渲染，并且所有UI组件的生命周期函数都会按生命周期规则来执行。它的调用方法是在 RN 组件的成员函数中执行：this.forceUpdate()
  • 调用forceUpdate 函数导致的重新渲染过程，将不会调用shouldComponentUpdate来检查是否允许重新渲染。开发者可以提供一个回调函数，这个回调函数将在渲染完成后被调用。开发者应当尽可能避免使用此函数。

• 渲染过程

  • React Native 框架通过render 函数实现重新渲染。该函数原型是：ReactComponent render()
  • 任何 React Native 组件都必须要有这个函数。它必须并且只能返回一个可渲染的组件描述。
  • 开发者不应当在自己的代码中调用这个函数以重新刷新组件。正确的办法是修改某组件的状态机变量或者属性（对于一个组件来说，它的属性是常量，但对于给与该组件属性的父组件来说，子组件的属性就是它的状态机变量或者普通成员变量，可以随意修改），由此修改触发 React Native 框架的重新渲染过程。