浮沉半生的博客

本文详细介绍了 startTransition、useDeferredValue、useTransition 的用法和使用场景。讲述了低优先级更新的优缺点和启用方式。

本文介绍了 React 18 版本中 `Suspense` 组件和新增 `SuspenseList` 组件的使用以及相关属性的用法。并且和 18 之前的版本做了对比，介绍了新特性的一些优势。

本文介绍了 React 18 的自动批量更新特性，和之前版本的批量更新进行了对比。并且使用代码模拟了批量更新的不同实现思路。

React 18 目前已经开放 alpha 版本可以供我们体验了，那为了更方便快捷的体验 React 18 新特性，今天使用 Vite 搭建一个简易版的 React 开发环境，帮助我们快速尝鲜。

文章目录前言核心 API一、Provider二、connect 高阶函数三、useDispatch 获取 dispatch四、useSelector 获取需要的 state 值写在后面前言上一篇文章 React 中使用 Redux 的正确方法 详细讲解了 redux 以及 react-redux 的使用。这篇文章我们按照上一篇的节奏，实现一下 react-redux 的核心代码。本文已收录在 Github: https://github.com/beichensky/Blog 中，欢迎 Star！

本文详细介绍了 react-redux 的用法，以及在各种场景下不同 API 的使用方式和区别。

React Hooks 常见问题及解决方案常见问题???? useState 和 setState 有什么明显的区别????? useState 和 useReducer 的初始值如果是个执行函数返回值，执行函数是否会多次执行？???? 还原 useReducer 的初始值，为什么还原不回去了？???? useEffect 如何模拟 componentDidMount、componentUpdate、componentWillUnmount 生命周期？???? 如何在 use

本文详细介绍了如何从零开始搭建一个 React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。本文代码地址：react-mobx-starter。建议将代码拉下来之后，配合本文一起查看，效果更佳。代码下载命令：git clone https://github.com/beichensky/react-mobx-starter.git最近将脚手架中的 ...

本文简单介绍了一下如何在 create-react-app 中启用装饰器语法的两种方式。方式一：暴露 create-react-app 的配置暴露出 create-react-app 的所有配置运行命令：$ npm run eject项目中就会展示出各种配置文件。在 babel 中添加 plugins 配置在 package.json 文件中找到 babel 的配置，添加如下代码即...

本文详细讲解了 react-dnd 的 API 以及用法，并且附上了可供参考的 Demo，希望能够给需要的朋友提供一下帮助。一、概念React DnD 是一组 React 高阶组件，使用的时候只需要使用对应的 API 将目标组件进行包裹，即可实现拖动或接受拖动元素的功能。将拖动的事件转换成对象中对应状态的形式，不需要开发者自己判断拖动状态，只需要在传入的 spec 对象中各个状态属性中做对应...

本文对 16.8 版本之后 React 发布的新特性 Hooks 进行了详细讲解，并对一些常用的 Hooks 进行代码演示，希望可以对需要的朋友提供点帮助。一、Hooks 简介Hooks 是 React v16.7.0-alpha 中加入的新特性。它可以让你在 class 以外使用 state 和其他 React 特性。本文就是演示各种 Hooks API 的使用方式，对于内部的原理这里就...

本文教你实现一个最简单的 Redux 应用，以及结合 React 如何使用。Redux简介概念状态管理工具，使用之后可以清晰的知道应用里发生了什么。数据如何修改，如何更新的。出现的动机以前我刚接触 Redux 这类状态管理工具的时候就在想：为什么需要这些东西呢，刷新数据就消失了，也不能持久化存储数据，有啥用呢？后来慢慢的应用越做越多，功能越做越复杂，就会发现，很多数据什么原因修改的，...

本文主要介绍了在 Redux 中使用 redux-thunk 进行异步操作。如果对 Redux 尚不熟悉，建议先看我的上一篇博客：Redux 基础教程以及结合 React 使用方式。最下方贴上了 applyMiddleware 和 redux-thunk 的实现源码，有兴趣的同学可以看一看。只能用两个字来形容：优秀。在项目中引入安装插件$ npm install redux-thu...

本文介绍了如何在 Create React App 脚手架中使用 CSS Modules 的两种方式前提条件请先进行全局安装 create-react-app 插件哈，安装命令：npm install create-react-app -g先使用 create-react-app 命令下载一个脚手架工程，安装命令：# 使用 npx$ npx create-react-app my-...

本文简单介绍了在 Redux 使用 redux-devtools-extension 插件的用法，可以对状态变化进行可视化查看。本文例子源码源码地址欢迎 Star！欢迎 Watch！前提条件请先安装 redux：npm install redux -Sredux-devtools-extension 的使用用法非常简单，只需要三步，而且代码修改极少，跟着下面的提示进行操作即可...

本文介绍了如何在 Create React App 脚手架中启用 Sass 和 Less。前言关于创建 create-react-app 项目请查看： create-react-app 的安装与创建。关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules，请查看我的上一篇文章：在 Create React App 中使用 CSS Module...

本文详细介绍了 React 生命周期的用法以及各个阶段的生命周期进行，并且用实例代码做了详细演示。代码位置话不多说，先上图上图是基于 React 16.4 之后的生命周期图解。如感觉不对，请先查看 React 版本React 生命周期详解各个阶段的生命周期函数constructor 构造函数在 React 组件挂载之前被调用，实现 React.Component 的子类的构造...

本文简要介绍了 React 中 PureComponent 与 Component 的区别以及使用时需要注意的问题，并在后面附上了源码解析，希望对有疑惑的朋友提供一些帮助。前言先介绍一下 PureComponent，平时我们创建 React 组件一般是继承于 Component，而 PureComponent 相当于是一个更纯净的 Component，对更新前后的数据进行了一次浅比较。只有在...

本文详细介绍了如何使用 Create-React-App 编写 TypeScript + React 项目前言对于 TypeScript + React 开发，MicroSoft 编写了一个 TypeScript-React-Starter 的例子，Github 地址。有需要的朋友可以去看一下。我自己也看了一下，文档说明讲解的很好，但是 Demo 拉下来却无法正常运行，一直报错。所以我自己...

本文介绍了 immutability-helper 插件的基本使用，详细介绍了相关 API 的用法及注意事项。概念先理解一下 Immutable 的概念，Immutable数据就是一旦创建，就不能更改的数据。每当对Immutable对象进行修改的时候，就会返回一个新的Immutable对象，以此来保证数据的不可变。但是由于 Immutable 的 API 和用法学习起来比较困难，所以可以使用...