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

Question

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

export const Home = () => {
}


export function Home() { 
}


function Home() {
}
export default Home;


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

Answer 1

在React中只有两种方式声明一个组件（函数和class组件），React团队推荐使用函数式组件，因为this 问题。

你分享了 4 种类型的功能组件，它们实际上是一种类型（功能组件），但不同之处在于 JS 本身的功能语法。 JS有两种定义函数的方式如下：

function foo() {} //regular function.

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

最后一个更可取，因为 JS 本身的this 问题令人难以理解。你可以搜索了解这个 l.. 但是我说的箭头函数是最可取的方法。

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

大多数情况下，您将对功能组件使用默认导出。因此，我推荐您分享的示例中的第 4 个。

What is difference between the various ways of writing a component using React