React 系列 - 函数式组件和 class 组件

概念和用法

函数组件

接收 props 对象并返回一个 react 元素

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

class 组件

继承 React.Component 并且创建 render 函数返回 react 元素

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

区别

代码量

函数式组件更少

状态管理

函数组件也是无状态组件，不能使用 setState()。

React 16.8 之前如果需要在组件中使用 state

• 创建 class 组件
• 提升 state 至父组件中，通过 props 传递给子组件

但是 React 16.8 更新了 Hooks 之后，可以在函数组件中使用 useState 钩子去管理 state。

生命周期钩子

React 16.8 之前：不能在函数组件中使用生命周期钩子，原因和不能使用state一样，所有的生命周期钩子都来自于继承的React.Component中。

React 16.8 之后：可以使用useEffect钩子去使用生命周期函数。

性能

函数组件性能比类组件好，但是在现代浏览器中，闭包和类的原始性能只有在极端场景下才会有明显的差别。

渲染区别

Ref 下这篇 How Are Function Components Different from Classes?

总结和参考

按照 React 这两年的发展可以看出作者更加看重函数组件，而且 React 团队曾提及到在 React 之后的版本将会对函数组件的性能方面进行提升。

• 官方文档
• 函数组件和类组件的区别