一、前言 构建React项目一般分为脚手架构建的方式和webpack逐步构建的方式，本期就是对webpack一步一步构建项目进行逐步详细讲解。 二、新建文件夹并进入文件夹 三、初始化项目 此步骤会生成

React 里，组件是代码复用的基本单元，基于组合的组件复用机制相当优雅。而对于更细粒度的逻辑（状态逻辑、行为逻辑等），复用起来却不那么容易,所以我们是通过分析以下几种模式来解决我们状态逻辑复用问题 Mixin `倾向于增加更多状态`，这降低了应用的可预测性（`The more…

1. <></> 和 <Fragment></Fragment> 区别 前者是后者的语法糖，其实还不准确。二者还是有区别的，大家可关注公众号 **`JavaScript与编程艺术`**

一个页面在呈现给用户之前需要经过静态资源加载、后端接口请求和渲染这三个过程，我们要做的就是在各个过程中防御可能出现的异常情况，保持流畅的用户体验，同时还要应对来自外部的攻击。 在页面内容呈现给用户之前，会一直保持loading动画的效果，避免因网络原因造成用户体验的中断。 静态…

不管是在 Vue 还是在 React 中，都是通过 Props 向数据传递到子组件中，如果组件嵌套很深，就会有 Props 透传的问题。 在 Vue 中提供了 provide 和 inject 依赖注

context 是 React 提供的特性，可以实现任意层级组件之间的数据传递。 可能大家用过 context，但是不知道它是怎么实现的。 本文就从源码层面来讲下 cotnext 的原理，而且我们能从

useContext useContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。设计的目的就是解决组件树间数据传递的问题。 用法 参数 入参 context

React 15 以及之前的版本有一个主要的问题 —— 虚拟 DOM 的 diff 操作是同步完成的。 这就意味着当页面上有大量 DOM 节点时，diff 的时间可能过长，从而导致交互卡顿、没有反馈。

本文介绍了 Redux 在 React 中的使用，通过 Redux Toolkit 和 React-Redux 实现高效状态管理，利用一些方法简化组件连接和异步操作。