使用 React 编写组件的各种方式之间有什么区别答案

【问题标题】：What is difference between the various ways of writing a component using React使用 React 编写组件的各种方式之间有什么区别
【发布时间】：2021-09-20 17:24:59
【问题描述】：

我在这里学习 React 并且时不时地，当我查看组件创建代码时，我会看到 4 种不同的语法，我想了解这 4 种之间是否有任何区别，我真的很想了解如果没有比另一个更好的，我至少想看看最常用的。这些是我经常看到的：

export const Home = () => {
}


export function Home() { 
}


function Home() {
}
export default Home;


const Home = () => { 
}
export default Home;

【问题讨论】：

嗯，函数组件有2种写法，function关键字和ES6箭头符号，还有2种导出方式，命名导出和默认导出。 Javascript 文档非常广泛地涵盖了这些内容。
明确地说，我认为您定义和导出组件的方式之间没有太大区别，这主要取决于您更喜欢的个人意见，或者您是否正在研究一个团队，以前被确立为编码标准。
还有一个使用类，叫做类组件。在您的示例代码中，几乎所有的功能组件都是相同的。只是声明时不同，使用函数或箭头函数，只导出或导出默认值。
类组件仍然有效，但是当 React 钩子最终释放并且函数组件可以具有状态和生命周期时......好吧，为什么还要继续使用类组件？自从我为工作编写类组件以来可能已经快 2 年了。
@EltonSantos 是的，功能组件更好。

标签： javascript reactjs function components arrow-functions

【解决方案1】：

React 中声明组件只有两种方式（函数和类组件），由于 this 的问题，react 团队建议使用函数式组件。

您分享了 4 种类型的函数组件，它们实际上是 ONE 类型（函数组件），但区别在于 JS 本身的函数语法。 JS有两种定义函数的方式：

function foo() {} //regular function.

const foo = () => {} // arrow ( fat ) function.

最后一个更可取，因为 JS 本身存在压倒性和令人困惑的 this 问题。你可以搜索了解这个l..但是我说的箭头功能是最可取的方式。

在你声明你的组件之后，你将 - 大部分 - 需要export.. 在Js中有两种导出方式（默认导出和命名导出）。

大多数情况下，您将使用 default 导出功能组件。所以我推荐你分享的第四个例子。

【讨论】：