memo

用于减少组件的刷新次数，作用相当于PureComponent,会进行一个浅比较
React.memo(component,function):第一个是普通的组件；第二个参数是一个方法，用于控制是否刷新（类似于shouldComponentUpdate）
一般来说只传一个参数即可

const Home = () => {
    const [count,setCound] = useState(0)
    const [price,setPrice] = useState(0)
    return (
        <>
          <button onClick={()=>setCound(count+1)}>add</button>
          {/* <Child number={count}/> */}
          <ChildMemo number={count}/>
          <button onClick={()=>setPrice(price+10)}>{price}</button>
        </>
    )
}
function Child(props:any){
  console.log('Child render')
  return <div>{props.number}</div>
}
// const ChildMemo = memo(Child)
const ChildMemo = memo(Child,(prev,next)=>{
  return next.number % 2 != 0
})
export default Home;

useMemo

用于缓存一个值，减少组件的不必要刷新
值可以是一个结果，也可以是一个组件
useMemo(()=>{...... return ...},[value1..]) 两个参数，第一个是方法；第二个是一个数组，只有数组中的值改变，第一个方法才会执行

const Home = () => {
    const [count,setCound] = useState(0)
    const [price,setPrice] = useState(0)

    const totalDiv = useMemo(()=>{
      console.log('totalDiv');
      return <span>{count*11}</span>
    },[count]) //只有count改变才会触发  返回一个组件

    const total = useMemo(()=>{
      console.log('total');
      return count*22
    },[count])  //只有count改变才会触发  返回一个结果

    return (
        <>
          <button onClick={()=>setCound(count+1)}>add</button>
          {/* <Child number={count}/> */}
          <ChildMemo number={count}/>
          <button onClick={()=>setPrice(price+10)}>{price}</button>
          {totalDiv}
          {total}
        </>
    )
}

useCallback

用于缓存一个方法（类似于 useMemo(fn)），减少组件的不必要刷新
useCallback(()=>{...},[value1..]) 两个参数，第一个是方法；第二个是一个数组，只有数组中的值改变，第一个方法才会执行

例如：父类给子类传递方法，父类改变了state，则子类会被重新render

const Home = () => {
    const [count,setCound] = useState(0)
    const [price,setPrice] = useState(0)

    const totalResultCallBack = useCallback(()=>{
     console.log('totalResultCallBack');
     
    },[count])
    const totalResult = ()=>{
      console.log('totalResult');
     }
    return (
        <>
          <button onClick={()=>setCound(count+1)}>add</button>

           // 此处传递  totalResult 
          //state改变以后，totalResult会重新声明，memo用法也失效。
          //改变其他值时 ChildMemo 会刷新 
          <ChildMemo number={count} onClick={totalResult}/>

          // 此处传递 totalResultCallBack
          //已经通过 useCallback 进行缓存，只有count改变时才会更改
         //改变其他值时 ChildMemo 不会刷新 
          <ChildMemo number={count} onClick={totalResultCallBack}/>
          <button onClick={()=>setPrice(price+10)}>{price}</button>

        </>
    ) 
}
function Child(props:any){
  console.log('Child render')
  return <div onClick={props.onClick}>{props.number}</div>
}
const ChildMemo = memo(Child)

export default Home;