14

クラスコンポーネントの場合、このフックまたは React API の類似物を使用する方法はありますか?

クラスコンポーネントの場合にサードパーティのメモヘルパーを使用する必要があるか（例：lodash memo、memoizeOneなど）、またはクラスコンポーネント用の公式の反応APIの方法が存在するかどうか疑問に思っています。

助けてくれてありがとう。

PS

変更されたChildrenの場合にuuidを生成したい。

SFCコンポーネントを使用すると、このようにuseMemoを使用できます

const keyValue = useMemo(() => uuid()(), [children])

しかし、サードパーティなどを使用せずにクラスベースのコンポーネントで同じことを達成する方法
PPS Redux などは使用していません。純粋な React.js のみ

4

2 に答える 2

14

React docsに従って：

prop が変更されたときにのみ一部のデータを再計算する場合は、メモ化ヘルパーを使用します。

ドキュメントはmemoizeOneライブラリとして使用するため、これは良い選択です。keyValue次の副作用の一部として変更することもできますcomponentDidUpdate。

componentDidMount() {
  this.keyValue = uuid()()
}

componentDidUpdate(prevProps) {
  if (this.props.children !== prevProps.children) {
    this.keyValue = uuid()()
    // alternative: store keyValue as state to trigger re-render
  }
}

getDerivedStateFromPropsまれなケースでは代替となる可能性があり、通常は他のオプションが優先されます。

useMemoが良い選択ではない理由uuid()

セマンティックな保証としてではなく、パフォーマンスの最適化として useMemo に頼ることができます。将来、React は、以前にメモした値の一部を「忘れ」、次のレンダリングで再計算することを選択する可能性があります。たとえば、オフスクリーン コンポーネント用にメモリを解放するためです。(ドキュメント)

メモ化された値は、React の将来では同じでconst keyValue = useMemo(() => uuid()(), [children])も再計算される可能性があります。childrenこの場合uuid()、新しい ID を返しchildrenても変更されていない場合、矛盾が生じる可能性があります。

useRef関数コンポーネントの場合、ユースケースにuseEffect応じて代替手段があります。

于 2020-05-21T10:52:52.360 に答える