1359302247831492_个人页

这就涉及到了state batch更新的问题。

先看看下面这个demo
var Example = React.createClass({
getInitialState: function() {
return {

value: 0,

};
},

handleClick: function(){

this.setState({value: this.state.value + 1});
console.log(this.state.value);
this.setState({value: this.state.value + 1});
console.log(this.state.value);

},

render: function(){
console.log(this.state.value);
return (

 <div className="parent">
   <button onClick={this.handleClick}>click me</button>
 </div>

);
}});

React.render(, document.body);

考虑这两个问题，当点击 button 时：1、 render 方法被调用了几次？2、 点击button后，handleClick 中2 次 setState 时 this.state.value 值是多少？render中的this.state.value又是多少？

知道结果后，你能解释为什么 render 方法只被调用了 1 次，且两次 setState 时 this.state.value 都是 0 么？

这一切，都要归功于 React 的 batchUpdate 设计，但是 batchUpdate 究竟是怎么实现的呢？让我们深入到 React 的源码中一探究竟。

我们从 DOM 事件触发开发对整个链路进行一下梳理：

当一次 DOM 事件触发后，ReactEventListener.dispatchEvent 方法会被调用，该方法监听页面时间并派发。而这个方法并不是急着去调用我们在 JSX 中指定的各种回调，而是调用了

ReactUpdates.batchedUpdates

这个方法就是 React 整个 batchUpdate 思想的核心。该方法会执行一个 transaction，那么这个transaction究竟干了什么？

function ReactDefaultBatchingStrategyTransaction() {
this.reinitializeTransaction();
}

assign(
ReactDefaultBatchingStrategyTransaction.prototype,
Transaction.Mixin,
{

getTransactionWrappers: function() {
  return TRANSACTION_WRAPPERS;
}

}
);

注意它被 assgin 的 getTransactionWrappers 方法，返回了一个常量 TRANSACTION_WRAPPERS。

var NESTED_UPDATES = {
initialize: function() {

this.dirtyComponentsLength = dirtyComponents.length;

},
close: function() {

if (this.dirtyComponentsLength !== dirtyComponents.length) {
  // Additional updates were enqueued by componentDidUpdate handlers or
  // similar; before our own UPDATE_QUEUEING wrapper closes, we want to run
  // these new updates so that if A's componentDidUpdate calls setState on
  // B, B will update before the callback A's updater provided when calling
  // setState.
  dirtyComponents.splice(0, this.dirtyComponentsLength);
  flushBatchedUpdates();
} else {
  dirtyComponents.length = 0;
}

}
};

var UPDATE_QUEUEING = {
initialize: function() {

this.callbackQueue.reset();

},
close: function() {

this.callbackQueue.notifyAll();

}
};

var TRANSACTION_WRAPPERS = [NESTED_UPDATES, UPDATE_QUEUEING];

transaction的perform执行的的内容就是找到事件对应的所有节点并依次对这些节点触发事件。而

我们需要关注的就是 NESTED_WRAPPER 中的 close 方法，也就是这个方法指明了当所有的事件触发响应结束后，flushBatchUpdates()。

下面给大家看一个简单的流程图。

这是当我们点击button后的整个流程。

现在我们理解了，当点击button后，首先会调用batchUpdate，而batchUpdate 功能都是通过执行一个transaction 实现的，该transaction中的method中包含了各个组件的onClick回调，若回调中包含了this.setState,则通过ReactUpdates.enqueueUpdate进行更新，大概的流程如下

this.setState // ReactComponent.js
...
this.updater.enqueueSetState // ReactUpdateQueue.js
...
获取当前组件的 pendingStateQueue，并将新的 state push 进去 // ReactUpdateQueue.js
...
enqueueUpdate // ReactUpdates.js
...
if(当前不在一次 batchUpdate 的过程中) // ReactUpates.js
执行 batchingStreategy.batchUpdates 方法
else
将当前 component 存入 dirtyComponents 数组中
...
if (setState 方法存在 callback) // ReactComponent.js
调用 this.updater.enqueueCallback 将 callback 存入队列中
...

