一. redux的实现 在一切开始之前，我们首先要回答一个问题：为什么我们需要redux，redux为我们解决了什么问题？只有回答了这个问题，我们才能把握redux的设计思路。 React作为一个组件化开发框架，组件之间存在大量通信，有时这些通信跨越多个组件，或者多个组件之间共…

Context被翻译为上下文，在编程领域，这是一个经常会接触到的概念，React中也有。 在React的官方文档中，Context被归类为高级部分(Advanced)，属于React的高级API，但官方并不建议在稳定版的App中使用Context。 不过，这并非意味着我们不需要…

如果你是一位有抱负的前端程序员并准备面试，那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。 JavaScript 工具缓慢而稳定地在市场中扎根，对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性。其中 React 被认…

之前如果我们需要抽离一些重复的逻辑，就会选择 HOC 或者 render props 的方式。但是通过这样的方式去实现组件，你打开 React DevTools 就会发现组件被各种其他组件包裹在里面。这种方式首先提高了 debug 的难度，并且也很难实现共享状态。 但是通过 H…

前端开发的一个特点是更多的会涉及用户界面，当开发规模达到一定程度时，几乎注定了其复杂度会成倍的增长。 无论是在代码的初始搭建过程中，还是之后难以避免的重构和修正bug过程中，常常会陷入逻辑难以梳理、无法掌握全局关联的境地。 而单元测试作为一种“提纲挈领、保驾护航”的基础手段，为…

本文依次介绍 组件、JSX、Virtual DOM、Flux架构、Redux、react-redux和性能优化。 1. 组件 组件是React的基石，所有的React应用程序都是基于组件的。 用这种方式，就实现了一个React的组件，在其他的组件中，可以像HTML标签一样引用它…

我 fork 了一份 16.8.6 版本的代码，并且会为读过的代码加上详细的中文注释。等不及我文章的同学可以先行阅读 我的仓库，并且在阅读本系列文章的时候也请跟着阅读我注释的代码。因为版本不同可能会导致代码不同，并且我不会在文章中贴上大段的代码，只会对部分代码做更详细的解释，其…

这个需要大家对diff算法有所了解，如果从 render 返回的组件等同于之前render函数返回的组件，React将会迭代地通过diff算法更新子树到新的子树。如果不相等，则先前的子树将会完全卸载。 高阶组件可以把所有属性传递给被包裹组件，但是ref除外，因为ref不是一个真…

前端发展速度非常之快，页面和组件变得越来越复杂，如何更好的实现状态逻辑复用一直都是应用程序中重要的一部分，这直接关系着应用程序的质量以及维护的难易程度。 本文介绍了React采用的三种实现状态逻辑复用的技术，并分析了他们的实现原理、使用方法、实际应用以及如何选择使用他们。 Mi…