var names = [‘Alice', ‘Emily', ‘Kate']; ReactDOM.render( <div> { names.map(function (name,key) { return <div key={key}>Hello, {name}!</div> }) } </div>, document.getElementById(‘example') );
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById(‘example') );
组件
1.概念
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
2.代码示例
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name=“John” />, document.getElementById(‘example') ); var HelloMessage = React.createClass({ render: function() { return <h1 className=“green”>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name=“John” />, document.getElementById(‘example') );
this.props.children
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点
var NotesList = React.createClass({ render: function() { return ( <ol> { /* * 因为this.props.children的返回值会根据子节点的数量返回undefined,object,array. * 所以react提供了一个react.Children的方法专门处理this.props.children * */ React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.getElementById(“example”) );
PropTypes
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。
var MyTitle = React.createClass({ propTypes: { /* * 声明title属性是必须的,并且数据类型要为字符串，相当于是规范化的接口文档 * */ title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); var data = “123”; ReactDOM.render( <MyTitle title={data} />, document.getElementById(“example”) );
错误示范：
var data = 123; ReactDOM.render( <MyTitle title={data} />, document.body );
getDefaultProps
getDefaultProps 方法可以用来设置组件属性的默认值
var MyTitle = React.createClass({ getDefaultProps: function () { return { title:”hello world” } }, render: function() { return <h1> {this.props.title} </h1>; } }); // var data = “123”; ReactDOM.render( <MyTitle />, document.getElementById(“example”) );
获取真实的 DOM 节点
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type=“text” ref=“myTextInput” /> <input type=“button” value=“Focus the text input” onClick={this.handleClick} /> </div> ); } }); ReactDOM.render( <MyComponent />, document.getElementById(‘example') );
this.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面