React | React组件化开发(二)

最新推荐文章于 2025-04-30 11:35:13 发布
最新推荐文章于 2025-04-30 11:35:13 发布
阅读量886 收藏
点赞数
分类专栏： 教你11天学会React 文章标签： react.js 前端 前端框架 javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderhing/article/details/130660737
版权

✨ 个人主页：CoderHing

🖥️ React .js专栏：React .js React组件化开发(二)
🙋‍♂️ 个人简介：一个不甘平庸的平凡人🍬

💫 系列专栏：吊打面试官系列  16天学会Vue  11天学会React  Node专栏

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力！❤️

❤️ 本文约 6470 字，预计阅读需要 20 分钟 ❤️

目录

一、React性能优化SCU

React更新机制

React更新流程

keys的优化

render函数被调用

shouldComponentUpdate

PureComponent

shallowEqual方法

高阶组件memo

不可变数据的力量

二、获取DOM方式refs

如何使用ref

ref的类型

三、受控和非受控组件

认识受控组件

受控组件的基本演练

受控组件的其他演练

非受控组件(不推荐使用)

四、React的高阶组件

认识高阶函数(Hooks后用的较少)

高阶组件的定义

开发中:应用一:props的加强

开发中:应用二:渲染判断鉴权

开发中:应用三:生命周期劫持

高阶函数的意义

ref的转发

五、portals和fragment

portals的使用

fragment(片段)的使用

六、StrictMode严格模式

StrictMode

严格模式检查的是什么？

一、React性能优化SCU

React更新机制

  • React渲染流程:

    • 在render函数中返回一个jsx

    • jsx创建出来对应的React.createElement

    • 这些element最终会形成一个树结构(对应的话就是虚拟DOM)

    • 最后React会根据虚拟DOM去渲染出来一个真实DOM

  • React更新流程:

    • 当前props/state发生改变

    • render函数重新执行

    • 之后产生一棵新的DOM树(新的树结构)

    • 在新旧树结构中进行diff算法来对比差异

    • 之后计算出差异的点进行一系列的更新

    • 最后把需要更新的地方更新到真实的DOM中

React更新流程

  • React在props或state发生改变时,会调用React的render方法,会创建出一棵不同的树.

  • React需要基于这两棵不同的树之间的差异来判断如何有效的更新UI:

    • 如果一棵树参考另外一棵树进行完全比较更新,那么即使是最先进的算法(算法的复杂程度为O(n²)),其中n是树中元素的数量

    • 如果React中使用了该算法,那么展示1000个元素所需要执行的计算量将在亿的量级范围内.

    • 这个开销很大,那么React更新性能将会变得十分低效.

  • React对这个算法进行了优化,将其优化成了O(n),如何优化的呢?

    • 同层节点之间相互比较,不会跨节点比较

    • 不同类型的节点,产生不同的树结构

    • 开发中,可以通过key来指定哪些节点在不同的渲染下保持稳定.

keys的优化

  • 我们在之前遍历列表时,总是会提示一个警告,让我们加入一个key属性:

  • 方式一:在最后位置插入数据

    • 这种情况有没有key其实意义并不是很大

  • 方式二:在前面插入数据

    • 这种情况在没有key的情况下,所有的li都会进行修改

  • 当子元素(li)拥有key时,React使用key来匹配原有树上的子元素以及最新树上的子元素

    • 在这种场景下,key为111和222的元素仅仅进行了位移,不需要进行任何的修改

    • 将key为333的元素插入到最前面的位置即可

  • key的注意事项

    • key应该是唯一的

    • key不要使用随机数(随机数会在下一次render时,重新生成一个新数)

    • 使用index作为key,对性能是没有优化的

