黄腾霄的博客

今天和大家聊一聊React如何实现批量状态更新。引子我们知道React的setState方法并不是同步执行的。在React的生命周期中发生的多次setState的变更会进行合并，最终减少推送给浏览器的DOM变更次数，从而提升前端性能。那么这部分到底是怎么实现的呢？我们来看下Transaction在React执行点击事件或者生命周期函数时，会使用一个Transaction对象将整个执行过程包裹成一个事务。Transaction对象结构如下图所示<pre> *

今天来和大家聊React的渲染更新过程。React是JavaScript代码在聊渲染更新之前，我们不能忽视的一个概念是——React是JavaScript代码。我们都知道React传给浏览器的并不是一个HTML代码，而是一段js脚本。而在浏览器接收到js脚本之后，再执行并生成对应的html元素，插入到DOM中。这种做法提供了前端组件化的能力，能够让前端的同学不再“面向UI”进行操作。例如上面的例子，我们把一段原生的HTML元素封装成了一个Component组件。组件成了一个独立的模型概念，

今天来和大家聊一个有意思的flex布局问题。注：源码可以参考我在codepen做的demoflex问题来源问题是这样的，我有一个list，期望做成一个flex的wrap布局。每个item项有一个最小宽度，随着窗口的拉伸，item宽度会增加，并且占满容器空间。当窗口宽度增加到一定程度，会触发wrap的布局，每一行会多排列一个item。代码如下<div class="app-list"> <div class="app-block"></div>

今天来和大家解析下React-Router的源码。React-Router是React生态中最重要的组件之一。他提供了动态的前端路由功能，能让我们在前端应用实现，高效的SPA应用。那么这个东西是怎么实现的呢？我们来一起看下它的源码Router.jsconstructor(props) { super(props); this.state = { location: props.history.location }; // This is a bi