腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

采云轩

专栏作者

241

文章

298890

阅读量

29

订阅数

浅析 5 种 React 组件设计模式

登录函数组件设计 react 表单

复合组件模式是一种通过将多个简单组件组合在一起创建更复杂组件的方法。这种模式使得组件的逻辑分离，每个简单组件负责特定的功能。通过复合组件，可以轻松构建可复用的、功能完备的组件。

政采云前端团队

2024-01-11

1830

react-grid-layout 之核心代码分析与实践

react grid layout 布局实践

React Grid Layout 是一个用于构建可拖拽、可调整大小和自适应的网格布局的 React 组件库。通过简单易用的API，在 React 项目中能够快速构建复杂网格布局，轻松地创建可交互的网格布局，适用于构建面向用户的仪表盘、拖拽式页面布局等应用，提供良好的交互体验。通常用于自定义搭建页面中，例如我们公司用到自定义搭建工作台系统等等

政采云前端团队

2023-10-16

6190

初识 Turbopack

webpack 打包缓存 javascript react

初识 Turbopack http://zoo.zhengcaiyun.cn/blog/article/turbopack

政采云前端团队

2023-02-27

2730

如何基于 WebComponents 封装 UI 组件库

vue.js html react https json

作为一名前端攻城狮，相信大家也都在关注着前端的一些新技术，近些年来前端组件化开发已为常态，我们经常把重用性高的模块抽离成一个个的组件，来达到复用的目的，这样减少了我们的维护成本，提高了开发的效率。但是都有一个缺点离不开框架本身，因为我们浏览器本身解析不了那些组件。那么有没有一种技术也可以达到这种效果呢？答案就是今天的主角 Web Components。

政采云前端团队

2022-08-30

1.3K0

使用这些配置规范并格式化你的代码

javascript https 网络安全 react 编程算法

在日常工作中，我们会接触形形色色的工程。如果工程使用的技术架构不同，可能会有对应不同的代码规范。而每个人的编码习惯是不一样的，也是难以短时间内改变的，这也是我们常常在开发一个新工程的时候，会遇到各种规范报错的原因。

政采云前端团队

2021-11-02

2.3K0

React Profiler 的使用

https 网络安全 react 渲染

👆 这是第 115 篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队关注我们吧～本文首发于政采云前端团队博客：React Profiler 的使用 https://zoo.team/article/use-of-react-profiler 📷 前言平时大家开发项目的时候，有时候会感觉项目卡顿，通常情况下可以及时做出整改，但也有时候不太容易找到引起卡顿的点，或者说不好发现潜在的性能问题，React Developer Tools 提供的 Profiler 可以直观的帮助大家找出 Rea

政采云前端团队

2021-09-29

2.7K1

React 中的一些 Router 必备知识点

react php https 网络安全

每次开发新页面的时候，都免不了要去设计一个新的 URL，也就是我们的路由。其实路由在设计的时候不仅仅是一个由几个简单词汇和斜杠分隔符组成的链接，偶尔也可以去考虑有没有更“优雅”的设计方式和技巧。而在这背后，路由和组件之间的协作关系是怎样的呢？于是我以 React 中的 Router 使用方法为例，整理了一些知识点小记和大家分享～

政采云前端团队

2021-08-12

2.8K0

H5 页面列表缓存方案

缓存 https 网络安全 react 编程算法

