类组件的不足 状态逻辑难复用： 在组件之间复用状态逻辑很难，可能要用到 render props （渲染属性）或者 HOC（高阶组件），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（一般都是 div 元素），导致层级冗余。例如一个...

前言当升级到最新的 React 18 后，在分析测试代码时，常遇到组件渲染两次的情况。调试了很久，发现是React.StrictMode的问题； 当然，之后我去谷歌搜索时，发现早已有人注意到了这个行为，不过他们在 React 官方仓库上发起 issu...

添加项目页面状态提升按照项目的设计，在 Header ，项目列表以及编辑项目三处都会打开新增项目或者说是编辑项目的 Modal，这些组件都需要这个控制 Modal 的状态，常见的做法是使用状态提升，将其共同需要的状态提升至距离它们最近的父组件中，在项...

异步加载处理为了能够精准的控制和获取异步加载的状态，可以自定义一个处理的Hook，如下： 12345678910111213141516171819202122232425262728293031323334353637383940414243444...

项目创建使用 react-create-app初始化项目后： react-app-env.d用于引入预先定义好的类型 reportWebVitals.ts用于埋点上报； setupTests.ts用于配置单元测试，默认使用 testing-li...

什么是 HooksHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性； Hook 本质是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState...

setState() 详解更新数据是异步的123this.state = {count: 1}this.setState({count: this.state.count + 1})console.log(th...

CSS 过渡动画创建一个组件，包含一个按钮和文本，点击按钮实现，文本的显示和隐藏： 1234567891011121314151617181920212223class App extends React.Component{ click...

Redux 简介React 是一个 UI 视图层框架，并不是 Web 应用的完整解决方案。有两个方面没涉及： 代码结构 组件之间的通信 正因如此，仅靠 React 很难写大型应用，2014年 Facebook 提出了 Flux 架构（一种思想...

React 路由介绍前端路由就是一套映射规则，是URL路径与组件的对应关系，实现从一个页面到另一个页面的跳转； Router 组件使用 React Router API 中的两种类型的路由： BrowserRouter HashRouter 12...