React Basics~Render Performance/ useCallback

发布日期： 2024-10-17 阅读量： 作者： 网络

即使将备忘录设置为子组件，子组件仍然可以重新渲染。
这是一种我们将函数作为 props 传递给子组件的情况。

・src/example.js

import react, { usecallback, usestate } from "react";
import child from "./child";

const example = () => {
  console.log("parent render");

  const [counta, setcounta] = usestate(0);
  const [countb, setcountb] = usestate(0);

  const clickhandler = () => {
    setcountb((pre) => pre + 1);
  };

  return (
    <div classname="parent">
      <div>
        <h3>parent component</h3>
        <div>
          <button
            onclick={() => {
              setcounta((pre) => pre + 1);
            }}
          >
            button a
          </button>
          <span>update parent component</span>
        </div>
      </div>
      <div>
        <p>the count of click button a：{counta}</p>
      </div>
      <child countb={countb} onclick={clickhandler} />
    </div>
  );
};

export default example;

上一篇: phpcms怎么增加行距

下一篇: golang框架在高并发场景中的社区支持

React Basics~Render Performance/ useCallback

随便看看