React的更新

流程如下：更新流程

在react之中，同层结点之间进行相互的比较，不会跨层结点比较。并且不同类型的结点，产生不同的树结构。可以通过key来指定哪些节点在不同的渲染下保持稳定。
1、节点为不同的元素时
React会拆除原有树，并且建立新的树。（也就是对应这个不一样的结点往下的所有都拆除）
如下代码所示，哪怕结点内的内容是一致的，但是元素改变了，也会拆除重建。

//这是原本的结点
<div>
	<Navber />
<div/>
//修改之后的结点
<span>
	<Navber />
</span>

2、节点为同一个元素
如下情况只会更新类的改变

<div className="before"><div/>
<div className="after"><div/>

3、对子节点进行递归更新
按顺序每个子节点进行对比，ul下的前两个是相同的只会更新最后一个li，但是这种方法有一定的效率问题，在这里是在最后一个插入节点

//旧DOM
<ul>
	<li>1</li>
	<li>2</li>
</ul>
//新DOM
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

如果是在第一个插入节点：
造成的结果就是从第一个到最后一个都是重新生成，造成性能的浪费。

//旧DOM
<ul>
	<li>1</li>
	<li>2</li>
</ul>
//新DOM
<ul>
	<li>3</li>
	<li>1</li>
	<li>2</li>
</ul>

通过key进行性能优化
在对每一个li都有一个唯一的key，只会对相对节点进行位移，优化性能。
注意对state的修改实对于原本的state要确保不变性，例如下：不要使用push在数组末尾进行添加

change(){
	this.setState({
	movie:[...this.state.movie,'我的']
	})
}

（1）在最后位置插入数据，有无key的意义不大
（2）在前面插入数据，在没有key的情况，所有的li都需要修改。

组件镶嵌的render的调用：

import React, { Component } from 'react';

// Header
function Header() {
  console.log("Header被调用");
  return <h2>我是Header组件</h2>
}

// Main
class Banner extends Component {
  render() {
    console.log("Banner render函数被调用");
    return <h3>我是Banner组件</h3>
  }
}

function ProductList() {
  console.log("ProductList被调用");
  return (
    <ul>
      <li>商品列表1</li>
      <li>商品列表2</li>
      <li>商品列表3</li>
      <li>商品列表4</li>
      <li>商品列表5</li>
    </ul>
  )
}

class Main extends Component {
  render() {
    console.log("Main render函数被调用");
    return (
      <div>
        <Banner/>
        <ProductList/>
      </div>
    )
  }
}

// Footer
function Footer() {
  console.log("Footer被调用");
  return <h2>我是Footer组件</h2>
}


export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  render() {
    console.log("App render函数被调用");
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
        <Header/>
        <Main/>
        <Footer/>
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

如上代码，如果在App组件的点击加一的操作之后，在app组件内镶嵌的组件包括其组件的子组件也会进行相关的render都会调用：

阻断render调用：（性能优化）

（1）使用shouldComponentUpdate
shouldComponentUpdate（）周期函数默认是返回true，只要设置为返回false就可以组值默认更新。函数接收两个参数，最新的props和最新的State

  shouldComponentUpdate(nextProps, nextState) {
   return false;
  }

在这里面可以进行一些条件的筛选进行判断是否render更新如下：
如下只有counter状态改变的时候才调用render。

  render() {
    console.log("App render函数被调用");
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
        <button onClick={e => this.changeText()}>改变文本</button>
      </div>
    )
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.counter !== nextState.counter) {
      return true;
    }
    
    return false;
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  changeText() {
    this.setState({
      message: "你好啊,李银河"
    })
  }

（2）PureComponent
shouldComponentUpdate周期函数的编写，如果有多个state的话，里面的判断会很麻烦代码多。可以让类组件继承PureComponent
PureComponent的原理是对组件的将新旧的props和state进行比较，如果改变再进行更新。

上面的的代码可以改为继承PureComponent

export default class App extends PureComponent
class Main extends PureComponent
class Banner extends PureComponent

结果如图：

修改之后依旧render调用的除去因为状态改变的app组件之外，其余两个组件都是函数组件。

（3）memo高阶组件
使用如下：包裹函数组件，对其中的props进行比较，如果改变就调用

import React, { PureComponent, memo } from 'react';

// Header
const MemoHeader = memo(function Header() {
  console.log("Header被调用");
  return <h2>我是Header组件</h2>
})