React class & function component 的区别

function和class component

首先看下function component：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

它就是一个函数接受一个props参数返回了一个jsx语法的标签，接下来看下class 语法的component

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

这两个component是等效的，但是我们应该怎么选择使用呢？

 

 

function和class component 的区别

1.syntax 语法：functional component语法更简单，只需要传入一个props参数，返回一个react片段。class component 要求先继承React.Component然后常见一个render方法，在render里面返回react片段。下面是两者被Babel编译过的代码

2.state 状态：因为function component 知识一个普通的函数所以不可以在其中用this.state , setState(),这也是它被叫做无状态组件的原因。所以一个组件需要用到状态的时候要用到class component。

 

3.lifecycle hooks 生命周期：function component 不具有生命周期，因为所有的生命周期钩子函数均来自于React.Component。所以当一个组件需要生命周期钩子的时候我们也需要class component。

 

为什么要用function component？

function component和class component 比起来缺少那么多功能为什么还要用function componet。

1. function component更易于编写阅读和测试
2. 代码量更少，上手容易
3. 因为没有状态，可以更好的实现容器和表现的分离，可以只负责表现层的逻辑，不用考虑因为复杂的逻辑去改变状态从而带来的麻烦，有利于代码复用。
4. react团队提倡使用

 

为什么要用class component？

1. 虽然function component 有很多好处，但是有些时候class component 还是不可替代的。
2. 当需要实现一些容器组件的时候，需要改变内部状态来实现自组件的改变的时候。
3. 当需要用到生命周期钩子函数实现一些功能的时候
4. 当我们需要提升性能时，性能是一个很重要的问题，有些时候我们需要减少组件的渲染次数，我们就需要在组件内部用shouldComponentUpdate 方法来去判断，或者继承React.PureComponent 类（自动调用shouldComponentUpdate）来实现state和props的浅比较进行判断组件是否重新渲染。

 

参考：Functional vs class components

           Functional vs Class-Components in React