综上所述，this.setState 调用后，新的 state 并没有马上生效，而是通过 ReactUpdates.batchedUpdate 方法存入临时队列中。当一个 transaction 完成后，才通过 ReactUpdates.flushBatchedUpdates 方法将所有的临时 state merge 并计算出最新的 props 及 state。

移动端的现在有ant design 的移动版： https://mobile.ant.design/index-cn

未来前端开发前景

Web前端开发是很新的职业，在国内乃web真正开始受到重视的时间不超过5年。Web前端是从美工演变而来的，名称上有很明显的时代特性。而且现在非常多的互联网企业对于用户的体验越来越重视，所以现在需要的web前端技术人员也是越来越大，与此同时web前端中的HTML5技术更是日趋成熟，HTMl5现在是移动互联网开发主流语言，就目前来讲现在还没有一种技术能将HTML5取代，因此，现在不论是APP应用还是PC端应用，前端的样式都是离不开HTML5通过手机与电脑上网的使用率来看，从事html5或者web相关的开发工作，就业前景还是比较可观的。据统计现在移动端的使用率要比电脑端的多得多，所以html5或者web前端是众望所归

前端技术栈更新速度很快，但是那些根基（HTML / CSS / JS）掌握好了依旧是最重要的。新的框架层出不穷，与其每一个浅尝辄止不如好好地练习其中之一并把相关的技术模块都摸清楚让自己对于前段有一个更全面的掌握。

IT行业新趋势
这里面有很多的大方向，个人角度来说，就说两个：
一个是物联网（Internet of Things），智能家居也属于这一类。你可以想象每个物体通过RFID，NFC（近场通讯）都被跟踪和感知，这样我们的行李就不可能丢失，到了一个超市就知道每个加工食品的原料来源和营养标准，家里一旦出现异常能直接通知你或报警，这些技术已经出现了，但是建设这个基础架构需要很大的投入。

第二，AI（人工智能）和机器学习，以前的AI是专家系统，现在的趋势AI通过模拟进行人脑神经网络学习，和大数据结合起来，实现质变。我看到Google和百度都在上面有非常出色的成绩。Andrew Ng在2015年GPU计算大会上做了主题报告：Use Your Superpowers!我个人也非常期待这些能够改变人类历史发展的技术。里面还有场景化的（推荐）服务。当然也有讨论人工智能是不是很危险，会不会失控？而人类会不会变懒变傻甚至灭绝？李彦宏博鳌对话盖茨马斯克 警惕人工智能安全性，比尔盖茨也提到一本书超级智能：路线图、危险性与应对策略 ，我们可以去思考

1. HTML + CSS

       前端的入门门槛极低，体现在HTML和CSS上。运行环境就是浏览器，推荐Chrome。你需要的只是一个文本编辑器，推荐Sublime Text 3，有不少好插件比如Emmet，谷歌搜一下很容易了解到的。当然你非要用记事本的话，也不是不行的。刚入门查阅资料可以用 w3school 或者 MDN 。 HTML和CSS不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，推荐慕课网 HTML+CSS基础课程。 我当时是看了一本书 Head First HTML and CSS，讲得浅显易懂，不过价格比较感人，也是只翻一遍的书，没有必要买了。 迅速刷一遍慕课网，对HTML和CSS有个大致印象就好。想巩固HTML标签可以去看看16年的task1-1。
   
      HTML5的API可以先放一放，回头再看。 接下来就是深入学习CSS了。推荐： 《CSS权威指南（第3版）》。很枯燥的一本书，但我确实不知道哪本书更适合了。花两三天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，比如盒模型，浮动和定位这些，抓住重点快速过一遍。 《CSS3 专业网页开发指南》。CSS3也是需要掌握的内容。但这里还是以了解为主，知道CSS3有什么内容就好，记忆属性是枯燥且毫无意义的。 以上内容用时5天左右，下面是实践。 学了几天HTML和CSS了，应该也有点成果了。打开IFE2015 task1，写个静态页面吧。 我X，完全写不出来。 这是正常的。去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者w3c，多尝试，不断踩坑才有进步。 画完第一张图后，别着急往下写。你的代码肯定会有如下问题
   

胡乱的代码缩进
毫无章法的属性顺序
满页的div
不停地写id和class

