javascript - 当父级更改时，如何将 Prop 传递给 react 组件但不更新子级中的 Prop ？

Question

const Parent = () => {
   const [thing, setThing] = useState('a string');

   // code to update thing

   return <Child thing={thing} />
}

const Child = props => {
   return <div>I want {props.thing} to be initial value without updating</div>
}

如果我希望“东西”从父级传递给子级，但在父级更改它时不更新，我该如何实现？

我试过 useEffect，试过将“东西”克隆到 Child 中的一个常量......

Answer 1

我会用 useEffect与空 []对于依赖项，因此它只运行一次。

来自 Reactjs.org :

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.

const Child = props => {
  let thing = props.thing;
  let [initialValue, setInitialValue] = useState("");

  useEffect(() => {
    setInitialValue(thing);
  }, []);

  return (
    <div>
      I want <strong>{initialValue}</strong> to be initial value without
      updating
    </div>
  );
};

CodeSandbox