getSnapshotBeforeUpdate使用react钩子

Question

我如何实现getSnapshotBeforeUpdate使用反应挂钩给出的相同逻辑？

Answer 1

根据React Hooks FAQ，没有办法用钩子实现getSnapshotBeforeUpdate和ComponentDidCatch生命周期方法

Do Hooks涵盖了课程的所有用例吗？

我们的目标是让Hooks尽快涵盖课程的所有用例。对于不常见的getSnapshotBeforeUpdate和componentDidCatch生命周期，没有Hook等价物，但我们计划很快添加它们。

对于Hook来说，这是一个非常早的时期，因此DevTools支持或Flow / TypeScript类型的某些集成可能还没有准备好。目前，某些第三方库也可能与Hook不兼容。

Answer 2

您可以使用useMemo()而不是getSnapshotBeforeUpdate()。在这里阅读更多关于how to memoize calculations with 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