API文档： https://reactjs.org/ http://caibaojian.com/react/ git demo 项目 > 基于create-react-app创建的项目git地址 > 内有列表、地图、图标、对话框等demo > clone地址：https://github.com/z5614036/demo ，需要cnpm安装依赖模块 文件引入模式 ~~~ <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> ~~~ 学习网站 http://wiki.jikexueyuan.com/project/react/thinking-in-react.html ## 一、高效的DOM操作  ## 二、组件属性使用 ~~~ var CommentBox = React.createClass({ render: function() { console.log(this.props.children); // 你好，世界~ return ( React.createElement('div', {className: "commentBox", style: {color: this.props.color}}, "Hello, world!") ); } }); ReactDOM.render( <CommentBox color="#f00">你好，世界~</CommentBox>, document.body ); ~~~ ## 三、创建元素 1)、原生标签 ~~~ ReactDOM.render(React.createElement('h1', {title: '123'}, 'Hello, world!'), document.body); ~~~ 结果 ~~~ <h1 data-reactroot="" title="123">Hello, world!</h1> ~~~ 2)、组件 ~~~ var CommentBox = React.createClass({ render: function() { return ( React.createElement('div', {className: "commentBox", style: {color: '#f00'}}, "Hello, world!") ); } }); ReactDOM.render( React.createElement(CommentBox, null), document.body ); ~~~ 3)、进阶 ~~~ // 通过React.createElement var child = React.createElement('li', null, '这是li元素'); var root = React.createElement('ul', { style: {color: '#f00'} }, child); var App = React.createClass({ render: function() { return ( root ); } }); ReactDOM.render(<App/>, document.body); // 内置工厂方法 ReactDOM.render( React.DOM.ul({ className: 'my-list' }, React.DOM.li(null, 'Text Content') ), document.body ); // 工厂方法 var Item = React.createClass({ render: function() { return ( <div>{this.props.text}</div> ); } }); var Factory = React.createFactory(Item); var root = Factory({ text: 'this is element.' }); // var root2 = Factory({ text: 'this is node.' }); ReactDOM.render(root, document.body); ~~~ **注意**：所有的标签(单标签/双标签)都要有关闭。 ## 四、ref和props ~~~ // 利用ref来获取元素 var App = React.createClass({ getInitialState: function() { return {userInput: ''}; }, handleChange: function(e) { this.setState({userInput: e.target.value}); }, clearAndFocusInput: function() { this.setState({userInput: ''}, function() { this.refs.theInput.focus(); }); }, render: function() { return ( <div> <button type="button" onClick={this.clearAndFocusInput}> Click to Focus and Reset </button> <input ref="theInput" value={this.state.userInput} onChange={this.handleChange} /> </div> ); } }); ReactDOM.render(<App/>, document.body); // 使用扩展操作符操作对象 var App = React.createClass({ render: function() { return ( <a style={this.props.style}>{this.props.title}</a> ); } }); var props = { title: 'hello world', style: {color: '#f00'} }; ReactDOM.render(<App {...props} />, document.body); // propsType var MyComponent = React.createClass({ propTypes: { children: React.PropTypes.element.isRequired }, render: function() { return ( <div> {this.props.children} </div> ); } }); var ChilrenComponent = React.createClass({ render: function() { return ( React.DOM.strong(null, 'hello') ); } }); ReactDOM.render(<MyComponent><ChilrenComponent/></MyComponent>, document.body); ~~~ ## 五、循环数据 ~~~ // 内置标签 var List = React.createClass({ render: function() { var data = [ {title: 'hello'}, {title: 'world'}, {title: '~'}, ]; return ( <ul> {data.map(function(v, i) { return <li key={i}>{v.title}</li>; })} </ul> ); } }); ReactDOM.render(<List />, document.body); // 动态创建 var List = React.createClass({ render: function() { var data = [ {title: 'hello'}, {title: 'world'}, {title: '~'}, ]; return ( <ul> {data.map(function(v) { return React.createElement('li', null, v.title); })} </ul> ); } }); ReactDOM.render(<List />, document.body); // 自定义组件 var ListItem = React.createClass({ render: function() { return ( <li>{this.props.title} 需要 {this.props.course} 节课</li> ); } }); var List = React.createClass({ getInitialState: function() { return { list: [ {title: 'canvas入门介绍', course: 1}, {title: 'canvas绘图', course: 2}, {title: 'canvas转换', course: 1}, {title: 'canvas图表', course: 3}, {title: 'canvas截图', course: 1}, ] } }, render: function() { var ListItems = this.state.list.map(function(v) { return ( <ListItem title={v.title} course={v.course} /> ); }); return ( <ul> {ListItems} </ul> ); } }); ReactDOM.render( <List/>, document.body ); ~~~  ## 六、渲染json文件数据，通过setState重新渲染 ~~~ var ListItem = React.createClass({ render: function() { return ( <li>{this.props.title} 需要 {this.props.course} 节课</li> ); } }); var List = React.createClass({ getInitialState: function() { return { list: [] } }, render: function() { $.getJSON(this.props.url, function(res) { this.setState({list: res}); }.bind(this)); var ListItems = this.state.list.map(function(v) { return ( <ListItem title={v.title} course={v.course} /> ); }); return ( <ul> {ListItems} </ul> ); } }); ReactDOM.render( <List url="data.json" />, document.body ); ~~~ data.json ~~~ [ {"title": "canvas入门介绍", "course": 1}, {"title": "canvas绘图", "course": 2}, {"title": "canvas转换", "course": 1}, {"title": "canvas图表", "course": 3}, {"title": "canvas截图", "course": 1} ] ~~~ ## 七、react生命周期图  参考链接：https://www.race604.com/react-native-component-lifecycle/ ## 八、登录表单 ~~~ var LoginForm = React.createClass({ getInitialState: function() { return { username: '', password: '', style: { form: {} } } }, handleSubmit: function() { this.setState({ username: this.refs.username.value, password: this.refs.password.value }, function() { console.log(this.state); }); }, render: function () { return ( <div style={this.state.style.form}> <input type="text" placeholder="用户名" ref="username" /><br/> <input type="password" placeholder="密码" ref="password" /><br/> <input type="button" value="登录" onClick={this.handleSubmit} /> </div> ); }, componentDidMount: function() { this.setState({ style: { form: { float: 'left', padding: '10px', border: '1px solid #f00' } } }); } }); ReactDOM.render( <LoginForm />, document.body ); ~~~  ## 九、checkbox默认选中解决 ~~~ // 方式1 React.createElement('input',{type: 'checkbox', defaultChecked: false}); // 示例 var Checkbox = React.createClass({ getInitialState: function() { return { checked: false } }, handleCheckbox: function(e) { console.log(e.target.checked); }, render: function() { return ( React.createElement('input', { type: 'checkbox', defaultChecked: this.state.checked, onChange: this.handleCheckbox }) ); } }); ReactDOM.render(<Checkbox/>, document.body); // 方式2 <input type="checkbox" id="stocked" defaultChecked={this.state.isStocked}/> ~~~ ## 十、label与checkbox配合 ~~~ // 方式1 <label><input type="checkbox" id="stocked" defaultChecked={this.state.isStocked}/>stocked</label> // 方式2 能过htmlFor属性 input type="checkbox" id="stocked" defaultChecked={this.state.isStocked}/> <label htmlFor="stocked">stocked</label> ~~~ ## 十一、setState流程  ## 十二、子父组件传值 ~~~ //子组件 var Child = React.createClass({ render: function(){ return ( <div> 邮箱：<input onChange={this.props.handleEmail}/> </div> ) } }); //父组件 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 name="email" handleEmail={this.handleEmail.bind(this)}/> </div> ) } }); React.render( <Parent />, document.getElementById('test') ); ~~~ 在React中setState不是每次调用就立刻渲染的。 他们的队列的顺序也在一次事件之内进行结算（比如在click事件过程中可能有很多setState在等待，等Click事件完成之后，setState这个队列里面的内容就开始进行结算了），所以setState多次调用并不会导致渲染多次。 但是事务的次数可能会导致渲染。 **参考链接：** React之ref详细用法：https://segmentfault.com/a/1190000008665915