随着React 中钩子的引入,现在的主要困惑是何时将函数组件与钩子和类组件一起使用,因为在钩子的帮助下state,lifecycle hooks甚至可以在函数组件中获得和部分使用。所以,我有以下问题
state
lifecycle hooks
例如,带有钩子的功能组件不能像类组件那样帮助性能。他们没有shouldComponentUpdate执行就不能跳过重新渲染。还有其他原因吗?
shouldComponentUpdate
提前致谢。
引入Hooks和其他特性(例如React.memo和React.lazy)的思想是帮助减少必须编写的代码,并将类似的动作聚合在一起。
Hooks
React.memo
React.lazy
文档中提到使用挂钩代替类的真正好理由
很难在组件之间重用状态逻辑 通常,当您使用HOC或renderProps时,当您尝试在DevTools中查看应用程序时,必须使用多个层次结构重新构建应用程序,Hooks避免了这种情况,并有助于更清晰的代码
复杂的组件变得很难理解, 常常使用类。互不相关的代码通常最终会在一起,或者相关的代码倾向于分离开来,因此变得越来越难以维护。这种情况的一个示例是事件侦听器,您可以在其中添加侦听器,componentDidMount然后在中将其删除componentWillUnmount。挂钩让您结合使用这两个
componentDidMount
componentWillUnmount
类 会使 人和机器混淆。 对于类,您需要了解绑定和调用函数的上下文,这常常会造成混乱。
带钩子的功能组件不能像类组件那样帮助性能。他们无法跳过重新渲染,因为他们没有实现shouldComponentUpdate。
可以React.PureComponent通过使用与类类似的方式来记住函数组件,React.memo并且可以将比较器函数作为第二个参数传递给React.memo它,以使您可以实现自定义比较器
React.PureComponent
这个想法是要能够编写代码,您可以使用React类组件和函数组件在Hooks其他工具的帮助下使用React类组件编写代码。挂钩可以覆盖类的所有用例,同时在提取,测试和重用代码方面提供更大的灵活性。
由于挂钩尚未完全交付,因此建议不要将挂钩用于关键组件,而应从相对较小的组件开始,是的,您可以将类完全替换为功能组件
但是,在Suspense用于数据提取之前,您仍然应该使用带钩子的功能组件来代替Class组件。使用useEffect挂钩获取数据并不像使用生命周期方法那样直观。
在@DanAbramov的一条推文中,他还提到钩子旨在与Suspense配合使用,直到可以更好地使用suspense为止。