react_08react更新流程

一:理论知识

React更新流程:

更新流程

React在props或state发生改变时，会调用render()方法，创建一棵不同的树。
React优化:

• 同层节点之间相互比较，不会垮节点比较

• 不同类型的节点，产生不同的树结构

  
  
  image.png

• 开发中,通过key来指定哪些节点在不同的渲染下保持稳定
  Diffing算法:
  1.对比不同类型的元素，节点不同就会拆解原来的树，建立新树
  

  并不会复用Counter组件
  
  2.对比同类型元素
  
  只修改className属性
  
  
  只修改color样式
  
  同类型组件元素:组件会保持不变，React会更新该组件的props，并且调用componentWillReceiveProps() 和 componentWillUpdate() 方法；
  下一步，调用 render() 方法，diff 算法将在之前的结果以及新的结果中进行递归；
  3.对子节点进行递归
  在默认条件下，当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差异时，生成一个 mutation。
  
  情形一
  
  
  情形二
  
  所以我们需要key值来进行优化，但是情形一的情况下加不加key对性能无变化
  key的注意事项:

• key应该是唯一的

• key不要使用随机数(随机数在下一次render时，会重新生成一个数字)

• 使用index作为key，对性能是没有优化的

  
  
  当前key是0
  
  
  当前key是1
  
  

  key值发生了变化，到时还是需要创建很多的mutation，所以无优化。

二:代码实践

案例想要实现的效果,点击数字时候界面刷新，触发渲染函数,点击文本的时候，因为界面上没有对文本依赖，所以不想触发render函数

界面

第一次启动会调用app render

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
       counter:10,
       message:"hello world"
    };
  }
  render() {
    console.log("App render被调用");
    return (
      

        
{this.state.counter}
        

          {this.changeCount()}}>数字+1
          {this.changeText()}}>改变文本
        
 
      
    );
  }
  changeCount(){
      this.setState({
        counter:this.state.counter+1,
      })
  }
  changeText(){
    this.setState({
      message:"hello react",
    })
  }
  shouldComponentUpdate(nextProps, nextState) {
      if(this.state.counter!==nextState.counter){
        return true
      }
      return false
  }
}

上述代码可实现目标需求，但是存在两个问题：

• 如果很多个类，那么每个类组件都需要写shouldComponentUpdate,并且如果属性很多，那判断更多
• 如果是函数式组件怎么办?

解决方案:

• 针对问题一：在不使用shouldComponentUpdate的情况下,所有的类不要继承Component,而是继承PureComponent

// 原来情况
import React, { Component, PureComponent } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
       counter:10,
       message:"hello world"
    };
  }
  render() {
    console.log("App render被调用");
    return (
      

        
{this.state.counter}
        

          {this.changeCount()}}>数字+1
        
 
        


      
    );
  }
  changeCount(){
      this.setState({
        counter:this.state.counter+1,
      })
  }
}
 class Main extends Component{
    render(){
      console.log('Main 渲染了')
      return (
        

         main 组件
        
      );
    }
 }

点击按钮，App组件的render()函数与Main组件的render()函数都会被调用，实际上Main组件并没有重新渲染的必要，浪费了性能。

//修改后
import React, { Component, PureComponent } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
       counter:10,
       message:"hello world"
    };
  }
  render() {
    console.log("App render被调用");
    return (
      

        
{this.state.counter}
        

          {this.changeCount()}}>数字+1
        
 
        


      
    );
  }
  changeCount(){
      this.setState({
        counter:this.state.counter+1,
      })
  }
}
// 主要变化由Component===>PureComponent
 class Main extends PureComponent{
    render(){
      console.log('Main 渲染了')
      return (
        

         main 组件
        
      );
    }
 }

对应源码：

源码参考

• 针对问题二：引入高阶函数memo来解决,此函数返回一个新的组件

import React, { Component, PureComponent,memo } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
       counter:10,
    };
  }
  render() {
    console.log("App render被调用");
    return (
      

        
{this.state.counter}
        

          {this.changeCount()}}>数字+1
        
 
        

         
        {/* 观看不同的效果 */}
        {/* 
 */}
        
      
    );
  }
  changeCount(){
      this.setState({
        counter:this.state.counter+1,
      })
  }
}
 class Main extends PureComponent{
    render(){
      console.log('Main 渲染了')
      return (
        

         main 组件
        
      );
    }
 }
 function Footer(){
   console.log('footer 渲染了')
   return(
     
footer组件
   )
 }
 const MemoFooter=memo(
  function Footer(){
    console.log('footer 渲染了')
    return(
      
footer组件
    )
  }
 )

源码对应:

memo源码