React：有状态的类组件和使用钩子的函数组件之间的区别？

Question

我刚刚创建了一个包含表达式的函数组件const [state, setState] = useState()。现在我可以访问state和setState()，这个有状态的函数组件与有状态的类组件非常相似。我只知道这个组件和典型的类组件之间有两个区别：在引用状态时，我们必须使用state.handle而不是this.state.handle，并且我们可以轻松访问render方法之外的 Context API 。

除了我已经发现的差异之外，这个有状态的函数组件和有状态的类组件有什么区别吗？我的上述断言不正确吗？

稍微细化一下这个问题，有什么是类组件可以做而带有 Hooks 的函数组件不能做的吗？

Answer 1

在钩子之前：

• 有状态和无状态组件之间有明显的区别。
• 当您希望组件具有某种状态时，您可以使用 write Classes，而当您认为您的组件不需要任何状态时，您可以使用Function 组件。

挂钩后：

• 随着 Hooks 的引入，我们可以在不使用类的情况下创建有状态的组件。

• 我们可以使用函数来创建有状态的组件。

有用的文章

• 第1条

• 第二条

正如 Sung M. Kim 所说，有 3 个生命周期钩子尚未在 React 钩子中实现。

1. getDerivedStateFromProps

如文档中所述， getDerivedStateFromProps 仅用于一个目的。它使组件能够根据 props 的变化更新其内部状态。

您可以使用useEffect和useState钩子实现相同的效果。useEffect 接受将导致 useEffect 重新运行的因变量数组作为第二个参数，因此您可以执行以下操作：

  const [state1, changeState1] = useState(props.prop1);

useEffect(() => {
    changeState1(props.prop1)
}, [props.prop1]);

2. 组件DidCatch

3. getDerivedStateFromError

这个钩子会捕捉子树中的错误，除了以下 ( docs )：

事件处理程序（了解更多） 异步代码（例如 setTimeout 或 requestAnimationFrame 回调） 服务器端渲染 在错误边界本身（而不是其子项）中抛出的错误