看这篇文章需要具备的知识：
react入门教程：react中文文档
redux入门教程：redux中文文档
ES6入门教程：阮一峰写的es6入门文档
redux-react教程：lewis617大神写的react-redux入门教程
如果你上面的知识已经熟悉了，那么也许你入门了。在程序员这个行业，要学会现学现用，在不断的填坑的过程中壮大自己（当然这是我个人的想法）。
与React相约
我专业本身是嵌入式开发，弄过开发板，写过Android，烧写过bootload，然后由于需要转身投入到web开发。框架基本是 spring-boot + react-redux这一套。下面要讲的内容，默认前提是你已经学过前面所列的入门教程，如果没有请移步。
相约react的生命周期：对于react来说生命周期很重要，下面附张生命周期图：
react生命周期图
注意踩坑点死循环：
页面都是经过render函数之后显示在网页上的（当然，这里面是有个虚拟DOM的，这句话不严谨，但是展开讲的话就偏离主题了，暂且这么认为），props变化（例如发请求等）会出发几个生命周期函数运行，但是因为react采用单向数据流，所以在props上不大会这个坑。但是state不一样，这是表示组件当前状态的，同样state值改变（通过setState）会触发相关生命周期函数执行，从生命周期图上不难看出，你去在render或should update函数中操作改变state试试，程序肯定会痛不欲生。
render函数中不能书写es语句块：
当然了我刚开始接触这块的时候，我也很纠结，为什么不能写语句块呢。
类似于这样的：
<div> {
var a=0;
return <span> hello word </span>
}</div>
然而这段代码是不会达到预期效果的，why，what's happen。这时候就得去翻翻react源码了，render函数是react的入口函数，通过render将虚拟DOM中的元素渲染到真实的DOM上面，下面我们来看这个函数：
ReactComponent render( ReactElement element, DOMElement container, [function callback] )
要彻底的了解这个坑我们需要拿到这个ReactElement这个object来分析下：
ReactElement createElement( string/ReactClass type, [object props], [children ...] )
这里面接收三个参数，第一个参数是指我们的html标签，如div，span等，第二个参数接收组件属性，第三个参数是子元素。
例如：React.render(
<h1 color="red">Hello world </h1>
document.getElementById('example')
);
编译出来是这样的：
React.render( React.createElement("h1", {color:"red"},"Hello, world!"),
document.getElementById('example') );
好现在我们回去看上面有错误的那段代码，被编译后是这样子的：
React.render( React.createElement("div", null,
var a=0 ; return hello word),
看到这，你大概也知道问什么代码会报错了吧，哪有这样子的参数的，所以在render函数中用大括号里面的jsx代码只支持单个函数。类似于下面这样：
React.createElement("div",null, names.map(function( ) {
returnReact.createElement("div",null,"Hello word")
}) ),
反翻译过来代码是这样的：
React.render(
<div>
{
names.map(function(name) {
return Hello word
})
}
</div>
document.getElementById('example')
);
时间问题暂时就讲这么多，后续会持续更新，有兴趣的还可以去看看react-native，号称是一处编写，任何地方运行。其实我和你们一样也是在不断的摸索着前进。同时本文章有什么不严谨的地方请多多包涵（写文章是，严谨这方面已经很注意了），但是如果发现有错误请任性的指出，谢谢！
网友评论