一、组件的生命周期介绍
组件的本质是状态机,输入确定,输出一定确定。
状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出响应。
可以使用事件的思路来理解状态。
组件的生命周期:
1.初始化阶段
getDefaultProps
getInitialState:
componentWillMount
render
componentDidMount
2.运行中阶段
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
3.销毁阶段
componentWillUnmount
二、初始化阶段函数介绍
初始化阶段可以使用的函数:
getDefaultProps:只调用一次,实例之间共享引用
getInitialState: 初始化每个实例特有的状态
componentWillMount:render之前最后一次修改状态的机会
render:只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出
componentDidMount:成功render并渲染完成真实DOM之后触发,可以修改DOM
<!DOCTYPE html> <html lang="zn-cn"> <head> <meta charset="UTF-8"> <title>React</title> </head> <body> <script src="./jquery.min.js"></script> <script src="./build/react.js"></script> <script src="./build/JSXTransformer.js"></script> <script type="text/jsx"> $(doucument).ready( function () { var count = 0; var style={ color:"red", border:"1px solid #000" }; var rawHTML = { _html:"<h1>I'm inner HTML</h1>" }; var HelloWorld = React.createClass({ getDefaultProps:function () { console.log("getDefaultProps,1"); return {name:"Tom"}; }, getInitialState:function () { console.log("getInitialState,2"); return { myCount:count++, ready:false }; }, componentWillMount:function () { console.log("componentWillMount,3"); this.setState({ready:true}) }, render:function () { console.log("render,4"); return <p ref="childp">Hello,{this.props,name?this.props.name:"world"}<br/>{this.state.ready}{this.state.myCount}</p>; }, componentDidMount:function () { console.log("componentDidMount,5"); $(React.findDOMNode(this)).append("surprise!"); } }); React.render(<div style={style}><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>,document.body); } ); </script> </body> </html>
三、运行中阶段函数介绍
运行中阶段可以使用的函数:
componentWillReceiveProps:父组件修改属性触发,可以修改新属性、修改状态
shouldComponentUpdate:返回false会阻止render调用
componentWillUpdate:不能修改属性和状态
render:只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出
componentDidUpdate:可以修改DOM
<!DOCTYPE html> <html lang="zn-cn"> <head> <meta charset="UTF-8"> <title>React</title> </head> <body> <script src="./build/react.js"></script> <script src="./jquery.min.js"></script> <script src="./build/JSXTransformer.js"></script> <script type="text/jsx"> $(document).ready( function () { var style={ color:"red", border:"1px solid #000" }; var HelloWorld = React.createClass({ componentWillReceiveProps:function () { console.log("componentWillReceiveProps,1"); console.log(newProps); }, shouldComponentUpdate:function () { console.log("shouldComponentUpdate,2"); return true; }, componentWillUpdate:function () { console.log("componentWillUpdate,3"); }, render:function () { console.log("render,4"); return <p>Hello,{this.props.name?this.props.name:"World"}</p>; }, componentDidUpdate:function () { console.log("componentDidUpdate,5"); } }); var HelloUniverse = React.createClass({ getInitialState:function () { return {name:""} }, handleChange:function () { this.setState({name:event.target.value}) }, render:function () { return ( <div> <HelloWorld name={this.state.name}></HelloWorld> <br/> <input type="text" onChange={this.handleChange}/> </div> ) } }); React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body); } ); </script> </body> </html>
四、销毁阶段函数介绍
销毁阶段可以使用的函数:
componentWillUnmount:在删除组件之前进行清理操作,比如计时器盒事件监听器
<!DOCTYPE html> <html lang="zn-cn"> <head> <meta charset="UTF-8"> <title>React</title> </head> <body> <script src="./build/react.js"></script> <script src="./build/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #000" }; var HelloWorld = React.createClass({ render:function () { console.log("render,4"); return <p>Hello,{this.props.name?this.props.name:"World"}</p>; }, componentWillUnmount:function () { console.log("Boooooooooooom!"); } }); var HelloUniverse = React.createClass({ getInitialState:function () { return {name:""} }, handleChange:function () { this.setState({name:event.target.value}) }, render:function () { if(this.state.name == "123") return <div>123</div> return ( <div> <HelloWorld name={this.state.name}></HelloWorld> <br/> <input type="text" onChange={this.handleChange}/> </div> ) } }); React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body); </script> </body> </html>
<!DOCTYPE html> <html lang="zn-cn"> <head> <meta charset="UTF-8"> <title>React</title> </head> <body> <script src="./build/react.js"></script> <script src="./build/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #000" }; var HelloWorld = React.createClass({ render:function () { console.log("render,4"); return <p>Hello,{this.props.name?this.props.name:"World"}</p>; }, componentWillUnmount:function () { console.log("Boooooooooooom!"); } }); var HelloUniverse = React.createClass({ getInitialState:function () { return {name:""} }, handleChange:function () { if(event.target.value == "123"){ React.unmountComponentAtNode(document.getElementsByTagName("body")[0]); return; } this.setState({name:event.target.value}) }, render:function () { return ( <div> <HelloWorld name={this.state.name}></HelloWorld> <br/> <input type="text" onChange={this.handleChange}/> </div> ) } }); React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body); </script> </body> </html>