摘要： 一、组件 (1) 函数组件 如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。 function Squ 阅读全文

摘要： React 组件性能优化最佳实践 React 组件性能优化的核心是减少渲染真实 DOM 节点的频率，减少 Virtual DOM 比对的频率。如果子组件未发生数据改变不渲染子组件。 组件卸载前进行清理操作 以下代码在组件挂载时会创建一个interval组件销毁后清除定时器，间隔1秒会触发渲染coun 阅读全文

摘要： 前言 近期完成了公司新项目的开发，相关的技术栈都用到了最新版本，react router 也使用了 v6 的版本，所以借这个机会自己再梳理下 react router v5 与 v6 的区别，以及 v6 一些新特性。而在原有项目还是使用老版本 react router 的情况下，不太建议急着直接升级 阅读全文

摘要： React Hook 新出现背景 类组件的问题 复用组件状态难，高阶组件+渲染属性 providers customers，等一堆工具都是为了解决这个问题，但是造成了很严重的理解成本和组件嵌套地狱 生命周期带来的负面影响，逻辑拆分严重 This 的指向问题 函数组件的局限 之前函数组件没有 stat 阅读全文

摘要： React Hooks 什么是 Hooks React 一直都提倡使用函数组件，但是有时候需要使用 state 或者其他一些功能时，只能使用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有。 Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 阅读全文

摘要： 本文是作者在实际工作经验中总结提炼出的错误使用 React 的一些方式，希望能够帮助你摆脱这些相同的错误。 1. Props 透传 props 透传是将单个 props 从父组件向下多层传递的做法。 理想状态下，props 不应该超过两层。 当我们选择多层传递时，会导致一些性能问题，这也让 Reac 阅读全文

摘要： react hooks 实现 Hooks 解决了什么问题 在 React 的设计哲学中，简单的来说可以用下面这条公式来表示： UI = f(data) 等号的左边时 UI 代表的最终画出来的界面；等号的右边是一个函数，也就是我们写的 React 相关的代码；data 就是数据，在 React 中，d 阅读全文

摘要： 抛砖引玉 React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，已使我们的页面的构建效率提到了极大的提升。但是如何高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处同样也决定着页面的性能，React用其特殊的diff算法解决这个问题。Virtual DOM+Re 阅读全文

摘要： 关键词：react react-scheduler scheduler 时间切片 任务调度 workLoop 背景 本文所有关于 React 源码的讨论，基于 React v17.0.2 版本。 文章背景 工作中一直有在用 React 相关的技术栈，但却一直没有花时间好好思考一下其底层的运行逻辑，碰 阅读全文

摘要： 目录 代码分割 React的懒加载 import() 原理 React.lazy 原理 Suspense 原理 参考 1.代码分割 （1）为什么要进行代码分割？ 现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来 阅读全文