useMemo和useCallback的用法和区别
介绍 和 是React中优化是常用的两个Hooks。它们有一些共同点，比如都需要传递一个依赖数组，只有当依赖项发生改变时才会更新数据。但是它们的使用场景一般不同，下面将具体分析两个Hooks的异同。 useMemo 的定义如下： 其中factory是工厂函数， Dependencies是其所有依赖值的数组。 在组件初始化的时候会调用factory函数，并将返回值存储起来。当组件需要重新渲染时，react会首先依次判断每个依赖项的值是否发...
一文读懂 react Fiber
React Fiber 产生的原因 要知道React Fiber产生的原因是什么，首先我们得知道 ，借用官网的话 React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。快速响应是关键。那么制约网页快速响应的因素有哪些呢? 一般来说影响网页快速响应的有以下两类场景： 发送网络请求后，由于需要等待数据返回才能进一步操作导致不能快速响应。 当遇到大计算量的操作或者设备性能不足使页面掉帧，导致卡顿。 这两类场景...
说说你对 React diff的理解？原理是什么？
跟 一致， 通过引入 的概念，极大地避免无效的 操作，使我们的页面的构建效率提到了极大的提升 而 算法就是更高效地通过对比新旧 来找出真正的 变化之处 传统diff算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)， 将算法进行一个优化，复杂度降为 ，两者效率差距如下图： <img width="657" height="401" src="../../ resources/640 wx fmt png wxfr...
plugin:react-jsx-runtime作用
正在为您搜索：plugin:react/jsx runtime的作用是提供JSX语法的运行时支持，使得React组件可以使用JSX语法来描述UI界面。 是 React 官方推荐的一种新的 JSX 转换方式。使用它可以帮助减小 JavaScript 文件的大小，优化 React 程序的运行性能。 在旧的 JSX 转换方式中（例如 Babel 和 TypeScript），我们需要使用 的语法来使 JSX 语法能够被正确识别和编译。这样会导致...
React React + TypeScript 默认 Props 的处理
React + TypeScript 默认 Props 的处理 通过组件的 属性可为其 Props 指定默认值。 以下示例来自 如果是用 框架搭建的项目会有 这个包，就可以这样写 加入 TypeScript 时不支持直接通过类访问 来赋值以设置默认属性，因为 类型上并没有该属性。
基于 Next.js 的 SSR和SSG 方案了解一下
Next.js 支持： 在服务端预渲染 静态页面生成和服务端渲染 有数据和无数据的静态生成 一些预定义的方法（生命周期函数）注入数据 6.1 预渲染 默认情况下，Next.js 预渲染每个页面。这意味着 Next.js 会提前为每个页面生成 HTML，预渲染可以带来更好的性能和SEO。 每个生成的 HTML 都与该页面 所需的最少 JavaScript 代码相关联。当浏览器加载页面时，其 JavaScript 代码会运行并使页面完全交互...
读懂React原理之调和与Fiber
一 引沿 Fiber 架构是React16中引入的新概念，目的就是解决大型 React 应用卡顿，React在遍历更新每一个节点的时候都不是用的真实DOM，都是采用虚拟DOM，所以可以理解成fiber就是React的虚拟DOM，更新Fiber的过程叫做调和，每一个fiber都可以作为一个执行单元来处理，所以每一个 fiber 可以根据自身的过期时间expirationTime，来判断是否还有空间时间执行更新，如果没有时间更新，就要把主动...
React，优雅的捕获异常
ErrorBoundary EerrorBoundary是16版本出来的，有人问那我的15版本呢，我不听我不听，反正我用16，当然15有 。 关于ErrorBoundary官网介绍比较详细，这个不是重点，重点是他能捕捉哪些异常。 子组件的渲染 生命周期函数 构造函数 开源世界就是好，早有大神封装了 这种优秀的库。 你只需要关心出现错误后需要关心什么，还以来个 , 完美。 遗憾的是，error boundaries并不会捕捉这些错误： 事...
三大原则 · Redux
三大原则 Redux 可以用这三个基本原则来描述： 单一数据源 整个应用的 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 中。 这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ，调试也变得非常容易。在开发中，你可以把应用的 state 保存在本地，从而加快开发速度。此外，受益于单一的 sta...