重写吧，是的。重写之前先看一份代码规范 GitHub - ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的，我最早看的是这一份，所以代码风格也一直维持到现在。 再去看一下别人提交的代码，多看几份。当然自己也要判断，不能听风就是雨啊，人家写得不好你再去重写一次，等于你也有责任对不对。 开始重写了，会发现功力大增，写代码速度也快了很多的。 写到第三张页面的时候，应该比较熟练了。如果看到布局就大概知道应该怎么写了，那就可以进入JavaScript的学习了。 以上内容用时10天左右。 进阶部分可以回头再看： 掌握预处理工具Sass，自动化工具Gulp。 阅读Bootstrap源码。 《CSS揭秘》，极其惊艳的一本书，涵盖了CSS3的很多奇技淫巧，虽说有些地方不太实用，但让人眼前一亮，很值得看。

1. JavaScript 这是至关重要的阶段。

        强烈推荐《JavaScript高级程序设计（第3版）》，俗称红宝书。前七章是重中之重，必须反复阅读，直至完全理解，期间可配合其他书一起读。DOM，事件流，表单，JSON，Ajax与最后几章也相当重要。其余章节可以略读或跳过（比如浏览器嗅探，XML以及那些列举大量API的章节，完全可以用到再查） 推荐《JavaScript语言精粹》，俗称蝴蝶书。超薄的一本，半天就可以看完。JavaScript是一门有很多坑的语言，我个人是喜欢把这些坑点全部搞清楚的，但这本书却避而不谈了，剩下的也就是所谓的“精粹”了。但清晰地过一遍知识点总是好的。 强烈推荐《你不知道的JS》。精彩至极的一本书，将JavaScript的坑一网打尽。之前搞不懂的问题，比如闭包，this之类的都可以在这里找到答案。 ES6也是必学的内容，推荐阮一峰老师的《ES6 标准入门》。但这本书以API居多，所以还是留个大概印象，以后写到类似的地方，查一查有没有ES6更简洁的写法就好，不必死记硬背。以及需要学会Webpack的使用，Babel和模块化就靠Webpack了。 不太推荐《JavaScript权威指南》，也就是犀牛书。那就是一本字典……
   

进阶： 《JavaScript设计模式与开发实践》，设计模式是必须了解的内容，这本是写得不错的。 《高性能JavaScript》，红宝书作者的另一力作，讲了一些优化技巧与性能瓶颈问题，值得一读。 以上内容用时1个月左右，中途可穿插IFE2015 task2的题，比2016年的要简单。 这些书全部刷完的话，应该可以跟人谈笑风生了。 开始实践，IFE2016阶段二的题，想怎么刷就怎么刷吧。如果有编程经验的话，应该没什么压力了。

1. JavaScript框架

      这部分就比较自由了，每个人点的技能树都不一样的。前端的发展是爆炸式的，换工具比翻书还快，所以还是以看文档为主了。 目前主流框架经常被提及的是React，Angular，Vue。知乎搜一搜就有相当多的优秀答案了。不过这个答案也有时效性，说不定过两年这些框架全都被淘汰了呢【逃 学习至少一种框架，把IFE2016刷通关吧。耗时1个半月左右。 进阶：看各种源代码。这也是我最近打算做的事情，但是好像期末考要到了TAT 最后补充一下，计算机基础知识是很重要的。由于本人有OI的经验所以稍微占点优势。再推荐几本书，抽空还是要看看的： 《深入理解计算机系统》，CSAPP，也是我们专业这学期的课程（但是我的专业明明是EE啊）。 《计算机网络 自顶向下方法》，看名字就知道必读了吧。 操作系统好书挺多的，推荐一本 Operating Systems: Three Easy Pieces ，英文不够好就《现代操作系统》吧。 算法和数据结构，推荐两本：《算法导论》《数据结构与算法分析》。似乎算法和数据结构与前端关系不大，但作为一个码农，不要求你写红黑树，至少快速排序和二分查找这种要会写的吧。

1. 熟悉供应链、物流、配送领域的算法技术

   1. 熟悉R/SAS/Matlab/Cplex/GUROBI/COIN-OR等一种或以上软件工具