React组件生命周期
2016-04-05 15:20
896 查看
什么是生命周期？
组件本子上是状态机，输入确定，输出一定确定。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应
可以用事件的思路来理解状态。组件可以处于不同的状态中。
初始化阶段————运行中阶段————销毁阶段
初始化阶段能够使用的钩子函数(按照触发顺序)：
getDefaultProps(获取实例的默认属性)————只有第一次实例的时候调用
getInitialState(获取实例的初始状态)
componentWillMount(组件即将被渲染到页面)
render(组件在render中生成虚拟的DOM节点,即JSX,最后由React生成真实的DOM节点)
componentDidMount(组件被渲染到页面之后)
运行中阶段能够使用的钩子函数(按照触发顺序)：
componentWillReceiveProps(组件快要接收到属性时触发)
shouldComponentUpdate(组件接收到新状态时，是否需要更新，返回false,React就不会更新，可以提高性能)
componentWillUpdate()
render
componentDidUpdate(在组件被渲染到页面之后调用)
销毁中阶段能够使用的钩子函数(按照触发顺序)：
componentWillUnmount(在销毁操作执行之前触发)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var HelloMessage = React.createClass({
getDefaultProps: function () {
},
getInitialState: function(){
return {liked: false}
},
componentWillMount: function(){
console.log("Component will mount");
},
render: function(){
return <p ref = "one">Hello, {
(function(obj){
if(obj.props.name){
return obj.props.name;
}else{
return "Message"
}
})(this)}</p>
},
compontentDidMount: function(){}
});
ReactDOM.render(<HelloMessage></HelloMessage>, document.querySelector("#example"));
</script>初始化阶段介绍
getDefaultProps——只调用一次，实例之间共享引用(属性)即使没有生成实例，也会调用，在createClass时，就会被调用
getInitialState——初始化每个实例特有的状态
必须返回一个Object或者是Null
componentWillMount——render之前最后一次修改状态的机会
render——只能访问this.props和this.state,不应再访问其它信息，只有一个顶层组件，但是可以有子组件，不允许修改状态和DOM输出。
如果render需要修改状态和DOM输出，那么render就不能在服务端使用。并且，如果在render中修改状态和DOM输出，会使得代码逻辑变得复杂。所以，要尽可能避免这样做。
componentDidMount——成功render并渲染完成真实DOM之后触发，可以修改DOM
操作真正的DOM节点:this.refs.XXX
var Zoo = React.createClass({
render: function() {
return <div>Giraffe name: <input ref="giraffe" /></div>;
},
showName: function() {
// 之前：
var input = this.refs.giraffe.getDOMNode();
// v0.14 版：
var input = this.refs.giraffe;
alert(input.value);
}
});需要注意的是，如果你给自定义的 React 组件（除了 DOM 自带的标签，如 div、p 等）添加 refs，表现和行为与之前一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/jquery-1.11.2.min.js"></script>
<script src = "build/react.js"></script>
<script src = "build/react-dom.js"></script>
<script src = "build/browser.min.js"></script>
<script type = "text/babel">
var count = 0;
var HelloMessage = React.createClass({
getDefaultProps: function () {
return {name: "Yvette"};
},
getInitialState: function(){
return {myCount: count++,
ready: false}
},
componentWillMount: function(){
this.setState({ready: true})
},
render: function(){
return <p ref = "one">Hello, {this.props.name ? this.props.name : "Message"} <br/>
{+ this.state.ready} {this.state.myCount}</p>
},
componentDidMount: function(){
$(this.refs.one).append("<span>future</span>");
}
});
ReactDOM.render(<div><HelloMessage></HelloMessage><HelloMessage></HelloMessage></div>, document.querySelector("#example"));
</script>
运行中阶段介绍
componentWillReceiveProps:父组件修改属性触发,可以修改新属性、修改状态。在修改发生之前出发。在属性真正比传送到组件之前,对其进行处理。
shouldComponentUpdate:返回false会阻止render调用,后面的函数都不会执行。
componentWillUpdate:不能修改属性和状态
render:只能访问this.props和this.state,不应再访问其它信息，只有一个顶层组件，但是可以有子组件，不允许修改状态和DOM输出。
componentDidUpdate:可以修改DOM
销毁阶段介绍
componentWillUnmount:在组件真正被销毁前调用，在删除组件之前进行清理操作，如计时器和事件监听器。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var style = {
color: "red",
border: "1px solid #000"
};
var HelloWorld = React.createClass({
render: function(){
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
componentWillUnmount: function(){
console.log("I will unmount");
}
});
var HelloUniverse = React.createClass({
getInitialState: function(){
return {name: "Yvette"};
},
handleChange: function (event) {
if(event.target.value == "123"){
React.unmountComponentAtNode(document.querySelector("#example"))
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>
);
}
});
ReactDOM.render(<div style = {style}><HelloUniverse></HelloUniverse></div>,document.querySelector("#example"));
</script>在input中输入123，可以触发componentWillUnmount事件。
使用React.unmountComponentAtNode(para);//传入的参数必须是装载时的节点，即ReactDOM.render()的第二个参数。
除了上面的方法外，还可以在render中写判断，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var style = {
color: "red",
border: "1px solid #000"
};
var HelloWorld = React.createClass({
render: function(){
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
componentWillUnmount: function(){
console.log("I will unmount");
}
});
var HelloUniverse = React.createClass({
getInitialState: function(){
return {name: "Yvette"};
},
handleChange: function (event) {
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>
);
}
});
ReactDOM.render(<div style = {style}><HelloUniverse></HelloUniverse></div>,document.querySelector("#example"));
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Reactive native 项目创建失败如何处理
- ReactiveCocoa的那些干货~
- reactor模式和Proactor模式
- ReactNative学习七－组件说明和生命周期
- << React Native 入门与实战>>----第3章 常用组件及实战
- ReactNative学习六－Flex布局
- ReactNative学习五－Atom安装
- reactjs初探
- windows上搭建react native环境
- React Native 一:开发环境搭建
- react案例->新闻移动客户端--（react+redux+es6+webpack+es6的spa应用）
- React中的Statics对象
- React 学习整理
- 再次谈论React.js实现原生js拖拽效果引起的一系列问题
- 再次谈论React.js实现原生js拖拽效果引起的一系列问题
- ReactJS 快速入门 3 高级特性
- ReactJS 快速入门 2 组件开发
- 再谈React.js实现原生js拖拽效果
- react-组件生命周期
- ReactJS 快速入门 1 介绍