使用钩子对函数组件和类组件进行反应

Question

随着React 中钩子的引入，现在的主要困惑是何时将函数组件与钩子和类组件一起使用，因为在钩子的帮助下state，lifecycle hooks甚至可以在函数组件中获得和部分使用。所以，我有以下问题

• 钩子的真正优点是什么？
• 何时使用带有钩子的函数组件和类组件？

例如，带有钩子的功能组件不能像类组件那样帮助性能。他们没有shouldComponentUpdate执行就不能跳过重新渲染。还有其他原因吗？

提前致谢。

Answer 1

引入Hooks和其他特性（例如React.memo和React.lazy）的思想是帮助减少必须编写的代码，并将类似的动作聚合在一起。

文档中提到使用挂钩代替类的真正好理由

很难在组件之间重用状态逻辑
通常，当您使用HOC或renderProps时，当您尝试在DevTools中查看应用程序时，必须使用多个层次结构重新构建应用程序，Hooks避免了这种情况，并有助于更清晰的代码

复杂的组件变得很难理解，
常常使用类。互不相关的代码通常最终会在一起，或者相关的代码倾向于分离开来，因此变得越来越难以维护。这种情况的一个示例是事件侦听器，您可以在其中添加侦听器，componentDidMount然后在中将其删除componentWillUnmount。挂钩让您结合使用这两个

类 会使 人和机器混淆。 对于类，您需要了解绑定和调用函数的上下文，这常常会造成混乱。

带钩子的功能组件不能像类组件那样帮助性能。他们无法跳过重新渲染，因为他们没有实现shouldComponentUpdate。

可以React.PureComponent通过使用与类类似的方式来记住函数组件，React.memo并且可以将比较器函数作为第二个参数传递给React.memo它，以使您可以实现自定义比较器

这个想法是要能够编写代码，您可以使用React类组件和函数组件在Hooks其他工具的帮助下使用React类组件编写代码。挂钩可以覆盖类的所有用例，同时在提取，测试和重用代码方面提供更大的灵活性。

由于挂钩尚未完全交付，因此建议不要将挂钩用于关键组件，而应从相对较小的组件开始，是的，您可以将类完全替换为功能组件

但是，在Suspense用于数据提取之前，您仍然应该使用带钩子的功能组件来代替Class组件。使用useEffect挂钩获取数据并不像使用生命周期方法那样直观。

在@DanAbramov的一条推文中，他还提到钩子旨在与Suspense配合使用，直到可以更好地使用suspense为止。