Blog
Blog copied to clipboard
beichensky
经常写博客的地方，会时常记录一些学习笔记、技术博客或者踩坑历程。
本文已收录在 Github: https://github.com/beichensky/Blog 中，欢迎 Star，欢迎 Follow！ ## 前言 本文介绍了 React 18 版本中 `Suspense` 组件和新增 `SuspenseList` 组件的使用以及相关属性的用法。并且和 18 之前的版本做了对比，介绍了新特性的一些优势。 ## 一、回顾 Suspense 用法 早在 React 16 版本，就可以使用 `React.lazy` 配合 `Suspense` 来进行代码拆分，我们来回顾一下之前的用法。...
本文详细介绍了 TypeScript 高级类型的使用场景，对日常 TypeScript 的使用可以提供一些帮助。 ## 前言 本文已收录在 `Github`: https://github.com/beichensky/Blog 中，走过路过点个 Star 呗 ## 一、高级类型 ### 交叉类型(&) 交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。 - 语法：` T & U` > 其返回类型既要符合 `T` 类型也要符合 `U` 类型...
## 前言 在使用 `Vue3` 提供的 `watch API` 时 - 有时会遇到监听的数据变了，但是不触发 `watch` 的情况； - 有时修改数据会触发 `watch`，重新赋值无法触发； - 有时重新赋值能触发 `watch`，但是修改内部数据又不触发； - 再或者监听外部传入的数据时，是否和直接监听组件内部数据时的行为一致？ 面临这些问题，决心通过下面的应用场景一探究竟！避免重复踩坑，对应不同的问题，找到合适的解决方案。 **本文已收录在 Github: [github.com/beichensky/Blog](https://github.com/beichensky/Blog) 中，欢迎 Star，欢迎 Follow！** ## 一、Vue3 中响应式数据的两种类型...
## 前言 本文已收录在 `Github`: [https://github.com/beichensky/Blog](https://github.com/beichensky/Blog) 中，欢迎 Star！ **[Demo 地址](https://github.com/beichensky/Blog/blob/main/react-context-demo)** ## `Context` 的创建 `API: const MyContext = React.createContext(initialValue)` - `initialValue`：`context` 初始值 - 返回值 - `MyContext.Provider`: 提供者，是一个 `React` 组件，使用 `Provider ` 标签包裹后的组件，自身以及后代组件都可以访问到...
本文已收录在 `Github`: https://github.com/beichensky/Blog 中，欢迎 Star！ ## 常见问题 - 🐤 [useState 和 setState 有什么明显的区别?](#heading-3) - 🐤 [useState 和 useReducer 的初始值如果是个执行函数返回值，执行函数是否会多次执行？](#heading-4) - 🐤 [还原 useReducer 的初始值，为什么还原不回去了？](#heading-7) - 🐤 [useEffect 如何模拟 componentDidMount、componentUpdate、componentWillUnmount 生命周期？](#heading-8)...
## 前言 本文已收录在 Github: 中，欢迎 Star，欢迎 Follow！ 在 [React 18 新特性（一）：自动批量更新](https://github.com/beichensky/Blog/issues/14) 一文中提到：在 React 新版本中，更新会有优先级的顺序。 那如果希望更新时进行低优先级的处理，应该如何做呢，就是今天讲到的主题：**渐变更新**。 > 如果还不知道如何搭建 React18 的体验环境，可以先查看这篇文章：[使用 Vite 尝鲜 React 18](https://github.com/beichensky/Blog/issues/13) ## 一、startTransition：渐变更新 - `startTransition` 接受一个回调函数，可以将放入其中的 `setState` 更新推迟...
## 前言 本文已收录在 Github: [https://github.com/beichensky/Blog](https://github.com/beichensky/Blog) 中，欢迎 Star，欢迎 Follow！ ## 18 版本之前 ### 经典面试题：setState 是同步还是异步 在 `react 18` 版本之前，在面试中经常会出现这个问题，那么答案又是什么样的呢？ - 在 `React` 合成事件中是异步的 - 在 `hooks` 中是异步的 - 其他情况皆是同步的，例如：原生事件、`setTimeout`、`Promise` 等 看看下面这段代码的执行结果，就知道所言非虚了...
`React 18` 目前已经开放 `alpha` 版本可以供我们体验了，那为了更方便快捷的体验 `React 18` 新特性，我们今天使用 `Vite` 搭建一个简易版的 `React` 开发环境，帮助我们快速尝鲜。 ## 前言 本文已收录在 Github: [https://github.com/beichensky/Blog](https://github.com/beichensky/Blog) 中，欢迎 Star，欢迎 Follow！ ### 初始化项目 新建一个 `react-react18-demo` 文件作为我们的项目 ``` bash mkdir vite-react18-demo cd...
本文详细介绍了 Fiber 的思想以及代码实现过程。对于理解和入门 Fiber 架构有一定帮助。 不过仅限于模拟实现，更多细节仍需参考官方源码进行学习。 代码实现已经进行整理：**[源码地址](https://github.com/beichensky/Blog/tree/main/react-fiber-demo)** ## 前言 本文已收录在 Github: https://github.com/beichensky/Blog 中，欢迎 Star！ ### 渲染过程 `fiber` 渲染过程  之前的树形结构渲染过程：  ### `diff` 策略 - 同级比较，Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。如出现跨层级的移动操做，则直接将原...
## 前言 本文已收录在 `Github`: [https://github.com/beichensky/Blog](https://github.com/beichensky/Blog) 中，欢迎 Star！ ## Overview 本文共用 19 个例子，详细讲解了 React 基础入门知识，列举了相关 API 的使用方式，并且在每个 API 的说明中给出了详细的使用规则、建议以及注意事项。 对于不熟悉 React 的朋友，可以作为入门文档进行学习 对于已经掌握 React 的朋友，也可以作为 API 参考手册，用来查漏补缺 ## Index - [demo01：`jsx`...