web-dev-qa-db-ja.com

クラスコンポーネントのReact.useMemo

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

クラスコンポーネント（例lodash memo、memoizeOneなど）の場合にサードパーティのメモヘルパーを使用する必要があるか、それともいくつか存在するのでしょうか。クラスコンポーネントの公式なリアクションAPIの方法。

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

追伸.

変更された子の場合、uuidを生成したいと思います。

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

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

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

reactjsmemoizationreact-usememo
2
Velidan

React docs に従って：

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

ドキュメントでは 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が選択される可能性があります以前にメモされた値を「忘れて」、次のレンダリングで再計算する（たとえば、オフスクリーンコンポーネントのメモリを解放する）（ docs ）

メモ化された値const keyValue = useMemo(() => uuid()(), [children])は、childrenがReact futureで同じであるにもかかわらず）再計算される可能性があります。この場合、uuid()は新しいIDを返しますが、childrenは変更されていません。

関数コンポーネントの場合、代替案はuseRefで、ユースケースに応じてuseEffectになります。

1
ford04

getDerivedStateFromProps を使用します。公式React docsはこの手法について言及しています here 。

バージョン16.3以降、propsの変更に応じて状態を更新するための推奨方法は、新しい静的getDerivedStateFromPropsライフサイクルを使用することです。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      values: props.values,
      childrenIds: []
    };
  }

  static getDerivedStateFromProps(props, state) {
    if (props.values !== state.values) {
      return {
        values: props.values,
        childrenIds: generateIds(props.values)
      };
    }
    return null;
  }

  render() {
    return JSON.stringify(this.state.childrenIds);
  }
}
0
resolritter