React 中被忽略的函数组件（Functional Components）

React中有两种组件：函数组件（Functional Components) 和类组件（Class Components）。据我观察，大部分同窗都习惯于用类组件，而不多会主动写函数组件，包括我本身也是这样。但实际上，在使用场景和功能实现上，这两类组件是有很大区别的。

来看一个函数组件的例子：

function Welcome = (props) => {
  const sayHi = () => {
    alert(`Hi ${props.name}`);
  }

  return (
      <div>
        <h1>Hello, {props.name}</h1>
        <button onClick ={sayHi}>Say Hi</button>
      </div>
  )
}

把上面的函数组件改写成类组件：

import React from 'react'

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.sayHi = this.sayHi.bind(this);
  }
  
  sayHi() {
    alert(`Hi ${this.props.name}`);
  }
  
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <button onClick ={this.sayHi}>Say Hi</button>
      </div>
    )
  } 
}

下面让咱们来分析一下两种实现的区别：

1. 第一眼直观的区别是，函数组件的代码量比类组件要少一些，因此函数组件比类组件更加简洁。千万不要小看这一点，对于咱们追求极致的程序员来讲，这依然是不可忽视的。
2. 函数组件看似只是一个返回值是DOM结构的函数，其实它的背后是无状态组件（Stateless Components）的思想。函数组件中，你没法使用State，也没法使用组件的生命周期方法，这就决定了函数组件都是展现性组件（Presentational Components），接收Props，渲染DOM，而不关注其余逻辑。
3. 函数组件中没有this。因此你不再须要考虑this带来的烦恼。而在类组件中，你依然要记得绑定this这个琐碎的事情。如示例中的sayHi。
4. 函数组件更容易理解。当你看到一个函数组件时，你就知道它的功能只是接收属性，渲染页面，它不执行与UI无关的逻辑处理，它只是一个纯函数。而不用在乎它返回的DOM结构有多复杂。
5. 性能。目前React仍是会把函数组件在内部转换成类组件，因此使用函数组件和使用类组件在性能上并没有大的差别。可是，React官方已承诺，将来将会优化函数组件的性能，由于函数组件不须要考虑组件状态和组件生命周期方法中的各类比较校验，因此有很大的性能提高空间。
6. 函数组件迫使你思考最佳实践。这是最重要的一点。组件的主要职责是UI渲染，理想状况下，全部的组件都是展现性组件，每一个页面都是由这些展现性组件组合而成。若是一个组件是函数组件，那么它固然知足这个要求。因此牢记函数组件的概念，可让你在写组件时，先思考这个组件应不该该是展现性组件。更多的展现性组件意味着更多的组件有更简洁的结构，更多的组件能被更好的复用。

因此，当你下次在动手写组件时，必定不要忽略了函数组件，应该尽量多地使用函数组件。

---

欢迎关注个人公众号：老干部的大前端，领取21本大前端精选书籍！