五分钟，简单聊一聊React Component的发展历程

1、 前言

随着 react 最新的一个大版本中，给咱们带来了 Hooks：React v16.8: The One With Hooks，从而将 Function component 的能力提升了一大截，成功的拥有了能够与 Class component 抗衡的能力。但话说回来，虽然 Hooks 看起来很美好，最近也有很多文章都讲解了Hooks这一“黑魔法”，但技术的不断演进，自己就是一个解决以往所存在问题的过程，所以我我的认为着眼于如今，回望过去，去看一看 react component 的发展之路，去看看 Class component 以及 Function component 为何会出现以及它们出现的意义，所要解决的问题，也对于咱们全面了解 react 是颇有帮助的。

从 react component 的发展历程上来看，它主要是经历了一下三个阶段：

1. createClass Component
2. Class Component
3. Function Component

这个三个阶段也是react的组件不断走向轻量级的一个过程。其中 Class Component 彻底替代了 createClass Component 成为了如今咱们开发 react 组件的主流，而 Function Component 也在 Hooks 推出后磨刀霍霍，准备大干一场。下面就让咱们去看看三者的具体状况吧~

注：这篇文章总体只是对React Component的发展历程的一个归纳或者说是我本身学习后的一个整理，想要详细了解，还请看看我在文章贴的那些连接。

2、 createClass Component

说实话，createClass Component 我也没用过，由于我接触到 react 的时候已是2017年下半年了，那时候 ES6 已经大行其道，class component 也已经彻底取代了 createClass Component。但如今看来 createClass Component 的语法也很简单，并不复杂：

import React from 'react'

const MyComponent = React.createClass({
  // 经过proTypes对象和getDefaultProps()方法来设置和获取props
  propTypes: {
    name: React.PropTypes.string
  },
  getDefaultProps() {
    return {

    }
  },
  // 经过getInitialState()方法返回一个包含初始值的对象
  getInitialState(){ 
        return {
            sayHello: 'Hello Srtian'
        }
    }
  render() {
    return (
      <p></p>
    )
  }
})

export default MyComponent
复制代码

react.createClass的语法并不复杂，它经过 createClass 来建立一个组件，并经过propTypes和getDefaultProps来获取props，经过经过getInitialState()方法返回一个包含初始值的对象，虽然从如今看来仍是有点麻烦，但整体上来看代码也比较清晰，跟如今的 Class Component差异并非太大。但 react.createClass 自从 react 15.5版本就再也不为 react 官方所推介，而是想让你们的使用 class component 来代替它。并且在 react 16版本发布后，createClass 更是被废弃，当咱们使用它的时候，会提示报错，也就是说，在 react 团队看来 createClass 已经彻底没有存在的必要了。

其实 Class Component 彻底替代 React.createClass 并非说 React.createClass 有多坏，相反它还有一些 class Component 所没有的特性。它的废弃是因为ES6的出现，新增了 class 这一语法糖，让咱们在 JavaScript 的开发中能够直接使用 extends 来扩展咱们的对象，所以为了与标准的ES6接轨，原有的只在 react 中使用的 createClass 天然而然也成为了被抛弃的对象。但 class Component 在刚出现的时候也仍然存在的不小的争议，由于这二者仍是存在必定的差异的，好比当时在Stack Overflow便出现了关于这二者的讨论，感兴趣的朋友能够去看看：

stackoverflow.com/questions/3…

总的来讲，除了语法上存在差别外，Class Component 和 React.createClass 的区别主要是如下两点（详情能够看看上面的回答）：

• React.createClass 会正确绑定 this，而 React.Component 则不行，咱们须要在 constructor 里面使用 bind 或者直接使用箭头函数来绑定 this。
• React.Component 不能使用 React mixins 特性，这一方面咱们可使用高阶组件来弥补。

3、Class Component

Class Component建立的方式也很简单，就是普通的ES6的class的语法，经过extends来建立一个新的对象来建立react组件，下面是使用class Component建立一个组件的例子（因为为了给后面聊一聊hooks，因此在这里我使用了antd的例子）

class Modal extends React.Component {
  state = { visible: false }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div> <Button type="primary" onClick={this.showModal}> Open Modal </Button> <Modal title="Basic Modal" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} > <p>this is a modal</p> </Modal> </div>
    );
  }
}
复制代码

上面就是antd中一个简单的 modal 组件的例子，其内部就是经过维护 visible 的状态来控制这个 modal 是否显示。咱们能够看到，其中的一些方法都是使用箭头函数的方式来将 this 绑定到正确的属性。（具体为何要这么作，不清楚的朋友能够看看下面这篇文章：）

www.freecodecamp.org/news/this-i…

