一个复杂的应用都是由简单的应用发展而来的, 随着越来越多的功能加入项目, 代码就会变得越来越难以控制. 本文章主要探讨在大型项目中如何对组件进行组织, 让项目具备可维护性. 1. 组件设计的基本原则 2. 基本技巧 3. 组件的分类 4. 目录划分 5. 模块 6. 拆分 7.…

从React Hooks发布以来，整个社区都以积极的态度去拥抱它、学习它。期间也涌现了很多关于React Hooks 源码解析的文章。本文（基于v16.8.6）就以笔者自己的角度来写一篇属于自己的文章吧。希望可以深入浅出、图文并茂的帮助大家对React Hooks的实现原理进行…

之前的文章React Mixins入门指南介绍了React Mixin的使用。在实际使用中React Mixin的作用还是非常强大的，能够使得我们在多个组件中共用相同的方法。但是工程中大量使用Mixin也会带来非常多的问题。Dan Abramov在文章Mixins Consid…

不愿清醒，宁愿一直沉迷放纵。 不知归路，宁愿一世无悔追逐。 --- 王小波 redux是的诞生是为了给 React 应用提供「可预测化的状态管理」机制。 提供subscribe，dispatch，getState这些方法。 按步骤手把手实战。 不就ok了吗？这就是 react-…

一个人并不是生来要给打败的，你尽可以把他消灭掉，可就是打不败他。 JSX中，可以使用花括号{}嵌入任意的JavaScript合法表达式，如：2 + 2、user.firstName、formatName(user)都是合法的。示例如： JSX本身也是一种表达式，所以它可以像其他…

从 React Hooks 正式发布到现在，我一直在项目使用它。但是，在使用 Hooks 的过程中，我也进入了一些误区，导致写出来的代码隐藏 bug 并且难以维护。这篇文章中，我会具体分析这些问题，并总结一些好的实践，以供大家参考。 如果使用单个 state 变量，每次更新 s…

1. 引言 工具型文章要跳读，而文学经典就要反复研读。如果说 React 0.14 版本带来的各种生命周期可以类比到工具型文章，那么 16.7 带来的 Hooks 就要像文学经典一样反复研读。 Hooks API 无论从简洁程度，还是使用深度角度来看，都大大优于之前生命周期的 …

上一章中介绍了 Functor(函子) 的概念，简单来说，就是把一个 “value” 填装进 “Box” 中，继而可以使用 map 方法映射变换 Box 中的值：Box(1).map(x => x+1)。本章我们在继续在 Box 的基础上继续扩展其他更强大的理念，从纯函数与副作…

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks 1. 类组件的不足 综上所述，如果不注意的话，很容易写成第三种写法，导致性能上有所损耗。 2. Hooks 优势 副作用的关注点…