去年，我写了一本关于学习React.js的小书，原来是大约100页。 今年我要挑战自己，把它归纳为一篇文章。 本文不会涵盖什么是React，或者为什么要学习它。 相反，这是面向已经熟悉JavaScript并熟悉DOM API基础知识的人，对React.js的基础知识的介绍。 以…

距离第一篇《React源码解析(一)》已经过去将近4个月的时间，由于是我第一次进行源码解析相关的写作，思路和文笔还不够成熟。一百多天以来，我基于读者反馈反思这几篇文章中的不足，同时也在不断学习借鉴其他优秀作者的写作方法和写作思路。最终总结出对于自己的源码写作来说，需要改进的几点…

上回我们解释了什么是JSX，JSX是React中对Javascript语法的延伸，它允许我们使用JSX tag来构建一个虚拟DOM作为真实DOM的小型描述文档（它本身是一个Javascript对象）。 其中，一个JSX tag就是一个React Element。 我们说过JSX…

JSX是React中特有的东东，全称 Javascriptのxml。 看起来就是一个普通的html标签不是？嗯。。。慢着。。。看看做左边，我们将这个html标签赋给了一个js变量! 嘿，这就是JSX的功能了。我们说JSX的全称应该翻译为Javscriptのxml（Javscri…

分析：我们要实现一个数字滚动效果，保证每个位上的数字都至少滚动一周，滚动效果是自下往上。让我们先思考一下几个细节： 说一下我的思路历程吧，我一开始居然没想到用动画来实现，而是用setTimeout递归地插入每个位上的数字，写完之后才发现没有实现滚动。然后又search了一下滚动…

前言React高阶组件，即 Higher-Order Component，其官方解释是：A higher-order component is a function that takes a component and returns a new component.一个传入一个…

如果我们直接把整个列表渲染出来, 仅仅学生列表就会生成1000+个div标签. 这个时候的DOM数量就会变得难以想象. 我们都知道, DOM结构如果过大, 网页就会出现用户操作体验上的问题, 比如滚动, 点击等常用操作. 同时, 对react的虚拟DOM计算以及虚拟DOM反映到…

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

1. constructor ES6中每个类的构造函数，要创建一个组件的实例就要调用相应的构造函数。 但是并不是每个组件都要定义自己的构造函数，比如无状态的React组件。一个组件调用构造函数，往往是为了两个目的： 2. componentWillMount 3. render…