React.useMemo в компоненте класса

Question

Есть ли способ использовать этот хук или какой-то его аналог React API в случае компонента класса?

Мне интересно, следует ли мне использовать сторонние помощники для заметок в случае компонента класса (например, lodashmemo, memoizeOne и т. Д.) Или существует какой-то официальный способ реагирования API для компонентов класса.

Спасибо за любую помощь.

PS

Я хочу сгенерировать uuid в случае измененных детей.

с компонентом SFC я мог бы использовать useMemo вот так

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

Но как добиться того же для компонентов на основе классов без какой-либо третьей стороны и т. Д.
PPS Я не использую Redux и т. Д., Только чистый React.js

Answer 1

Согласно документации React:

Если вы хотите повторно вычислить некоторые данные только при изменении свойства, используйте помощник по мемоизации.

Документы используют 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 может решить "забыть" некоторые ранее запомненные значения и пересчитать их при следующем рендеринге, например, чтобы освободить память для компонентов вне экрана. (документы)

Памятная ценность const keyValue = useMemo(() => uuid()(), [children]) может быть пересчитан, несмотря на childrenбудет таким же в будущем React. Этот случай может привести к несоответствиям, еслиuuid() возвращает новый идентификатор, но children не изменилось.

Для функциональных компонентов альтернативой является useRef с useEffect в зависимости от вашего варианта использования.

Answer 2

Используйте getDerivedStateFromProps. Официальная документация React упоминает эту технику здесь.

Начиная с версии 16.3, рекомендуемый способ обновления состояния в ответ на изменения свойств - это новый статический жизненный цикл 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);
  }
}