通常在页面开发中，我们是通过路由去管理不同的页面，常用的路由库也有很多，譬如：React-Router (https://react-guide.github.io/react-router-cn/)，Dva-router (https://dvajs.com/api/#dva-router)... 当我们切换路由时，没有被匹配到的 Component 也会被整体替换掉，原有的状态也丢失了。因此，当用户从详情页退回到列表页时，会重新加载列表页面组件，重新走一遍生命周期，获取的就是第一页的数据，从而回到了列表顶部，下面是常用的路由匹配代码段。

政采云前端团队

2021-04-08

1.4K0

前端异常的捕获与处理

react json javascript node.js

? 这是第 89 篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队关注我们吧～本文首发于政采云前端团队博客：前端异常的捕获与处理 https://www.zoo.team/arti

政采云前端团队

2021-03-16

3.3K0

结合 React 源码，五分钟带你掌握优先队列

react 数据结构编程算法 https 网络安全

? 这是第 85 篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队关注我们吧～本文首发于政采云前端团队博客：结合 React 源码，五分钟带你掌握优先队列 https://www.

政采云前端团队

2021-01-14

3500

前端工程师的自我修养：React Fiber 是如何实现更新过程可控的

react vue.js 编程算法

从 React 16 开始，React 采用了 Fiber 机制替代了原先基于原生执行栈递归遍历 VDOM 的方案，提高了页面渲染性能和用户体验。乍一听 Fiber 好像挺神秘，在原生执行栈都还没搞懂的情况下，又整出个 Fiber，还能不能愉快的写代码了。别慌，老铁！下面就来唠唠关于 Fiber 那点事儿。

政采云前端团队

2021-01-04

1.1K0

编写高质量可维护的代码：组件的抽象与粒度

react https 网络安全 vue.js

作为一名精致的前端猪猪女孩，也有那么点想让自己的代码同样看起来精致一点。所以在拿到新需求的 UI 设计稿时，经常会面临如下问题：如何拆解页面？如何划分组件才算是合理？好像用于组件拆分的 A 方案和 B 方案在当前业务场景下也都还算合理，那究竟要怎么选择？组件的抽象与粒度貌似是一个老生常谈的问题了～学习了很多前辈的文章，那么今天结合业务场景，也来讲下我的心得～

政采云前端团队

2020-12-15

1K0

“混合双打”之如何在 Class Components 中使用 React Hooks

react https 网络安全 node.js

React 在 v16.8.0 版本中推出了 Hook，作为纯函数组件的增强，给函数组件带来了状态、上下文等等；之前一篇关于 React Hooks 的文章介绍了如何使用一些官方钩子和如何自建钩子，如果想要了解这些内容的同学可以访问《看完这篇，你也能把 React Hooks 玩出花》。

政采云前端团队

2020-12-02

3.7K0

浅谈 React 中的 XSS 攻击

html 安全渲染 react http

前端一般会面临 XSS 这样的安全风险，但随着 React 等现代前端框架的流行，使我们在平时开发时不用太关注安全问题。以 React 为例，React 从设计层面上就具备了很好的防御 XSS 的能力。本文将以源码角度，看看 React 做了哪些事情来实现这种安全性的。

政采云前端团队

2020-09-24

2.5K0

编写高质量可维护的代码之优化逻辑判断

javascript https 网络安全编程算法 react

? 这是第 64 篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队关注我们吧～本文首发于政采云前端团队博客：编写高质量可维护的代码之优化逻辑判断 https://www.zoo.t

政采云前端团队

2020-08-12

1.1K0

如何拿到政采云 P6 Offer

vue.js 编程算法 react

下面是我的个人经历，我 16 年毕业于山大，毕业后就去了华为，一待就是三年，16 年到 18 年在运营商 BG 做前后端开发，因为当时华为的开发方式还是偏传统一些，前后端不分离的，19 年在消费者 BG 做前端业务设计和开发，所以总的来说前后端都有一些涉猎。

政采云前端团队

2020-07-24

2.7K0

这就是你日思夜想的 React 原生动态加载

react webpack javascript 打包 java

随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案，webpack 提供了符合 ECMAScript 提案 (https://github.com/tc39/proposal-dynamic-import) 的 import()语法 (https://www.webpackjs.com/api/module-methods#import-) ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webpack 提供的代码动态加载方案，在 webpack 2.x 中，require.ensure 已被 import 取代）。

政采云前端团队

2020-05-28

2.5K0

Antd Form 实现机制解析

数据结构小程序 react

首先我们先看一个简单的表单，收集并校验两个组件的值。只需要通过监听两个表单组件的 onChange 事件，获取表单项的 value，根据定义的校验规则对 value 进行检验，生成检验状态和检验信息，再通过 setState 驱动视图更新，展示组件的值以及校验信息即可。

政采云前端团队

2020-02-14

2.5K0

如何在 React 中优雅的写 CSS

react css https 网络安全 webpack

看目录结构清晰明了，由于“ CSS 文件分离 != CSS 作用域隔离”这样的机制，如果我们不通过一些工具或规范来解决 CSS 的作用域污染问题，会产生非预期的页面样式渲染结果。

政采云前端团队

2019-12-20

3.9K0

性能！！让你的 React 组件跑得再快一点

渲染 https 网络安全 react

React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数情况下，React 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，其很重要的一个方向，就是避免不必要的渲染（Render）。

政采云前端团队

2019-12-20

6100

点击加载更多

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态