乐趣区

关于前端:Day5react函数组件与类组件

jiezi

指标: 继续输入！每日分享对于 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 多平台公布

退出移动版