本篇文章适合使用React一年左右的小伙伴阅读。我希望它可以作为一把开启React源码大门的钥匙。我将会从搭建环境开始, 一步一步带着大家完成一个简易的React框架。代码我将会托管到我的github上, 供大家在阅读的过程中作为参考。 为了更加直观的展示效果, 我们可以将打包…

应届生小A：在学校用React + antd做过后台管理系统，熟悉React技术栈。 两年前端小B：公司技术栈是React，都用了一年了，我React贼六。 五年前端老C：带团队把公司的粪坑项目用React重构了。React对我来说就跟呼吸一样容易。 小A、小B、老C：要不学学…

Refs 是 React 中很少会使用到的特性。如果你已经读过了官方的 React Ref Guide，你会从中了解到 Refs 被描述为重要的 React 数据流的 “逃生舱门”，需谨慎使用。Refs 被视为访问组件的基础 DOM 元素的正确方法。 新的 React Hook…

搭配了合适的设计模式的代码，才可拥有良好的可维护性，The Benefits of Orthogonal React Components 这篇文章就重点介绍了正交性原理。 所谓正交，即模块之间不会相互影响。想象一个音响的音量与换台按钮间如果不是正交关系，控制音量同时可能影响换…

React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数情况下，React 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，其很重要的一个方向，就是避免…

接下来将一步步带领大家实现一个基本的modal弹窗组件，封装一个简单的动画组件，其中涉及到的一些知识点也会在代码中予以注释讲解。 一. modal组件的实现； 1. 环境搭建 2. modal样式完善 3. modal功能开发 3.1. 添加visible字段控制显隐 3.2.…

下拉列表组件Select可以是前端使用频率最高的UI组件之一。正因此，原生HTML也存在这一标签。但由于对UI的较高追求及统一规范，我们往往不会去使用即不好看又不统一的原生Select标签，而是自己实现。能够写出一个“多数场景下能用”的Select组件，并没有什么难度。直到遇到…

写在前面 以前写Vue写惯了，心血来潮，写起了React。并根据Vue官网文档的语法顺序，写了对应的React的语法，并附一个教程demo。 教程的github地址：Close2React 项目使用框架版本主要有 react(15.4.1) + react-dom(15.4.1…

深拷贝的话题好像从来没有停止过讨论，JavaScript并没有一个可以实现深拷贝的方法，我们常见的实现方式是递归和JSON.parse(JSON.stringify())（听说底层还是用了递归），然而一般库函数也只能处理常见的需求（不常见的需求真的存在吗？真的需要用深拷贝吗？真…