深入React函数组件的re-render原理及优化

对于函数组件的 re-render 大致分为以下三种情况

• 组件本身使用 useState 或者 useReducer 更新,引起的 re-render
• 父组件的 props 引起的 re-render
• 组件本身使用了 useContext , context 更新引起的 re-render

下面详细讨论下这些情况

CRA(create-react-app) and craco 配置alias 亲测有效！！！

本文跳过，项目初步搭建过程，默认你已经有了 craco.config ，如果想要完整的项目教程，请跳转到 官方文档

直接上干货！

背景：

前提摘要：很多面试官都会问React中的 setState 到底异步还是同步？

那么他到底是同步还是异步呢？

setState的不同现象大致分为两种情况

• React 事件系统中的 合成事件 （例如: onClick , onChange ）和 React的生命周期中，它是’’异步’’的，注意我说的是带引号的异步。
• 在原生事件，或者 setTimeout 中(基于 event loop 模型) ，可以理解为setState是同步的，因为你能拿到最新的state。

背景:

一直以来对 登录 => 验证 => 权限 => 页面跳转 模糊不清

最近接手了一个CRA + craco 构建的一个后台管理系统，熟悉了两天，代码真的吃藕…

不行，所以决定重构，也简单整理了登录验证这块的大体思路。

正文开始

1.$0

在 Chrome 的 Elements 面板中，$0 是我选择的当前 html 节点的引用。

so ，$1 就是我们上一次选择的节点的引用，$2 是在 $1 之前选的节点的引用，