前言：
在 React 中，有两种组件的写法。一种是函数组件，另一种是类组件。最近函数式组件越来越流行，这是为什么呢？本文将帮助你了解函数式组件和类式组件之间的区别，通过用示例代码来讲解每一种组件，让你可以深入到现代 React 的世界中去!

渲染JSX

首先，最明显区别是语法不同。函数组件只是一个普通的 JavaScript 函数，它可以返回 JSX。类组件是一个继承 React.Component 的 JavaScript 类，它有一个render函数。让我们来看看一个简单的例子。

import React from "react";
 //函数组件
const FunctionalComponent = () => {
 return <h1>Hello, world</h1>;
};

当定义一个类组件时，我们必须继承 React.Component。要渲染的 JSX 会在render方法里面返回。

import React, { Component } from "react";
//类组件
class ClassComponent extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

组件传参

现在让我们看看两种组件是如何接受参数的。假设我们要传入字符串参数 "MyName"。

<Component name="MyName" />

//函数组件传参
const FunctionalComponent = ({ name }) => {
 return <h1>Hello, {name}</h1>;
};

在一个函数组件里面，我们是把组件参数作为函数的参数来传递的。

class ClassComponent extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, { name }</h1>;
 }

对于类组件来说，我们需要 this 来引用这个参数。

处理state

众所周知，在 React 项目中，我们无法避免处理state变量。以前，处理state只能在类组件中进行，但从 React 16.8开始，引入了 React Hook useState，允许开发人员编写有state的函数组件。

在下面这个例子中，我们要做一个简单的计数器，从0开始，点击一次按钮就会将计数加1。

const FunctionalComponent = () => {
 const [count, setCount] = React.useState(0);

 return (
   <div>
     <p>count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Click</button>
   </div>
 );
};

要在函数组件中使用state变量，我们需要使用 useState Hook，它需要一个初始值。在本例中，我们从0点击开始，所以 count的初始值是0。

当然你可以有更多种类的初始值，包括null，字符串，甚至对象--任何 JavaScript 允许的类型。而在左侧，由于 useState 会返回当前的state和一个更新state的函数，所以我们是这样结构数组的。在这个例子中，我们将它们命名为count和setCount，以便于理解两者之间的联系。

class ClassComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }
}

在类组件中，处理state的方式有些不同。首先，我们需要了解 React.Component构造器(constructor)。下面是官方文档中的定义。

"React 组件的constructor在组件mount之前被调用。当使用 React.Component 子类的constructor时，你应该首先调用 super(props)。否则，this.props将在constructor中未定义，这可能会导致错误"。

基本上，如果不使用constructor并调用super(props)，你想使用的所有state变量都将未定义。所以我们先定义 constructor。在constructor里面，我们会声明一个state对象，有一个 key(count) 和 value(0)。而在 JSX 里面，我们使用 this.state.count 来访问我们在构造函数中定义的状态键的值，来显示计数。Setter 也差不多，只是语法不同。

另外，你也可以写一个 onClick 函数。记住，setState 函数的参数是state，如果需要的话，还需要props（可选）。

  this.setState((state) => {
    return { count: state.count + 1 };
  })
}

生命周期

最后，让我们来看看两种组件的生命周期。

On Mounting(componentDidMount)

生命周期函数 componentDidMount 在第一次渲染完成后就会被调用。过去有一个 componentWillMount 会在第一次渲染之前发生，但它将会在后续版本中删除，所以不建议在新项目中使用。

const FunctionalComponent = () => {
 React.useEffect(() => {
   console.log("Hello");
 }, []);
 return <h1>Hello, World</h1>;
};

在函数组件中，我们使用 useEffect hook 来替代componentDidMount。useState hook 的第二个参数通常是一个包含变化的state的数组，而 useEffect 将只在这些选定的state变化时被调用。但是当它是一个空数组时，比如这个例子，它将在挂载时被调用一次。这是对 componentDidMount 的完美替代。

class ClassComponent extends React.Component {
 componentDidMount() {
   console.log("Hello");
 }

 render() {
   return <h1>Hello, World</h1>;
 }
}

基本上类函数也是同样的原理：componentDidMount是一个生命周期函数，在第一次渲染后被调用一次。

On Unmounting(componentWillUnmount)

const FunctionalComponent = () => {
 React.useEffect(() => {
   return () => {
     console.log("Bye");
   };
 }, []);
 return <h1>Bye, World</h1>;
};

我们也可以使用 useState hook 进行unmount。但是要注意，语法有点不同。我们需要做的是在 useEffect 函数里面返回一个在unmount时运行的函数。当你需要清理 clearInterval 等函数时，这一点特别有用。使用 useEffect 的一个好处是，我们可以在同一个地方同时写挂载和卸载的函数。

class ClassComponent extends React.Component {
 componentWillUnmount() {
   console.log("Bye");
 }

 render() {
   return <h1>Bye, World</h1>;
 }
}

讨论

两种组件都有优点和缺点，但在可预见的未来，函数组件正在逐渐替代类组件。

在我们的例子中，函数组件语法更短、更简单，这使得它更容易开发、理解和测试。类组件也会因大量使用 this 而让人感到困惑。使用功能组件可以很容易地避免这种缺点，保持代码整洁。

还需要注意的是，React 团队正在支持更多的 React Hook，用于函数组件。此外，React 团队在早些时候提到，他们将通过避免不必要的检查和内存分配来对函数组件进行性能优化。但同时也承诺不会淘汰类组件。

同样，在 React 中，有很多种不同的代码风格。然而我更喜欢使用功能组件而不是类组件，原因就在上面列出的那些。我希望这篇文章能帮大家更熟悉这两种组件。

---

--阅读更多文章，请关注我的公众号：未定义变量