与React-redux的相遇

看这篇文章需要具备的知识：

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语句块：

当然了我刚开始接触这块的时候，我也很纠结，为什么不能写语句块呢。

类似于这样的：

 {

      var a=0;

      return hello word

}

然而这段代码是不会达到预期效果的，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(

Hello world

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(

{

     names.map(function(name) {

     return  Hello word

     })

}

document.getElementById('example')

);

时间问题暂时就讲这么多，后续会持续更新，有兴趣的还可以去看看react-native，号称是一处编写，任何地方运行。其实我和你们一样也是在不断的摸索着前进。同时本文章有什么不严谨的地方请多多包涵（写文章是，严谨这方面已经很注意了），但是如果发现有错误请任性的指出，谢谢！