javascript - 如何在不重新渲染父级的情况下更改另一个子级的子级状态

Question

我想更改子组件的内容以响应另一个子组件中的用户事件，而不导致父组件重新渲染。

我尝试将子状态 setter 存储到父级中的变量中，但它不是在子级全部渲染时定义的，因此它不起作用。

是否有一个最小的方法来完成此任务(无需安装状态管理库)？

ChildToChild.tsx

import React, {
  Dispatch,
  SetStateAction,
  useEffect,
  useRef,
  useState,
} from "react";

export default function ChildToChild() {
  const renderCounter = useRef(0);
  renderCounter.current = renderCounter.current + 1;

  let setChildOneContent;
  const childOneContentController = (
    setter: Dispatch<SetStateAction<string>>
  ) => {
    setChildOneContent = setter;
  };

  return (
    <div>
      <h1>Don't re-render me please</h1>
      <p>No. Renders: {renderCounter.current}</p>
      <ChildOne childOneContentController={childOneContentController} />
      <ChildTwo setChildOneContent={setChildOneContent} />
    </div>
  );
}

function ChildOne({
  childOneContentController,
}: {
  childOneContentController: (setter: Dispatch<SetStateAction<string>>) => void;
}) {
  const [content, setContent] = useState("original content");

  useEffect(() => {
    childOneContentController(setContent);
  }, [childOneContentController, setContent]);

  return (
    <div>
      <h2>Child One</h2>
      <p>{content}</p>
    </div>
  );
}

function ChildTwo({
  setChildOneContent,
}: {
  setChildOneContent: Dispatch<SetStateAction<string>> | undefined;
}) {
  return (
    <div>
      <h2>Child Two</h2>
      <button
        onClick={() => {
          if (setChildOneContent) setChildOneContent("content changed");
        }}
      >
        Change Child One Content
      </button>
    </div>
  );
}

Answer 1

您应该能够实现

1. 在子组件中使用状态
2. 在父组件中使用回调函数来调用子组件的 setState 函数。这将触发子级的重新渲染，但不会触发其自身(父级)的重新渲染。

演示:https://codesandbox.io/s/child-re-rendering-only-x37ol