Question

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

除了我已经发现的差异之外，该有状态函数组件和有状态类组件之间是否有任何区别？我的上述主张不正确吗？

要稍微完善一下这个问题，有什么类组件可以做的事，而带有钩子的功能组件是做不到的？

Answer 1

上钩之前：

有状态和无状态之间有明显的区别组件。
如果您希望组件中有一些组件，请使用write Class 状态，并在认为自己使用了功能组件 组件不需要任何状态。

钩后：

随着Hooks的引入，我们无需使用类就可以创建有状态组件。
我们可以使用函数来创建有状态组件。

有用的文章

正如Sung M. Kim所说，react挂钩中尚未实现3个生命周期挂钩。

getDerivedStateFromProps

如docs中所述，getDerivedStateFromProps存在于只有一个目的。它使组件能够更新其内部状态是道具变化的结果。

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

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

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

componentDidCatch
getDerivedStateFromError

此钩子在子树中捕获以下（docs）以外的错误：

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

Answer 2

函数和类之间有很多区别，它们在语法中显示出来。此外，组件类中的生命周期方法与组件函数中的钩子不同。但最重要的是，您不会因为使用功能组件而错过任何功能。实际上，带有钩子的功能组件现在是创建反应组件的默认方式。这里还有很多：

https://reactjs.org/docs/hooks-intro.html

反应：有状态的类组件和使用钩子的功能组件之间的区别？

2 个答案: