    // 父組件
    const Parent = ()=>{
        const [count, setCount] = useState(1)
        const addCount = ()=>{
           setCount(count + 1)
        }
        return(
            <>
             <div onClick={addCount}>計數: {count}</div>
             <Child />
            </>
        )
    }
    // 子組件
    const Child = memo(()=>{
        console.log('child start---')
        return(
            <div>child...</div>
        )
    })
    // 使用memo后，子組件的props或者state沒有變化時，將不會對子組件進行渲染

useMemo使用

   const sum = ()=>{
      return a+b
   }
   const result = useMemo(()=>{sum()},[a,b])
   // 只有在a或者b的值變化時才會觸發(fā)sum函數執(zhí)行

useCallback使用

    // 父組件，給子組件傳遞name和changeName方法
    const Parent = () => {
      const [count, setCount] = useState(1);
      const [name, setName] = useState("bbz");
      const addCount = () => {
        setCount(count + 1);
      };
      const changeName = useCallback((n) => {
        setName(n);
      }, []);
      return (
        <>
          <div onClick={addCount}>計數: {count}</div>
          <Child name={name} changeName={changeName} />
        </>
      );
    };
    // 子組件
    const Child = ({ name, changeName }) => {
      console.log("child start---");
      return (
        <div
          onClick={() => {
            changeName("bobozai");
          }}
        >
          child comps: {name}
        </div>
      );
    };
    // 如果不使用useCallback,則點擊父組件計數的同時，子組件會console進行渲染，
    // 因為更新count時父組件會重新渲染，導致重新生成了一個changeName函數，
    // 所以子組件的props變了，導致子組件會重新渲染
    // 而對changeName函數用useCallback進行包裹，則對函數進行緩存不會重新生成

以上就是react組件memo useMemo useCallback使用區(qū)別的詳細內容，更多關于react組件memo useMemo useCallback的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: