指标: 继续输入！每日分享对于web前端常见常识、面试题、性能优化、新技术等方面的内容。

次要面向群体：前端开发工程师（初、中、高级）、应届、转行、培训、自学等同学

Day4-今日话题

react函数组件和类组件的区别，将从以下七个角度介绍：

  1. 语法和定义
  2. 外部状态治理
  3. 生命周期
  4. 性能
  5. 可读性和维护性
  6. 上下文
  7. 集成状态治理库

1. 语法和定义：

函数式组件： 应用函数来定义，接管props作为参数，并返回一个React元素。

function FunctionalComponent(props) {  return <div>{props.message}</div>;}

类组件： 应用类来定义，继承自React.Component，应用render 办法返回React元素。

class ClassComponent extends React.Component {  render() {    return <div>{this.props.message}</div>;  }}

2. 外部状态治理：

函数式组件： 晚期函数式组件无奈本人治理状态。应用Hooks后，能够应用useState来在函数式组件外部治理状态。

类组件： 能够通过this.state来治理外部状态，能够在constructor中初始化状态，而后应用setState办法来更新状态。

3. 生命周期：

函数式组件： 晚期函数式组件没有生命周期办法。应用Hooks后，能够应用useEffect来模仿生命周期行为，如componentDidMount、
componentDidUpdate等。

类组件： 领有残缺的生命周期办法，包含componentDidMount、componentDidUpdate、componentWillUnmount等。

4. 性能：

函数式组件：通常比类组件性能更好，因为函数组件不须要创立类的实例，从而缩小了内存和性能开销。

类组件： 须要创立类的实例，可能会导致轻微的性能损失。

5. 可读性和维护性：

函数式组件： 通常更简洁，适宜用于无状态、纯UI渲染的状况，代码更易于了解和保护。

类组件： 可能会显得简短，因为须要定义类、构造函数和render办法，但在简单的场景中提供了更多的构造。

6. 上下文（Context）：

函数式组件： 能够通过useContext Hook来拜访上下文。

类组件： 能够通过this.context来拜访上下文。

7. 集成状态治理库：

函数式组件： 能够轻松地集成Redux或其余状态治理库，因为它们能够在任何中央应用Hooks。

类组件： 也能够集成Redux等库，但可能须要应用高阶组件（HOC）或应用connect办法。

下一篇文章将分享React相干的知识点，欢送点赞、关注、转发～

本文由mdnice多平台公布