React memo减少重复渲染详解

import React, { useState, memo } from 'react'
const Child = () => {
  console.log('child')
  return (
    <div>
      <h3>child组件</h3>
    </div>
  )
}
const App = () => {
  let [count, setCount] = useState(100)
  let [name, setName] = useState('张三')
  return (
    <div>
      <h3>App -- {count}</h3>
      <button onClick={() => {
        setCount(v => v + 1)
      }}>
        ++++
      </button>
      <Child />
    </div>
  )
}
export default App

import React, { useState, memo } from 'react'
const Child = memo(() => {
  console.log('child')
  return (
    <div>
      <h3>child组件</h3>
    </div>
  )
})
const App = () => {
  let [count, setCount] = useState(100)
  let [name, setName] = useState('张三')
  return (
    <div>
      <h3>App -- {count}</h3>
      <button onClick={() => {
        setCount(v => v + 1)
      }}>
        ++++
      </button>
      <Child />
    </div>
  )
}
export default App

import React, { useState, memo } from 'react'
// React.memo顶层Api方法，它可以用来减少子组件的重复渲染次数，从而提升组件渲染性能
// React.memo它是一个只能在函数组件中使用的顶层Api方法
const Child = memo(({count}) => {
  console.log('child')
  return (
    <div>
      {/* 此时子组件只依赖于父组件中的 count,所以父组件中的count改变，
      子组件就会重新渲染，而input框中的值改变对子组件没有影响 */}
      <h3>child组件 -- {count}</h3>
    </div>
  )
})
const App = () => {
  let [count, setCount] = useState(100)
  let [name, setName] = useState('张三')
  return (
    <div>
      <h3>App -- {count}</h3>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <button onClick={() => {
        setCount(v => v + 1)
      }}>
        ++++
      </button>
      <Child count={count} />
    </div>
  )
}
export default App

import React, { useState, memo } from 'react'
// shouldComponentUpdate它必须要有一个返回值，true则表示继续渲染，false停止渲染
// React.memo参数2返回值如果为true则表示停止渲染，false继续渲染
const Child = memo(
  ({ count }) => {
    console.log('child')
    return (
      <div>
        <h3>child组件 -- {count}</h3>
      </div>
    )
  },
  // prevProps 旧的props数据   object
  // nextProps 新的props数组   object
  // 可以比较两者的不同，来决定是否重新渲染
  // 参数2写的回调函数，一般情况下都在props传过来的数据为引用类型，才需要手动来判断，如果是基本类型则不需要写参数2，来手动判断。
  (prevProps, nextProps) => {
    // true/false
    // return false
    // console.log(prevProps, nextProps)
    return prevProps.count === nextProps.count
  }
)
const App = () => {
  let [count, setCount] = useState(100)
  let [name, setName] = useState('张三')
  return (
    <div>
      <h3>App -- {count}</h3>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <button onClick={() => {
        setCount(v => v + 1)
      }}>
        ++++
      </button>
      <Child count={count} />
    </div>
  )
}
export default App

import React, { useState, memo } from 'react'
import _ from 'lodash'
// shouldComponentUpdate它必须要有一个返回值，true则表示继续渲染，false停止渲染
// React.memo参数2返回值如果为true则表示停止渲染，false继续渲染
const Child = memo(
  ({ count }) => {
    console.log('child')
    return (
      <div>
        <h3>child组件 -- {count.n}</h3>
      </div>
    )
  },
  // 使用lodash库来完成对象的值的比较，从而用来完成减少组件的无用的重复渲染
  (prevProps, nextProps) => _.isEqual(prevProps, nextProps)
)
const App = () => {
  // let [count, setCount] = useState(100)
  let [count, setCount] = useState({ n: 100 })
  let [name, setName] = useState('张三')
  return (
    <div>
      {/* <h3>App -- {count}</h3> */}
      <h3>App -- {count.n}</h3>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <button
        onClick={() => {
          setCount({ n: Date.now() })
        }}
      >
        ++++
      </button>
      <Child count={count} />
    </div>
  )
}
export default App