react 类组件和函数组件区别

  1. 类组件需要使用this关键字来访问props和状态,而函数组件则可以直接访问这些值。
  2. 原来只有类组件可以使用的特性,比如状态和生命周期方法,现在函数组件通过Hooks也可以使用。
  3. 函数组件通常更简洁,更易于测试和理解。
  4. 类组件目前仍然支持一些尚未在函数组件中提供的特性,比如错误边界。

  1. 语法上:"函数组件是一个纯函数,它接收一个 props 对象返回一个 react 元素; 类组件需要去继承 React.Component 并且创建 render 函数返回 react 元素,虽然实现的效果相同,但需要更多的代码。"

类是组合寄生继承的语法糖,如果我们需要转译成 ES5 之前的代码,我们需要更多的预置代码,从而导致体积更大。

  1. 功能上:"之前,在使用场景上,如果存在需要使用生命周期的组件,那么主推类组件;设计模式上,如果需要继承,也是类组件。但现在由于 React hooks 的推出,生命周期概念的淡出,函数组件完全可以取代类组件。其次继承也不是组件最佳的设计模式,官方更推崇"组合优先于继承"的设计概念,所以类组件在这方面的优势也在淡出。"

  2. 类组件在未来事件切片与并发模式中,由于生命周期带来的复杂度,并不易于优化。而函数组件本身轻量简单,且在 Hooks 的基础上提供了比原先更细粒度的逻辑组织与复用,更能使用 React 的未来发展。

相关推荐
kyriewen15 分钟前
重排、重绘、合成:浏览器渲染的“三兄弟”,你惹不起也躲不过
前端·javascript·浏览器
NickJiangDev19 分钟前
Elpis-Core 技术解析:从零构建一个基于 Koa 的企业级 Node.js 框架内核
前端
我要让全世界知道我很低调20 分钟前
来聊聊 Codex 高效编程的正确姿势
前端·程序员
NickJiangDev22 分钟前
Elpis Webpack 工程化实战:Vue 多页应用的构建体系搭建
前端
米饭同学i22 分钟前
GitLab CI/CD + Vue 前端 完整方案
前端
yuki_uix25 分钟前
遇到前端题目,我现在会先问自己这四个问题
前端·面试
Wect25 分钟前
JS 手撕:对象创建、继承全解析
前端·javascript·面试
PeterMap30 分钟前
Vue.js全面解析:从入门到上手,前端新手的首选框架
前端·vue.js
3秒一个大31 分钟前
深入理解 JS 中的栈与堆:从内存模型到数据结构,再谈内存泄漏
前端·javascript·数据结构
Mr_Xuhhh40 分钟前
深入Java多线程进阶:从锁策略到并发工具全解析
前端·数据库·python