React.memo

memo接受两个参数，一个是需要缓存的组件，第二个是函数（必须是函数，不能直接写ture(缓存)、false(不缓存)，即使函数的返回值是boolean）

import { memo, useState, useCallback } from 'react';

const isTrue = () => {
  console.log('我是true')
  return false
}
const Child = memo((props) => {
  console.log('我是子组件！我在渲染呢！！！')
  return (
    <>
      <div>我是子组件</div>
    </>
  )
}, isTrue);

const Parent = () => {
  console.log('我是父组件！我在渲染呢！！！')
  const [p1, setP1] = useState(0)
  const p2 = 'hello';
  const p3 = 'world';
  const p4 = useCallback(() => {
    console.log(p2, p3)
  }, [p2, p3])
  return (
    <>
      <div>我是父组件，p1：{p1}</div>
      <button onClick={() => {
        setP1(p1 + 1);
      }}>点我p1加1</button>
      <Child p2={p2} p3={p3} p4={p4} />
    </>
  )
}

export default Parent;