react防止组件多余渲染（性能优化）

1. 使用生命周期函数shouldComponentUpdate() ```jsx import React, { Component } from ‘react’

class Foo extends Component {

shouldComponentUpdate(nextProps, nextState) { //两个参数nextProps和nextState，表示下一次props和一次state的值 //生命周期函数shouldComponentUpdate()默认返回ture，返回false时不会渲染render if (nextProps.count === this.props.count) { return false } return true }

render() { console.log(‘Foo render’) return null; } }

export default class App extends Component { state = { count: 0, name:’hzy’, } handleClick1=()=>{ // shouldComponentUpdate必须配合react的”不可变值的原则”来使用 // 错误写法,因为这样写导致子组件在shouldComponentUpdate的nextProps和this.props提前一致了 this.state.count++ this.setState({ count: this.state.count }) //正确写法 this.setState({ count: this.state.count + 1 }) } handleClick2=()=>{ this.setState({name:’zyh’}) } render() { return (

2. 类组件使用[React](https://so.csdn.net/so/search?from=pc_blog_highlight&q=React).PureComponent(纯组件)
React.PureComponent可能会因深层的数据不一致而产生错误的否定判断，从而shouldComponentUpdate结果返回false，界面得不到更新
```jsx
import React, { Component, PureComponent } from 'react'
class Foo extends PureComponent {
  //React.PureComponent 原理就是实现了在shouldComponentUpate()对props和state的浅对比
  render() {
    console.log('Foo render')
    return null;
  }
}
export default class App extends Component {
  state = {
    count: 0,
  }
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Add</button>
        {/* 每次点击之后，state改变导致子组件也要重新进行不必要的渲染 */}
        <Foo name="Mike" />
      </div>
    );
  }
}

1. 函数组件使用memo

React.memo会返回一个纯化(purified)的组件MemoFuncComponent，这个组件将会在JSX标记中渲染出来。当组件的参数props和状态state发生改变时，React将会检查前一个状态和参数是否和下一个状态和参数是否相同，如果相同，组件将不会被渲染，如果不同，组件将会被重新渲染。

import React, { Component, memo } from 'react'
//react.memo适用于函数式组件
//使用方式：只需将函数组件作为参数传入React.memo中
const Foo = memo(function Foo(props) {
  console.log('Foo render')
  return null;
});
export default class App extends Component {
  state = {
    count: 0,
  }
  render() {
    const { preson } = this.state
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Add</button>
        {/* 每次点击之后，state改变导致子组件也要重新进行不必要的渲染 */}
        <Foo name="Mike" />
      </div>
    );
  }
}