性能优化

一、类组件

react的父组件的props或者state刷新，那么在父组件之内的所有子组件都会被重新创建，不管props或者state有没有被改变。

1. 在类组件中可以在使用PureComponent（推荐使用）

在类组件中，为了防止父组件的props或者state改变，而没有被修改的子组件也重新渲染，可以使子组件使用PureComponent，这个东西会进行浅解包的对比，然后决定是否重新渲染该组件。

import React, { PureComponent } from "react"

class PageB extends PureComponent {

  render() {
    return (
      <div>
        {this.props.list.map((item) => {
          return <div key={item.name}>{item.name}</div>
        })}
      </div>
    )
  }
}

export default PageB

2. shouldComponentUpdate 生命周期函数（不推荐使用）

该生命周期函数会最先得到最新的state和props，那么可以用这个东西和组件内的state和props进行比较，如果相同则在生命周期函数内返回false。那么该组件就不会被更新。

但是官方不建议这样做，因为可能会产生意想不到的bug。

  shouldComponentUpdate(nextProps, nextState) {
    console.log("nextProps", nextProps)
    console.log("nextState", nextState)

    return true
  }

二、函数式组件

react的父组件的props或者state刷新，那么在父组件之内的所有子组件都会被重新创建，不管props或者state有没有被改变。

1. 父组件

import React, { useState } from "react"
import Child from "../components/Child"
const PageF = () => {
  const [name, setname] = useState("zrs")
  const [title, settitle] = useState("孩子组件的标题")

  return (
    <div>
      <h2>PageF</h2>
      <hr />
      <button
        onClick={() => {
          setname("zzzzzz")
        }}
      >
        change-name
      </button>
      <button
        onClick={() => {
          settitle("孩子组件的标题被修改了")
        }}
      >
        change-title
      </button>

      <hr />
      <h3>{name}</h3>

      <Child title={title} />
    </div>
  )
}

export default PageF

2. 子组件

为了让子组件在没有任何变化的时候，不重新渲染，那么可以使用memo函数来包裹组件，这样就可以实现子组件在props或者state没有变化的时候，无论父组件的props或者state怎样改变都不会变化。优化性能。

import React, { memo } from "react"

const Child = memo((props) => {
  console.log(">>>>>>>")
  return (
    <div>
      Child
      <h2>{props.title}</h2>
    </div>
  )
})

export default Child

react-12-性能优化