何がその小道具の変化を検出するには、このコンポーネントの原因は？

ラファエル：

以下の最小の例では、親コンポーネントが有するdata性質とパスdata.value子にします。私は正確に更新戦略とここで何が起こっているかを理解するのに苦労しています：

const MY_DATAVALUE = {
  a: 1,
  b: 2
};

const DATA = {
  value: MY_DATAVALUE
};

function Child(props) {
  useEffect(() => {
    console.log("child props changed");
  }, [props]);

  return <h1>Child</h1>;
}

export default function App() {
  const [data, setData] = useState(DATA);

  useEffect(() => {
    console.log("data changed");
  }, [data]);

  useEffect(() => {
    console.log("data.value changed");
  }, [data.value]);

  function handleButtonClick() {
    const newData = {
      value: MY_DATAVALUE
    };
    setData(newData);
  }

  return (
    <>
      <button onClick={handleButtonClick}>Button</button>
      <Child value={data.value} />
    </>
  );
}

（これを参照してくださいCodesandboxを、ボタンがクリックされたときに、私は次のことが起こると思いますが、今）：

アプリのは、handleButtonClick()実行されたとdata-stateは今、新しいオブジェクトを参照します。したがって、アプリケーションの最初のuseEffect（ためのチェックdataトリガ）。
しかしdata.value、まだ（と同じ参照が含まれていますMY_DATAVALUEので、アプリケーションの第二は、） useEffect（チェックをdata.valueトリガーしません）。

しかし：子供はuseEffect（チェックをpropsトリガ）。何故ですか？親によると、data.value変化しなかった（それ以外の場合は二つ目はuseEffectトリガーただろう）。

チャイルズは、なぜあなたは、私には説明できuseEffecttriggers`？小道具は「本当に」に変更されている場合はどうすれば見つけることができますか？私は個別にすべてのプロパキーをチェックする必要がありますか？ありがとうございました！

アルバロ：

useEffect私たちが提供することは異なっている場合、依存関係は、変更をトリガーします。我々は異なる基準に合格した場合、我々は別の値と同じ参照を渡すか、場合に発生します。

const newData = {
  value: MY_DATAVALUE
};

setData(newData);

dataしながら今、別のオブジェクトを指すvalueキーが前の値と同じことをいいます。

この手段は、このフックがトリガーされます：

useEffect(() => {
  console.log("data changed");
}, [data]);

これはトリガーされませんが。

useEffect(() => {
  console.log("data.value changed");
}, [data.value]);

今のところ、これはあなたが両方のポイントで説明したものです。

子供の場合は、propsオブジェクトはすべてのレンダリングに新しい参照です。

このため、このフックは常にトリガされます：

useEffect(() => {
  console.log("child props changed");
}, [props]);

このフックはトリガしないだろうが。

const MY_DATAVALUE = {
  a: 1,
  b: 2
};

// In Parent...

<Child value={MY_DATAVALUE} />

// In Child...

useEffect(() => {
  console.log("child value changed");
}, [props.value]);

何がその小道具の変化を検出するには、このコンポーネントの原因は？

おすすめ