reactjs - react : Difference between a Stateful Class Component and a Function Component using Hooks?

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

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

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

最佳答案

上钩之前:

有状态和无状态之间有明显的区别
组件。

当你希望你的组件有一些时，你可以使用 write Classes
状态，当你认为你的时候使用 函数组件
组件不需要任何状态。

Hook 后:

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

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

有用的文章

Article 1

Article 2

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

getDerivedStateFromProps

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

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

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

componentDidCatch

getDerivedStateFromError

除了以下 ( docs ) 之外，这个钩子(Hook)会捕获子树中的错误:

关于reactjs - react : Difference between a Stateful Class Component and a Function Component using Hooks?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57642594/