何时使用基于ES6类的React组件与功能性ES6 React组件？

在花了一些时间学习React之后，我理解了创建组件的两种主要模式之间的差异

我的问题是什么时候我应该使用哪一个，为什么？一种方法与另一种方法相比有哪些好处/利弊

ES6课程：

导入React，{Component}来自“React”；
导出类MyComponent扩展组件{
render（）{
返回(
&lt；div&gt；lt；/div&gt；
);
}
}

功能性：

常量MyComponent=（道具）=&gt；{
返回(
&lt；div&gt；lt；/div&gt；
);
}

我认为只要没有状态可以被那个组件操纵，它就是功能性的，但这是真的吗

我猜如果我使用任何生命周期方法，最好使用基于类的组件

你的想法是对的。如果你的组件只需要一些道具和渲染，那么就使用functional。您可以将这些函数视为纯函数，因为在相同的道具下，它们的渲染和行为总是相同的。而且，他们不关心生命周期方法，也不关心自己的内部状态

因为它们是轻量级的，所以将这些简单组件作为功能组件编写是相当标准的

如果您的组件需要更多功能，如保持状态，请改用类

更多信息：https://facebook.github.io/react/docs/reusable-components.html#es6-班级

编辑：在React钩子引入之前，上述内容大部分都是正确的

componentdiddupdate可以通过useffect（fn）进行复制，其中fn是重新提交时运行的函数
componentDidMount方法可以通过useffect（fn，[]）进行复制，其中fn是重新渲染时运行的函数，[]是组件将重新渲染的对象数组，如果且仅当自上次渲染以来至少有一个对象的值发生了更改。由于没有，所以在第一次装载时，useffect（）运行一次
state可以使用useState（）进行复制，其返回值可以分解为状态引用和可以设置状态的函数（即const[state，setState]=useState（initState））。举个例子可以更清楚地解释这一点：

常量计数器=（）=&gt；{
const[count，setCount]=useState（0）
常量增量=（）=&gt；{
设置计数（计数+1）；
}
返回(
&lt；div&gt；
&lt；p&gt；计数：{Count}&lt；/p&gt；
&lt；button onClick={increment}&gt；+&lt；/button&gt；
&lt；/div&gt；
)
}
默认导出计数器

作为一个小插曲，我听到很多人讨论了出于性能原因而不使用功能组件，特别是

&引用；事件处理函数根据功能组件中的每个渲染重新定义”

虽然是真的，但请考虑你的组件是否真的以这样的速度或体积渲染，这是值得关注的。

如果是，您可以使用useCallback和usemo钩子阻止重新定义函数。但是，请记住，这可能会使您的代码（从微观上）性能更差

但老实说，我从来没有听说过重新定义功能是React应用程序的瓶颈。过早的优化是万恶之源——当它成为一个问题时，请担心这一点

相关文章：

发表评论 取消回复

发表评论取消回复