web-dev-qa-db-ja.com

Reactフック-shouldComponentUpdateの実装方法は？

Reactに、オプションの2番目の引数として配列を渡すことで、効果をスキップするように指示できることを知っています。

例えば：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

ただし、比較を制御したい場合はどうすればよいですか？独自の比較ロジックを追加します。

関数を2番目の引数として渡すことができるReact.memoのようなものを期待します。

reactjsreact-hooks
30
Idan Dagan

別の方法として、useRefを使用してデータを保持し、useStateのみを使用して、表示するデータを保存することもできます。時々これはメモのアプローチよりもうまく機能します：私は最近ReactがReact.memoを使用しているときにまだ不必要にレンダリングしていて、いくつかのPIXIディスプレイをめちゃくちゃにしているケースがありました。以下のアプローチは修正されましたそれは私にとって...うまくいけば、私はアンチパターンをしなかった:-)

const countRef = useRef(0);
const [countDisplay, setCountDisplay] = useState(0);

yourUpdateFunction = () => {
  // This is where count gets updated
  countRef.current = countRef.current + 1;
  if ((countRef.current % 2) === 0) setCountDisplay(countRef.current);
}

return (<p>countDisplay</p>);
0
Will59

オプションの2番目の配列引数を渡すと、配列に渡されるプロパティが変更されると、エフェクト関数が起動します。コンポーネントに渡されるプロパティが変更されたときにクラスコンポーネントのshouldComponentUpdateメソッドが実行されるのと同じです。パラメータの値に基づいてエフェクト関数を決定できます-エフェクトを適用するかどうか。

0
Arshabh Agarwal