您的位置：首页 > Web前端 > React

React组件生命周期详解

2016-09-10 13:30 696 查看

一、组件的生命周期介绍

组件的本质是状态机，输入确定，输出一定确定。

状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。
可以使用事件的思路来理解状态。
组件的生命周期：
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航