本文转载自：https://mp.weixin.qq.com/s/xvAJtv1RyOq7rBwaq_tm0Q 1. 使用 JSX 简写尽量对布尔变量使用 JSX 简写。假设你想控制一个导航栏组件的标题可见性。「不好的:」 123retur

今天来看看在使用 React hooks 时的一些坑，以及如何避开这些坑。 问题概览： 不要改变 hooks 的调用顺序； 不要使用旧的状态； 不要创建旧的闭包； 不要忘记清理副作用； 不要在不需要重新渲染时使用 useState；

1. 导入依赖项我们需要在组件文件顶部导入组件所需的依赖项，通常是使用 import 来进行导入。对于不同类别的依赖项，建议对它们进行分组，这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类： 12345678910111213

下面来分享在 React 开发中常见的一些错误，以及如何避免这些错误。理解这些问题背后的细节，防止犯下类似的错误。 1. 组件卸载后执行状态更新报错信息：Can’t perform a React state update on an

1. React 渲染流程在说 React 的渲染流程之前，先来看一个在渲染流程中绝对绕不开的概念——协调。 （1）协调协调，在 React 官方博客的原文中是 Reconciler，它的本意是“和解者，调解员”。那协调是怎么跟 R

在 React 设计模式中，最重要、也是最为大家所津津乐道的几个模式分别是：● 有状态组件与无状态组件● 高阶组件（HOC）● Render Props 这些形态各异的 React 设计模式虽然实现思路有所不同，但本质上基本都是为了实现

1. 纯函数所谓纯函数，它是这样一种函数：即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。 从纯函数的定义，可以提取出纯函数的必要条件：● 纯函数接受参数，基于参数计算，返回一个新对象；● 不会产生副作用，计算过程不会

在组件之间是存在嵌套关系的，如果我们将一个程序的所有逻辑都放在一个组件中。那么这个组件就会变得臃肿并且难以维护，所以组件化的思想就是对组件进行拆分，再将这些组件嵌套在一起，最终形成我们的应用程序。 比如，下面的组件就存在如下的关系：●

1. React 生命周期概览React 会把状态的变更更新到 UI，状态的变更过程必然会经历组件的生命周期。所谓的生命周期就是组件从创建到销毁的过程，它是一个很抽象的概念， React 通常将组件生命周期分为三个阶段：● 装载阶段（

1. 定义组件接口React 世界由组件构成，所以，如何设计组件的接口就成了组件设计最重要的事情。 （1）设计原则React 的组件其实就就是软件设计中的模块，所以其设计原则也遵从通用的组件设计原则，简单说来，就是要减少组件之间的耦