当我们能够熟练运用React进行前端开发时，不免会对React内部机制产生浓厚的兴趣。组件是什么？是真的DOM吗？生命周期函数的执行依据又是什么呢？ 本篇，我们先来研究React组件的实现与挂载。 上述代码写完后，我们就得到了<A />这个组件，那么我们接下来先弄清楚<A />…

通过写一篇react小册来查缺补漏。 使用ReactDOM.render,第一个参数传入JSX语法糖，第二个参数传入container,能简单实现在document上创建h1 dom节点。 所以ReactDOM.render的时候，看似引入的React没有用，但必须引入因为用到…

mountComponent 负责管理生命周期中的 getInitialState、componentWillMount、render 和 componentDidMount。 updateComponent 负责管理生命周期中的 componentWillReceivePro…

刀耕火种时期的前端，HTML描述页面结构，CSS描述样式，JavaScript描述功能。它们彼此是分离的。 然而这种方式却满足不了开发者对代码复用的需求。 近几年各大前端框架做了很多探索，其中组件化就是最璀璨的成果之一。 一个组件就是一个功能模块，所有的前端元素都封装在组件内部…

React除了是MVC框架，数据驱动页面的特点之外，核心的就是他很"快"。 按照普遍的说法："因为直接操作DOM会带来重绘、回流等，带来巨大的性能损耗而导致渲染慢等问题。React使用了虚拟DOM，每次状态更新，React比较虚拟DOM的差异之后，再更改变化的内容，最后统一由R…

作为前端小白中的一员，没接触过 React 高阶组件，首次看到这个名字时不明觉厉 😱，甚至有种“从入门到放弃”的想法。 然 🦢，通过深入学习后发现它实际上是一个概念十分简单，但却非常常用的东西。它的作用是能实现代码复用和逻辑抽象、对 state 和 props 进行抽象和操…

最近（2018-10-23）React官方发布了16.6版本，开放了一堆新的功能，而这其中的一些新功能，代表这未来的React开发方式，让我们来一起窥探未来吧。 做过code-splitting的同学能闻到熟悉的味道。以前我们要用第三方包或者自己处理异步过程，现在，React原…

我们会发现currentReducer 其实是一个function, 而且需要两个参数: currentState , action. currentReducer 返回的值赋值给currentState, 由createStore 传入参数的分析得知，preloadedSta…

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