而相似于上面的这种组件，也是近两年来咱们在平常开发中使用最多的组件开发的方式。那为何到了如今，咱们又开始要强调使用 Function Component 来进行开发了呢？主要是因为 Class Component 所开发的组件仍然存在如下一些问题：

1. this 绑定的问题： 咱们前面也提到了，咱们在使用本来的 React.createClass 时并不须要去考虑this绑定的问题，而如今咱们却要时刻注意使用bind或者箭头函数来让this正确绑定，同时也让一些新上手react的同窗的上手成本有所提高。虽然这不是React的锅，但这方面的问题仍然客观存在。
2. 嵌套地狱： 这种状况则多发生于须要用到Context的场景下，在这种场景下，数据是同步的，由于须要通知更新全部有引用到数据的地方，所以咱们就须要经过render-props 的形式定义在Context.Consumer的children中，而使用到越多的Context 就会致使嵌套层级越多，这很容易让人看代码看的一脸懵逼。好比这样：

<FirstContext.Consumer>
  {first => (
    <SecondContext.Consumer>
      {second => (
        <ThirdContext.Consumer>
          {third => (
            <Component />
          )}
        </ThirdContext.Consumer>
      )}
    </SecondContext.Consumer>
  )}
</FirstContext.Consumer>
复制代码

3. Life-cycles 的问题：生命周期函数也是咱们在平常开发所常用到的东西。虽然生命周期函数用起来很方便，但一旦组件的逻辑变得复杂起来，这些生命周期函数也会变得难以理解和维护；同时如何让这些生命周期函数与react渲染有效结合也是一个不小的问题，这每每可能会让一些刚上手的人摸不着头脑。此外使用这些生命周期函数时也可能会出现一些预料以外的事情发生（好比在某些生命周期函数中进行数据请求，而致使组件被重复渲染屡次的问题等等，这些都是有可能发生的）

详细能够去看看知乎上的这个回答：www.zhihu.com/question/30…

4、Function Component

看到这里，你们对class Component所存在的一些问题也算是有一些了解了，但为何它还能横行如此之久，一直占据着主流的地位呢？其本质上就是由于没有竞争对手嘛，Function Component 长期没有内部状态管理机制，只能经过外部来管理状态，所以组件的可测试性很是的高，写起来也简洁明了，符合如今前端函数式的大潮流，是个好同志。但也正是由于没有状态管理机制，因此没法和Class Component相抗衡，毕竟一旦组件内部的逻辑变得复杂以后，内部的状态管理机制是必须的。

所以 React 团队基于 Function Component 提出 Hooks 的概念，用以解决 Function Component 的内部状态管理，同时也但愿经过 Hooks 来解决 Class Component 所存在的问题。下面就是使用 Hooks 针对 antd 中的 modal 进行的改写，你们能够自行感觉一下：

const Modal = () => {
  const [visible , changeVisible] = useState(false)
  return (
    <div> <Button type="primary" onClick={()=>changeVisible(true)}>open</Button> <Modal title="Basic Modal" visible={visible} onOk={()=>changeVisible(false)} onCancel={()=>changeVisible(false)} > <p>this is a modal</p> </Modal> </div>
  )
}
复制代码

咱们能够看到，基于 Function Component 与 Hooks 所编写出来的组件代码是至关简洁明了的，也直接避免了咱们上面所提到的 this 指向的问题。而对于上面所提到的嵌套地狱以及 Life-cycles 的问题，Hooks也提供了 useContext 和 useEffect（这个倒仍是存在一些问题） 来解决，在这里我也不详细说了，详情能够去看官方文档或者是 Dan 的博客：

overreacted.io/a-complete-…

好了，看到这里我想你们都觉得上面 Class Component 的问题都已经获得圆满解决了，Function Component好像已经圆满了，咱们只管放心的使用它就行了。但世界上哪有这么好的事情，Function Component 仍然存在着下面几个 tip 是咱们在使用前要知道的：

1. Function Component 与 Class Component 表现不一样，这块不清楚的能够直接去看Dan的文章，他对这方面作了很明白的阐述：

overreacted.io/how-are-fun…

2. 使用useState须要注意的是，它的执行顺序要在每次 render 时必须保持一致，不能够进判断和循环，必须写在最前面，关于这一点看视频：

www.youtube.com/watch?v=dpw…

3. Function Component 中，外部对与函数式组件的操做只能经过 props 来进行控制，不能经过函数式组件内部暴露方法来对组件进行操做。

参考资料：

• ultimatecourses.com/blog/react-…
• overreacted.io/how-are-fun…
• www.youtube.com/watch?v=dpw…
• overreacted.io/a-complete-…
• www.zhihu.com/question/30…
• stackoverflow.com/questions/3…
• taobaofed.org/blog/2018/1…
• www.freecodecamp.org/news/this-i…