render函数被调用

  • 嵌套案例:

    • 在App中,我们增加了一个计数器的代码

    • 当点击+1时,hUI重新调用App的render函数

    • 而当App的render函数被调用时,所有的子组件的render函数都会被重新调用

  • 那么,在之后的开发中,我们只是修改了App中的数据,是,所有的组件都需要重新render,进行diff算法,性能肯定非常低:

    • 事实上,很多的组件是没有必要去重新render的

    • 它们调用render应该有一个前提,就是依赖的数据(state,porps)发生改变,再去调用render方法;

  • 那么怎么来控制render方法是否被调用?

    • 通过shouldComponentUpdate方法即可

shouldComponentUpdate

  • React提供了一个生命周期方法 shouldComponentUpdate(简称:SCU)这个方法接收参数,并且需要有返回值:

  • 该方法有两个参数:

    • nextProps => 修改之后,新的props属性

    • nextState => 修改之后,新的state属性

  • 该方法返回值是一个boolean类型:

    • 返回值为true时,就需要调用render方法

    • false则不需要调用

    • 默认返回是true,也就是只要state/props发生改变,就会调用

  • 比如我们在App中增加一个message属性:

    • jsx中并没有依赖message,那么她的改变不应该引起重新渲染

    • 但是因为render监听到了state中的改变,就会重新render,所以最后render方法还是被调用了.

PureComponent

  • 如果所有的类都需要手动去实现 shouldComponentUpdate,那么会给开发带来很多的重复工作量

    • 我们设想一下shouldComponentUpdate中的各种判断目的是什么?

    • props/state中的数据是否发生了改变,来决定shouldComponentUpdate返回true/false

  • 事实上React已经考虑到了这一点,所以React已经默认帮我们实现好了,那么如何实现的？

    • 将class继承自PureComponent

