reactjs开发时一般会采用es6语法（es6入门推荐阅读http://es6.ruanyifeng.com/#docs/intro）,
hello world
此为最简单的demo，将最简单的组件渲染到页面上。
hello world demo
import React from 'react'引用的是package.json文件中dependencies中的react。
jsx语法
jsx不能一次性返回零散的多个节点，如果有多个需要包含在一个中
jsx多个零散节点返回
注释
jsx中注释必须用{/**/}的注释形式
jsx的注释
样式
jsx对应html中的两种形式 ，jsx种这样写：
css样式：<p className="class1">hello world</p>，注意这里是className，而 html 中是class
内联样式：<p style={{display: 'block', fontSize: '20px'}}>hello world</p>，注意这里的{{...}}，还有fontSize的驼峰式写法
事件
用click举例，需要在标签上绑定click事件，可以这样写
click点击事件
注意：onClick是驼峰式命名法，通过.bind()传递参数
循环
在jsx中使用循环，一般会用到Array.prototype.map的方式
jsx中的循环
注意：Array.map是包裹{}中的，key={value}有助于react的渲染优化jsx中的{}可以放置一个可执行的js程序或者变量。
判断
jsx中一般无法使用if...else...，故jsx中的判断基本使用三元运算符
jsx三元运算符判断
代码分离
page层
在helloworld的demo中，所有的jsx代码都在一个文件中，实际开发中并非这样，故需要代码分离。
1、创建./app/containers/Hello/index.js文件，将之前创建组件的代码放入
创建组件的代码
2、在./app/index.js中引入即可
引入之前创建的组件
subpage 层
如果Hello组件再复杂一点，即使这样放在一起也很复杂，需要再次进行拆分。
创建./app/containers/Hello/subpage目录，然后在其下面创建Carousel.js、 Recommend.js、 List.js三个文件，分别写入不同的代码，然后./app/containers/Hello/index.js中可以这样写
拥有
subpage的组件页面
component 层
以上介绍的都是页面层级的内容，将复杂的页面进行拆分为subpage，亦无甚特别。APP每个页面最上面都会有个 header，可以显示标题，亦可以返回，样子都差不多，没必要为每个页面都写入。
创建./app/components/Header/index.js文件，写入基本的组件代码，然后在./app/containers/index.js中引用
引入components
注意：所有的页面都会用到header，我们可以将多个页面都可能用到的功能封装到组件中，代码放入./app/components中。
数据传递&数据变化
props
所有用到header的页面内容不尽相同，页面中引入时我们可以通过title属性进行传值：<Header title="Hello页面"/>
在header中，可以通过props取的该值
header代码中取值
在 React 中，父组件给子组件传递数据时，就是以上方式，通过给子组件设置 props 的方式，子组件取得 props 中的值即可完成数据传递。被传递数据的格式可以是任何 js 可识别的数据结构，上面demo是一个字符串。React 中，props 一般只作为父组件给子组件传递数据用，不要试图去修改自己的 props ！
props && state
props不能被自身修改，组件中自身属性发生变化，一般使用state。
state初体验
注意：React 会实时监听每个组件的 props 和 state 的值，一旦有变化，会立刻更新组件，将结果重新渲染到页面上。
生命周期
1、getInitialState：初始化组件state数据，在es6中，通常这样写
构造函数
2、render
渲染模板使用，最为常见
3、comopentDidMount
首次加载组件并插入dom时使用，一般用来获取网络数据，实际项目开发中用到。
4、shouldComponentUpdate
主要用于性能优化，怎么使用，未知
5、componentDidUpdate
组件更新后触发的事件，用于清空或者更新数据，开发中经常用到。
6、componentWillUnmount
组件销毁之前触发的事件，一般用户存储一些特殊信息，以及清理setTimeout事件等。
网友评论