getSnapshotBeforeUpdate с использованием ответных хуков

Question

Как я могу реализовать ту же логику, что getSnapshotBeforeUpdate дает мне с помощью реакционных хуков?

Answer 1

Вы можете использовать useMemo() вместо getSnapshotBeforeUpdate().Подробнее о о том, как запоминать вычисления с помощью React Hooks, читайте здесь .

Вот простой пример:

Это всегда, что пользователь вводит (onChange)нерелевантное состояние с точки зрения Компонента Списка изменяется, и из-за этого он перерисовывается и может перерисовываться более 50 раз, это зависит от пользовательского набора, поэтому он используется useMemo() для запоминания Компонента Списка и егозаявил, что просто todoList слушает.

import List from './List'

const todo = (props) => {
  const [inputIsValid, setInputIsValid] = useState(false)

  const inputValidationHandler = (event) => {
    if(event.target.value.trim() === '') {
      setInputIsValid(false)
    } else {
      setInputIsValid(true)
    }
  }

  return <React.Fragment>
    <input
      type="text"
      placeholder="Todo"
      onChange={inputValidationHandler}
    />
    {
      useMemo(() => (
        <List items={todoList} onClick={todoRemoveHandler} />
      ), [todoList])
    }
  </React.Fragment>

}

export default todo

Answer 2

Согласно React Hooks FAQ , пока нет способа реализовать getSnapshotBeforeUpdate и ComponentDidCatch метод жизненного цикла с крючками

Do Hooksохватить все варианты использования для классов?

Наша цель состоит в том, чтобы Hooks как можно скорее охватил все варианты использования для классов.У необычных жизненных циклов getSnapshotBeforeUpdate и componentDidCatch пока нет эквивалентов Hook, но мы планируем добавить их в ближайшее время.

Это очень раннее время для Hooks, поэтому некоторые интеграции, такие как DevTools, поддерживают Flow или Flow /.Набор текста на TypeScript может быть еще не готов.Некоторые сторонние библиотеки также могут быть несовместимы с Hooks на данный момент.