最低0.47元/天 解锁文章
React | React组件化开发
CoderHing的博客~
04-30 1136
目录一、React组件化开发什么是组件化开发?React的组件化类组件render函数的返回值函数组件二、React组件生命周期认识生命周期生命周期解析生命周期函数不常用的生命周期三、React组件间的通信认识组件的嵌套认识组件间的通信父组件传递子组件参数propTypes子组件传递父组件四、React组件插槽用法React中的插槽(slot)children实现插槽props实现插槽五、React非父子的通信Context应用场景Context相关API六、setState的使用详解为什么使用setSta
react-plugin-demo:React插件化开发系统Demo
05-06
<<<<<<< HEAD该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 而是将所有配置文件和传递依赖项（Webpack，Ba
react组件化开发详解
zzx262625的博客
08-14 1938
React是一个流行的JavaScript库，用于构建用户界面，并且以组件化的方式进行开发。
react-11使用vscode开发react相关扩展插件（相关的快捷生成）
最新发布
岂不闻
04-30 656
vscode开发react相关扩展插件（相关的快捷生成）
react开发插件，基于vscode
Nani233的博客
09-10 519
原文地址：https://github.com/xieqingtian/blog/issues/2 由于本人主要是做react开发，用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记录并推荐一些本人开发过程中常用的一些vscode插件帮助开发。 1. 代码提示类插件 1.1Reactjs code snippets 1.2React Redux ES6 Snippets 1.3React-Native/React/Redux snippets for es6...
React 的 PureComponent 与 Component
MichaelAn的博客
02-13 388
React 的 PureComponent 与 Component 1、官方文档解释 在 React 中，Component 和 PureComponent 有一些区别，官方的解释如下： React.Component is the base class for React components when they...
使用react开发chrome插件
weixin_41897680的博客
11-17 4651
使用react开发谷歌插件
前端开发中的React：深度解析组件化开发与虚拟DOM的技术原理及应用场景
02-25
它主要用于构建用户界面，重点解释了其组件化开发模式和虚拟 DOM 技术，强调这两方面如何显著提升前端开发效率和页面性能。文中还探讨了 React 在单页应用 (SPA) 和移动应用开发中的具体应用实例及其带来的优异性能...
React框架搭建与组件化开发基础教程
04-09
React框架搭建与组件化开发是目前前端开发领域中的重要技术之一。React由Facebook推出，其核心概念是虚拟DOM和组件化，它极大地提高了Web应用的开发效率和性能。本教程将重点介绍如何从零开始搭建React开发环境，...
React组件化开发初试共20页.pdf.zip
11-22
React组件化开发是现代Web应用开发中的核心概念，尤其在构建大型、复杂用户界面时，它的价值不言而喻。本资料"React组件化开发初试共20页.pdf.zip"将带你初步探索React组件化的魅力，理解其原理并学会实际运用。 ...
react开发插件-ES7 React/Redux/GraphQL/React-Native snippets
范德萨的博客
12-27 1600
ES7 React/Redux/GraphQL/React-Native snippets插件快捷键的使用和效果
Idea React 模板插件
01-18
在Idea上进行安装的React模板插件. 可以使Idea自动支持React, 包括自动显示React语法.
使用React/Vue开发Chrome 插件
frontend_frank的博客
12-19 1334
本文代码：https://github.com/nyqykk/hello-extensions-react阅读本文你将了解到Chrome 插件整体架构；如何开发一个 Chrome 插件（Popup 和 Devtools）；如何使用前端框架（React/Vue）进行开发；如何调试插件；如何使用 Puppeteer 对插件进行 E2E 测试（本地和 CI 环境）。整体架构介绍明确概念Chrome 插件...
前端组件化
hualala_32的博客
12-21 5782
组件化 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fEVcmrj4-1608518366216)(https://cdn.nlark.com/yuque/0/2020/jpeg/190488/1607957386777-7eb32b74-97da-4f84-b596-ec9fbfe31b57.jpeg)] 什么是组件化？ 前端组件化开发，就是将页面的某一部分独立出来，将这一部分的数据层（M）、视图层（V）和控制层（C）用黑盒的形式全部封装到一个组件内，暴露出一些开箱即用
React PureComponent 浅比较详解
huangpb的博客
03-04 2825
为什么用PureComponent？ PureComponent是优化React应用程序最重要的方法之一，易于实施，只要把继承类从Component换成PureComponent即可，可以减少不必要的render操作的次数，从而提高性能，而且可以少写shouldComponentUpdate函数，节省了点代码。 原理 当组件更新时，如果组件的props和s...
PureComponent和Component的区别
Jane_96的博客
08-13 908
PureComponent和component相比，PureComponent通过prop和state的浅比较来实现shouldComponentUpdate，在某些情况下，用PureComponent可以提高页面的渲染性能。 // shallowEqual 会比较 Object.keys(state | props) 的长度是否一致，每一个 key 是否两者都有， // 并且是否是一个引用，也就...
前端性能优化1
baidu_27448251的博客
07-07 145
1. 使用Fragment 2. pureComponent 2.1 重复渲染 浅比较 class PureComponent extends Component { shouldComponentUpdate(newProps) { return !shallowEqual(this.props, newProps); // 浅比较 } } function shallowEqual(obj1,obj2) { if (obj1 === obj2) {...
react如何省略号_react 踩坑记
weixin_39989941的博客
12-22 547
预览权限不能编辑项目中是个图，如果控制里面的节点很麻烦，那么久想办法遮罩，最简单的方式就是使用伪类，但是伪类用js是不好控制的，那么就多加减class去处理className={classnames(`${this.prefix}main-section-wrapper`, {withafter: !editable})}>{this.renderMainSection()}css&...
React.memo的使用场景及原理
attengtiong的博客
02-25 2371
memo的原理 语法：React.memo(组件); 使用场景：当父组件重新渲染，没必要重新渲染的子组件可以使用memo包起来。 function Child(props){ console.log('Child'); return ( <button>Child</button> ) } // memo：如果你想让一个函数组件有一个功能，如果属性不变，就不要刷新。 Child=React.memo(Child); function App() { let
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderHing[专注前端]

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值