<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic Example</title> <!-- react.js是react的核心库--> <script src="./build/react.js" charset="utf-8"></script> <!-- react-dom.js提供与dom有关的功能--> <script src="./build/react-dom.js" charset="utf-8"></script> <!-- browser.min.js将JSX语法转换成javascript语法，然后才能在浏览器上执行--> <script src="./build/browser.min.js" charset="utf-8"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script>--> </head> <body> <!-- react渲染的模板内容会插入到这个DOM节点中，作为一个容器--> <div id="container"> </div> </body> <!-- 在react开发中，使用JSX，跟JavaScript语法不兼容，在使用JSX的地方，药设置type="text/babel"--> <!-- babel转换编译器，ES6转换成可以在浏览器中运行的代码--> <script type="text/babel"> /*此处编辑react代码*/ /* 007.事件处理 react中的事件名称，首字母小写，驼峰命名法 定义一个组件，组件中包含一个button，给button绑定onClick事件 */ var MyButton = React.createClass({ handleClick:function(){alert("click事件");}, render:function(){ return ( <button onClick={this.handleClick}>{this.props.buttonTitle}</button> ); } }); ReactDOM.render( <MyButton buttonTitle="button_guo" />, document.getElementById("container") ); /* 008.state 状态 创建组件CheckButton 包含一个复选框checkbox <input> 复选框在选中和未选中的情况下显示不同的文字 注意：当state发生变化时，会调用组件内部的render方法，重新渲染 */ /* var CheckButton = React.createClass({ //定义初始状态 getInitialState:function(){ return { //在这个对象中设置的属性，将会存储在state中，默认状态：未选中 isCheck:false }; }, //定义事件绑定的方法 handleChange:function(){ this.setState({ isCheck:!this.state.isCheck }); }, //重写render render:function(){ //根据状态值，设置显示的文本 //在JSX语法中不能直接使用if，使用三目运算符 var text = this.state.isCheck ? "YES":"NO"; return ( <div> <input type="checkbox" onChange={this.handleChange} /> {text} </div> ); } }); ReactDOM.render( <CheckButton />, document.getElementById("container") ); */ /* 009.表单 定义一个组件，将用户在输入框中输入的内容进行实时显示 组件与用户交互过程中，存在状态的变化，即输入框的值 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口 /* var InputGuo = React.createClass({ getInitialState:function(){ return { value:"Please set in ..." }; }, handleChange:function(event){ this.setState({ value:event.target.value }); }, render:function(){ var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); } }); ReactDOM.render( <InputGuo />, document.getElementById("container") ); */ /* 010.组件的生命周期 分三个状态： Mounting：组件挂载，已插入真实DOM Updating：组件更新，正在重新渲染 Unmounting：组件移出，已移出真实DOM 分四个阶段： 创建、实例化、更新、销毁 例如：网易新闻列表页面 Mounting/组件挂载相关： 1.componentWillMount 组件将要挂载，在render之前执行，但仅执行一次，即使多次重复渲染该组件，或者改变了组件的state 2.componentDidMount 组件已经挂载，在render之后执行，同一个组件重复渲染只执行一次 Updating/组件更新相关： 1.componentWillReceiveProps（object nextProps） 已加载组件收到新的props之前调用，注意组件初始化渲染时不会执行 2.shouldComponentUpdate（object nextProps, object nextState） 组件判断是否重新渲染时调用，该接口实际是在组件接收到了新的props或者新的state的时候 会立即调用，然后通过 3.componentWillUpdate（object nextProps, object nextState） 组件将要更新 4.componentDidUpdate（object prevProps, object prevState） 组件已经更新 Unmounting/组件移除相关： componentWillUnmount 在组件要被移除之前的时间点触发，可以利用该方法来执行一些必要的清理组件，将要移除 生命周期中与props 和state 相关： getDefaultProps 设置props属性默认值 getInitialState 设置state属性初始化 */ /*生命周期各阶段介绍*/ var Demo = React.createClass({ /* 1.创建阶段：只调用getDefaultProps方法 */ getDefaultProps:function(){ //在创建类的时候调用，设置this.props的默认值 console.log("getDefaultProps"); return {}; }, /* 2.实例化阶段：getInitialState - componentWillMount - render - componentDidMount */ getInitialState:function(){ //设置this.state的默认值 console.log("getInitialState"); return null; }, componentWillMount:function(){ //在render方法之前调用 console.log("componentWillMount"); }, render:function(){ //渲染并返回一个虚拟DOM console.log("render"); return <h1>render渲染</h1> }, componentDidMount:function(){ //在render之后调用 //React会使用render方法返回的虚拟DOM对象创建真实的DOM结构 //可以在这个方法中读取DOM节点 console.log("componentDidMount"); }, /* 3.更新阶段：componentWillReceiveProps - shouldComponentUpdate（如果返回false，后面三个方法不执行） - componentWillUpdate - render - componentDidUpdate */ componentWillReceiveProps:function(){ console.log("componentWillReceiveProps"); }, shouldComponentUpdate:function(){ console.log("shouldComponentUpdate"); return true; }, componentWillUpdate:function(){ console.log("componentWillUpdate"); }, componentDidUpdate:function(){ console.log("componentDidUpdate"); }, /* 4.销毁阶段：componentWillUnmount */ componentWillUnmount:function(){ console.log("componentWillUnmount"); } }); ReactDOM.render( <Demo />, document.getElementById("container") ); ReactDOM.render( <Demo />, document.getElementById("container") ); </script> </html>