随着React应用程序复杂度的增长，components、state 、props的复杂性也变得越来越高。上个月，一些开发人员和我对于这个问题建立了解决方案。我们决定开发Chrome的插件React Scope，它提供了开发人员的React应用程序组件的分层树视图。 React…

Virtual DOM的概念相信大家都不会陌生，Vritual DOM是相对与DOM(文档对象模型)来说的，MDN上关于DOM的定义：“DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(met…

1. 目录 2. redux简介 redux是react全家桶的一员，它试图为 React 应用提供「可预测化的状态管理」机制。 3. 安装 4. redux核心 State的变化，会导致View的变化。但是，用户接触不到 State，只能接触到View 所以，State的变化…

context 是各种前后端框架中经常会用到的一个概念，著名 Node 框架 Koa 更是把 context 玩的尽兴。React 在很早之前就有 context 的概念，虽然是一个实验性质的 API，但 react-redux、react -router 等框架类库却把它玩了…

本文旨在总结常见的性能缺陷，以及如何来避免这些缺陷。 性能问题在web应用开发中不是什么新鲜事。 我们每个人都有这样的时刻，当你把一个新的Component组件放到你的app中，你会突然发现你尝试的每一个用户交互动作都与期望的效果有很明显的滞后。有时，你可以重复使用多个同样的组…

setState(updater, callback)这个方法是用来告诉react组件数据有更新，有可能需要重新渲染。它是异步的，react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能，所以这就给我们埋了一个坑： 那就是在使用setState改变状态之后，立刻通…

nginx 开启 gzip 后加载速度已明显提升。。。 基于 React 的超高仿豆瓣电影 PC 版，实现了 主页，电影页，人物页，排行榜，短评页，长评页，影讯&购票页，分类页，排行榜页，搜索页，404 页。 store vs. state 本项目有一个很大的（特）缺点就是所有…

其中涉及到 React 组件复用、轮子设计相关话题，并配合相关场景实例进行了分析。这些内容都算是 React 设计模式，一提到 Design Patterns，读者大可不必恐惧，事实上这都是 React 开发应用灵活性的体现。今天这篇文章，我们继续通过一个场景，循序渐进，通过一…

这不再是一个 实验性的 API，并且它更符合 工程化 的理念，目前它已成为 React 一级棒的 API。 React 中的 context API 相信大家都知道吧，可能跟大伙一样，当看到 React 的官方文档是这样时，都不敢直接使用它。 ⚠️ 注意，这里的改变包括 中断，…