React 系列

在 Next.js 项目中，文件夹结构和代码组织遵循一定的约定和最佳实践。以下是常见的规范及代码存放位置的总结。

在 React + TypeScript 开发中，理解以下核心类型对编写类型安全的组件非常重要。代码不带红~

面试题：React 设计实现一个支持动态插槽的Layout组件。思路：提供一个 Context，维护插槽中注册的内容，并将其渲染到对应的位置。

React Hooks 中涉及到组件状态维护的 Hooks 包括 useState、useReducer。useState 是 useReducer 的简单语法糖。以下是源码和更新渲染调用链路分析

在React 函数组件中，每次渲染都会创建一个新的作用域，闭包会捕获当前作用域下的变量（包括 state）。当组件更新时，新的渲染会生成新的作用域和闭包，但旧的闭包导致事件回调函数拿到旧值引发逻辑错误

React 自定义 Hook 通过 闭包作用域 和 React Hooks 的调用规则 实现状态逻辑隔离。

在 React 中，Function Component 没有传统的生命周期方法，而是通过 Hooks 模拟和替代了 Class 组件的生命周期逻辑。

笔记：以下是React Class 组件的各阶段生命周期方法的执行顺序及核心作用。生命周期可分为 挂载（Mounting）、更新（Updating）、卸载（Unmounting） 三个阶段。

在使用 React 进行开发中，或多或少都使用过 Refs 进行 DOM 操作，又或使用 Refs 保存数据。不管怎么说 Refs 总是 React 提供的一大助力，这篇文章全面阐述了用法及核心要点。

日常开发中经常遇到需要跨组件共享状态，在React中我们经常借助 Mobox、Dva等进行复杂状态管理。但是对于大部分场景 状态提升和 context 都能cover住大部分状态共享的场景。

React 中组件 state 状态管理是组件设计中的难点之一，如何设计state的结构。遵循以下原则可以保障state更新不出现逻辑上的错误，也可以避免不必要的 state 维护。