React class & function component 的区别

学习react之理解 React class & function component区别

本文参考自

https://www.cnblogs.com/chrissong/p/10445191.html

function component

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

class 语法的component

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

function和class component 的区别
1.syntax 语法：functional component语法更简单，只需要传入一个props参数，返回一个react片段。class component 要求先继承React.Component然后常见一个render方法，在render里面返回react片段。两者编译之后的代码不同
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。
function component更易于编写阅读和测试
代码量更少，上手容易
因为没有状态，可以更好的实现容器和表现的分离，可以只负责表现层的逻辑，不用考虑因为复杂的逻辑去改变状态从而带来的麻烦，有利于代码复用。
react团队提倡使用


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