1 组件：本质上是状态机，输入确定，输出一定确定。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出相应。
组件的生命周期：
初始化
- getDefaultProps //获取实例的默认属性， 第一次调用
- getInitialState //获取实例的默认属性
- componentWillMount // 组件即将装载
- render // 组件在rander函数中生成虚拟的DOM节点，最后由react把虚拟的DOM节点渲染成真正的DOM节点并放在页面中进行交互
- componentDidMount // 调用该函数时，组件已经被选染到了页面上
运行
- componentWillReceiveProps // 组件将要接受到属性的时候调用
- shouldComponentUpdate // 组件接收到新属性或者新状态的时候触发---组件是否要更新。
- componentWillUpdate // 在rander触发之前调用，组件即将更新
- render //
- componentDidUpdate // 在render结束之后，真正的DOM渲染完后调用
销毁
- componentWillUnmount // 在销毁之前调用
2 初始化阶段：
实例1 查看触发顺序：
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<Meta charset="UTF-8">
<title></title>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<!--查看触发顺序-->
<script type="text/jsx">
var style = {
color : "red",border: "1px #000 solid"
};
var HelloWorld = React.createClass({
getDefaultProps : function(){
console.log("1,getDefaultProps ")
},getInitialState : function(){
console.log("2,getInitialState ");
return null;
},componentWillMount: function(){
console.log("3,componentWillMount ")
},render:function(){
return <p ref="childp">Hello {(function(obj){
if(obj.props.name){
return obj.props.name
}else{
return "World"
}
})(this)}</p>
},componentDidMount:function(){
console.log("5,componenDidMount ")
},});
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<Meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
$(document).ready(
function(){
var count = 0;
var style = {
color : "red",border: "1px #000 solid"
};
var HelloWorld = React.createClass({
getDefaultProps: function () {
console.log("1,getDefaultProps ");
return {name: "Tom"};
},getInitialState: function () {
console.log("2,getInitialState ");
return {
myCount: count++,ready: false
};
},componentWillMount: function () {
console.log("3,componentWillMount ");
this.setState({ready: true});
},render:function () {
return <p ref="childp">Hello {this.props.name ? this.props.name : "World"}
<br/>
{" " + this.state.ready}{this.state.myCount}
</p>;
},componentDidMount:function () {
console.log("5,componenDidMount ");
$(React.findDOMNode(this)).append("surprise");
},});
React.render(<div style={style}><HelloWorld></HelloWorld><br/>
<HelloWorld></HelloWorld>
</div>,document.body);
}
)
</script>
</body>
</html>
实例1 查看触发顺序：
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title></title>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
var style = {
color : "red",border: "1px #000 solid"
};
var HelloWorld = React.createClass({
componentWillReceiveProps: function(){
console.log("1,componentWillReceiveProps");
},shouldComponentUpdate: function(){
console.log("2,shouldComponentUpdate");
return true;
},componentWillUpdate: function(){
console.log("3,componentWillUpdate");
},render: function () {
console.log("4,render");
return <p ref="childp">
Hello,{this.props.name ? this.props.name:"World"}
</p>
},componentDidUpdate: function(){
console.log("5,componentDidUpdate");
},});
var HelloUnivers = React.createClass({
getInitialState: function(){
return {name:''};
},handleChange:function(event){
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}>
<HelloUnivers></HelloUnivers>
</div>,document.body);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
$(document).ready(
function () {
var style = {
color : "red",border: "1px #000 solid"
};
var HelloWorld = React.createClass({
componentWillReceiveProps: function(newProps){
console.log("1,componentWillReceiveProps");
console.log(newProps);
},shouldComponentUpdate: function(){
console.log("2,shouldComponentUpdate");
return true;
},componentWillUpdate: function(){
console.log("3,componentWillUpdate");
},render: function () {
console.log("4,render");
return <p ref="childp">
Hello,{this.props.name ? this.props.name:"World"}
</p>
},componentDidUpdate: function(){
console.log("5,componentDidUpdate");
$(React.findDOMNode(this)).append("superise");
},});
var HelloUnivers = React.createClass({
getInitialState: function(){
return {name:''};
},handleChange:function(event){
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}>
<HelloUnivers></HelloUnivers>
</div>,document.body);
}
)
</script>
</body>
</html>
4. 销毁阶段使用的函数：
componentWillUnmount // 在销毁之前调用； 在组件之前进行清理操作，比如计时器和监听器。
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
$(document).ready(
function () {
var style = {
color : "red",border: "1px #000 solid"
};
var HelloWorld = React.createClass({
render: function () {
console.log("4,componentWillUnmount:function(){
console.log("B000000000000M");
}
});
var HelloUnivers = React.createClass({
getInitialState: function(){
return {name:''};
},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>
},document.body);
}
)
</script>
</body>
</html>
