文章目录：
这么多人吹捧ReactJS，但是真的好吗？
最近用react做了一个聊天类型的应用，说一下大概的看法吧：
言简意赅的说，react+redux+immutable+其它辅助lib的方案，在多状态、多交互的产品中，还是有很大的应用场景，一图胜千言：
以下是根据自己体验和社区经验，得出的一些想法：
mvvm 是架构层面的模式，函数式是编程上的范式，两者不是对立面，react+flux 是函数式，mvvm 里一样可以用函数式，恰恰在不少 mvvm 的实现框架中，FPR 是很重要的实现双绑的方案：比如 ReactiveCocoa 用到的 RAC。
是否有实际的案例去证明，应用规模大了后，mvvm 就不能用了？非要你的 flux？ flux 才出现多久，以前用 mvvm 实现的大规模应用都是假的？
react 支持者都是直接根据官方文档照读：双绑很混乱，flux 才能解决一切，事实是，你喜欢单向数据流，mvvm 一样支持啊，不要双绑就行了呀。
react 我没有实际用过，不发表负面评论，但让我觉得比较亮的是透明的virtual dom和同构方案。
性能这块，ng 未必会比 react 慢，但不好的地方在于，ng 需要知道 track by 这些黑魔法才能做到优化，而很多开发者并不知道这点，在这上面，react 是领先的。
virtual dom 的引入也让 react 脱离了视图的具体实现，可以很方便的切换底层平台，这是一个大优势，而 ng2的架构也会做到这点。
react是 view 层，你要愿意，mvvm 里的 v 同样可以用 react 来做，不要随便把 mvvm 和 react 等价，认为只有 react 能用 flux，认为 react 只能用于 flux。
用还是不用？客观：因地制宜主观：因人而异其实：你高兴就好
reactjs是库还是框架
框架
AngularJS、 ReactJS归到同一类，JQ只是一个库，其他两个才算是重框架；
React很大的特点就是“轻”，再加上VDOM这个很好的idea让React非常非常快（在上面那个测试里面0.3s左右就载入完毕）。另外React和Angular一个很大的不同就是React采用的是one-way data flow。
React的缺点嘛，大概就是现在还太新了很难说将来有没有大的API变化，目前在大的稳定的项目上采用React的，我也就只知道有Yahoo的Email。所以现在很少有批评React的声音也许不是他真的就没有坑，而是那些坑还没有被踩出来而已。
还有就是React本身只是一个V而已，所以如果是大型项目想要一套完整的框架的话，也许还需要引入Flux和routing相关的东西。React的routing我没有研究过，但是Flux的话已经有出现一些批评的声音了。
请问怎么学习react.js
一、JSX介绍
①定义
JSX=JavaScript XML，是一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，但是使用JSX可以提高组件的可读性，增强JS语义，结构清晰，抽象程度高，代码模块化。因此推荐在React中使用JSX。
②特点
1、元素名首字母大写
2、符合嵌套规则
3、可以写入求值表达式
4、驼峰式命名
5、不能使用javascript原生函数的一些关键词，如for和class。需要替换成htmlFor和className
③使用方法
1、使用动态值：JSX将两个花括号之间的内容{...}渲染为动态值，花括号指明了一个javascript上下文环境,花括号里面可以是一个变量，也可以是函数。 例如：
var name=“winty”;
p{name}/p
function date(d){
return [
d.getFullYear(),
d.getMonth()+1,
d.getDate()
].join('-);
};
p{date(new Date()}/p
2.注释：首先，在子节点中注释要用大括号包裹起来，然后就可以单行注释/**/，也可以多行注释//。
var Hello=React.createClass({
render:function(){
return p name="winty" //set name
Hello ,World
/*
多行注释
多行注释
*/
/p
}
});
3.使用CSS内联样式
var style={
color:#000;
};
React.render(div style={style}..../div,document.body);
4.使用条件判断
//方法1，三目运算符
var Hello=React.createClass({
render:function(){
return pHello,{this.props.name?this.props.name : "LuckyWinty"}/p
}
});
//方法2，if-else语句
var Hello1=React.createClass({
getName:function(){
if(this.props.name)
return this.props.name;
else
return "LuckyWinty";
render:function(){
return pHello,{this.getName}/p
}
});
//方法3，使用逻辑||运算符
var Hello3=React.createClass({
render:function(){
return pHello,{this.props.name||"LuckyWinty"}/p
}
});
④非DOM属性介绍
JSX中有3个非DOM属性，分别是：dangerouslySetInnerHTML、ref、key。
dangerouslySetInnerHTML：在JSX中直接插入HTML代码，但是如果能避免使用这个属性则尽量避免使用。
不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击 的原因之一。
在彻底的理解安全问题后果并正确地净化数据之后，生成只包含唯一 key __html 的对象，并且对象的值是净化后的数据。例如：
function createMarkup() {
return {__html: 'First · Second'};
};
div dangerouslySetInnerHTML={createMarkup()} /
ref：父组件引用子组件，你可以通过在属性中设置期望的引用名来定义一个引用。例如：
...
render:function(){
return div
input ref="MyInput" .../
/div
}
...
//然后你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了
key：是一个可选的唯一标识符，通过给组件设置一个独一无二的键，并确保它在一个渲染周期中保持一致，使得React能够更只能地决定应该重用一个组件还是销毁并重建一个组件，进而提高渲染性能。例如：
var Hello3=React.createClass({
render:function(){
return ul
li key="1"1/li
li key="2"2/li
li key="3"3/li
/ul
}
});
二、React组件生命周期详解
组件本质上就是状态机，输入确定，输出一定确定。状态和结果一一对应，从而使程序变得直观。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。可以用事件的思路来理解状态,但是事件与事件之间互相独立，但是不同状态之间可能会互相影响。
组件的所有状态结合起来就成了组件的生命周期。即：初始化阶段-运行中阶段-销毁阶段。
不同生命周期内可以自定义的函数
初始化阶段：
①getDefaultProps:获取默认属性，只调用一次，是在createClass之后调用的。实例之间共享引用
②getInitialState:初始化每个实例的特有初始化状态
③componentWillMount:mout就是装载的意思，这个方法的意思就是说组件即将被装载到页面中，也是render之前最后一次修改状态的机会
④render:组件在render函数生成虚拟节点，最后由react将虚拟节点变成真正的节点渲染到页面上。只能访问this.props和this.state，只有一个顶层组件，最好不要修改状态和DOM输出。
⑤componentDidMount:组件被装载后才会被调用，也就是说调用这个方法的时候，组件已经被渲染到了页面上，这个时候可以修改DOM
这五个函数的执行顺序就是从上到下的。需要注意的是getDefaultProps只会在组件的第一个实例被初始化的时候被调用，也就是说第二个实例之后都是从getInitialState开始调用。同一个组件的所有实例的默认属性都是一样的。
主要测试代码：script type="text/babel"
var Hello=React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps, 1");
},
getInitialState:function(){
console.log("getInitialState, 2");
return null;
},
componentWillMount:function(){
console.log("componentWillMount, 3");
},
render:function(){
console.log("render, 4");
return pHi,LuckyWinty!/p
},
componentDidMount:function(){
console.log("componentDidMount, 5");
},
});
React.render(Hello/Hello,document.body);
/script
①componentWillReceiveProps:这个函数在组件即将接收到属性时触发的，或者是父组件的属性发生变化时，属性在传送到组件之前，开发者有机会通过这个函数去处理属性。比如修改，更新内部状态等。
②shouldComponentUpdate：当组件接收到新属性或者新状态的时候触发的。这个是一个疑问函数，也就是说我们可以告诉react不去更新某个组件。因为有时候属性或者状态并不会导致组件发生更新。在组件不需要更新的情况下，手动使shouldComponentUpdate返回false，这样react就不需要再经过render和diff算法去判断是否要更新，从而提高性能。
③componentWillUpdate：render触发之前触发，更新组件，不能修改属性和状态
④render：组件在render函数生成虚拟节点，最后由react将虚拟节点变成真正的节点渲染到页面上，只能访问this.props和this.state，只有一个顶层组件，最好不要修改状态和DOM输出。
⑤componentDidUpdate：render之后，真正的DOM被渲染之后调用
web开发的发展前景怎么样?
1、市场前景
前端程序员缺口非常大，因为它正式成为一个岗位才几年，国内最早出现前端招聘岗位在2012年左右。随着现代互联网应用的火爆，前端难度加大，导致后台程序员不能完全搞定，所以企业们急切需要真正懂前端技术的“前端人员”。
近十年以来，IT行业发展火热，衍生了很多新职业，例如UI设计师、开发工程师、软件测试工程师等等，在众多备受瞩目的新生职业中，Web前端工程师是其中的一员。
随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，所以，有不少人立志要成为前端开发工程师。
2、就业形势
Web前端可选择的岗位有：前端开发工程师、资深前端开发工程师、网站重构工程师、前端架构师等等。
虽然近两年大数据、人工智能等很火，但Web前端开发依然是十分热门的，特别是随着谷歌、YouTube、FireFox等大型企业纷纷将视线转向HTML5，前端开发已经进入HTML5时代，所以，Web前端在今后十年仍有很大的发展空间。
据统计，我国HTML5前端工程师人员的缺口将达到10多万，因此，Web前端工程师是一个非常有“钱”途的职业，并且薪酬会根据技能的深入而有不同程度的增长，其中北京、上海、广州、深圳等地前端工程师的薪资待遇更是一路飙升。
3、说完了前景状况，接下来就是学习前端了，前端入门虽简单，但也并不是人人都能从事这个行业的，如何鉴定自己适不适合学前端呢？
1. 你是否能耐得住性子？学习web前端接触得最多就是各种繁复的字母代码，需要你耐得住性子安安静静地坐下来研究技术。如果你做事经常三分钟热度，容易半途而废、或是性格急躁急于求成，编程可能不太适合你。
2. 你是否有持之以恒的毅力？web前端不仅知识点多，而且前端发展得快，新的框架和思想被不断的提出，对于新手来会有不小的心理压力，过快的节奏让新手学起来比较吃力，想要学习web前端就要做好做好长期学习，更新自己知识库的准备，持之以恒的毅力才能让你在长途跋涉的工作过程中坚持下来。
3. 是否具备基本的逻辑思维？选择工科专业的人一般逻辑思维能力一般要强于文科生，web前端需要用逻辑思维处理问题的能力。针对甲方用代码实现，首先要自己理解透彻，编写出来的程序才能拒绝bug。
如果以上提到问题，你都能从容攻克，那么你是适合学习web前端的。
4、到这里呢，先恭喜你进入前端行业，接下来就是如何学习前端了，前端的学习路线是什么呢？
零基础学习路线：
1、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。
2、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。
3、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。
4、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于 promise、async 等内容要尤其关注。
5、HTML5和CSS3。要熟悉其中的新特性。
6、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
7、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。
8、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。
9、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。
10、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。
11、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。个人总结一下：用VS Code 的人越来越多，用 WebStorm 的人越来越少。
12、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
道有Yahoo的Email。所以现在很少有批评React的声音也许不是他真的就没有坑，而是那些坑还没有被踩出来而已。还有就是React本身只是一个V而已，所以如果是大型项目想要一套完整的框架的话，也许还需要引入Fl
lp 比 grunt 用得多。10、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。11、编辑器相关。Subl
,World /* 多行注释 多行注释 */ /p } });3.使用CSS内联样式var style={ color:#000;};React.render(div style={style}..../div,document.body)
ender(Hello/Hello,document.body);/script①componentWillReceiveProps:这个函数在组件即将接收到属性时触发的，或者是父组件的属性发生变化时，属性在传送到组件之前，开发者有机会通过这个函数去处理属性。比
的可读性，增强JS语义，结构清晰，抽象程度高，代码模块化。因此推荐在React中使用JSX。②特点1、元素名首字母大写2、符合嵌套规则3、可以写入求值表达式4、驼峰式命名5、不能使用javascript原生