React组件5种方式

React 已逐渐成为我们在前端开发中想到的范式/技术。

body { color: red; }

然而，Javascript提供的语法的多样性使得在某些时候我们不明白为什么有些人以一种方式编写组件，而另一些人则以另一种方式编写组件。重要的是要记住：

• React 组件是一个函数，由于组合，它可以包含内部函数，包括新组件。
• Javascript 函数是对象，区别在于它们可以通过括号执行。

即使您仍在维护/编写类组件，这些组件也会作为 ES5 函数进行解释、转置和执行，因为这些类只是最近 EcmaScript 功能的语法糖。无论您是自己还是在团队中处理项目，定义语法来声明实用程序函数和 React 组件都有助于简化项目结构快速增长引起的疲劳。

下面，我将以按钮为例向您展示编写 React 组件的不同方法。

1.使用常规 function

// Button.jsx
function Button(props) {
    return <button>{props.children}</button>
}

// Button.tsx   
type ButtonProps = { children: React.ReactNode; };
function Button(props: ButtonProps) {
    return <button>{props.children}</button>
}

2.使用表达式 function

// Button.jsx
const Button = function (props) {
    return <button>{props.children}</button>
}
// Button.tsx   
type ButtonProps = { children: React.ReactNode; };
const Button = function (props: ButtonProps) {
    return <button>{props.children}</button>
}

3.使用箭头函数

// Button.jsx   
const Button = (props) => {
    return <button>{props.children}</button>
}
// Button.tsx   
type ButtonProps = { children: React.ReactNode; };
const Button = (props: ButtonProps) => {
    return <button>{props.children}</button>
}

4.使用明确的return

// Button.jsx   
let Button = (props) => <button>{props.children}</button>
// or   
const Button = (props) => <button>{props.children}</button>
// Button.tsx   
type ButtonProps = { children: React.ReactNode; };
let Button = (props: ButtonProps) => <button>{props.children}</button>

5.使用Class

// Button.jsx   
class Button extends React.Component {
    render() {
        return <button>{this.props.children}</button>
    }
}
// Button.tsx  
type ButtonProps = { children: React.ReactNode; };
class Button extends React.Component<ButtonProps> {
    render() {
        return <button>{this.props.children}</button>;
    }
}