react是R系技术栈中最基础同时也是最核心的一环，2年不到获取了62.5k star(截止到目前)，足可见其给力程度。下面对一些react日常开发中的注意事项进行罗列。
React的组件生命周期react主要思想是构建可复用组件来构建用户界面。在react里面一切皆组件。每个组件里面都是有自己的生命周期，这个生命周期规定了组件的状态和方法，分别在哪个阶段执行。下面附上一张React的生命周期图：
组件第一阶段：初始化、渲染以及装载完成；
组件第二阶段：组件运行时候的状态 ①:状态变化引发组件的更新和重新渲染到更新完成
②:父组件属性变化引发组件的更新(是常见的组件之间传递数据和同步状态的手段):比如父组件登录了，子组件也需变成登录状态
组件第三阶段：卸载组件
JSX 语法const names = ['Alice', 'Emily', 'Kate']; ReactDOM.render( <div> { names.map((name) => { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example') );
JSX 的基本语法规则：遇到 HTML 标签（以<开头），就用 HTML 规则解析；遇到代码块（以{开头），就用 JavaScript 规则解析。
所以给jsx添加注释只要这样子：
{/* 。。。 */}
父组件传向子组件
子： var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); --------------------------------------- 父： ReactDOM.render( <HelloMessage />, document.getElementById('example') );
变量HelloMessage就是相当于一个子组件类。通过this.props.name获取到了Muyy。
另外注意
所有组件类都必须有自己的render方法，用于输出组件。
组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage
组件类只能包含一个顶层标签
class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是 JavaScript 的保留字
子组件传向父(爷)组件其实很简单，概括起来就是：react中state改变了，组件才会update。父组件写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化。
例子1.这里如下图，用户邮箱为父，绿色框为子。 父组件为用户输入的邮箱设好state，即“{email: ''}”，同时写好处理state的函数，即“handleEmail”，这两个名称随意起；再将函数以props的形式传到子组件，子组件只需在事件发生时，调用父组件传过来的函数即可。
//子组件 var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱：<input onChange={this.props.handleEmail}/> </div> ) } }); //父组件，此处通过event.target.value获取子组件的值 var Parent = React.createClass({ getInitialState: function(){ return { email: '' } }, handleEmail: function(event){ this.setState({email: event.target.value}); }, render: function(){ return ( <div> <div>用户邮箱：{this.state.email}</div> <Child handleEmail={this.handleEmail.bind(this)}/> </div> ) } }); React.render( <Parent />, document.getElementById('test') );
例子2.有时候往往需要对数据做处理，再传给父组件，比如过滤或者自动补全等等，下面的例子对用户输入的邮箱做简单验证，自动过滤非数字、字母和"@."以外的字符。
//子组件，handleVal函数处理用户输入的字符，再传给父组件的handelEmail函数 var Child = React.createClass({ handleVal: function() { var val = this.refs.emailDom.value; val = val.replace(/[^0-9|a-z|\@|\.]/ig,""); this.props.handleEmail(val); }, render: function(){ return ( <div> 请输入邮箱：<input ref="emailDom" onChange={this.handleVal}/> </div> ) } }); //父组件，通过handleEmail接受到的参数，即子组件的值 var Parent = React.createClass({ getInitialState: function(){ return { email: '' } }, handleEmail: function(val){ this.setState({email: val}); }, render: function(){ return ( <div> <div>用户邮箱：{this.state.email}</div> <Child handleEmail={this.handleEmail.bind(this)}/> </div> ) } }); React.render( <Parent />, document.getElementById('test') );