React组件生命周期详解
-
什么是生命周期
有三个阶段组成：初始化、运行中、销毁
组件本质上是状态机，输入确定、输出确定
状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。可以用事件的思路来理解状态 -
初始化阶段
初始化阶段可以使用的函数：
1、getDefaultProps：只能调用一次，实例之间共享引用
在js中有两种类型的数据：第一种是值类型的比如 数字，字符串 布尔值；另一种是引用类型的数据有 对象数组函数
2、getInitialState：初始化每个实例特有的状态
会被调用多次，处理状态
3、componentWillMount：render之前最后一次修改状态的机会
4、render：只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
只能返回一个组件
5、componentDidMount：成功render并渲染完成真是DOM之后触发，可以修改DOM
示例：
<!DOCTYPE html>
<html lang="zh - cn">
<!--中文语言-->
<head>
<meta charset="UTF-8">
<title>Helo word!</title>
<script src="../jquery-3.3.1.js"></script>
<script src="../react.js"></script>
<script src="../JSXTransformer.js"></script>
<script src="../react-dom.js"></script>
</head>
<body>
<script type="text/jsx">
$(document).ready(function () {
var count= 0;
var style ={
color:"red",
border:"1px solid #000",
};
var HelloWorld = React.createClass({
/*
* getName:function () {
if (this.props.name)
return this.props.name
else
return "World"
},
* */
getDefaultProps:function () {
console.log("getDefaultProps");
return {name:"Tom"}
},
getInitialState:function () {
console.log("getInitialState");
return {
myCount:count++,
ready:false
};
},
componentWillMount:function () {
console.log("componentWillMount");
this.setState({ready:true});
},
render:function () {
return <p ref="childp">Hello,{this.props.name ?this.props.name : "World"}<br/>{""+this.state.ready}</p>
},
componentDidMount:function () {
console.log("componentDidMount");
$(ReactDOM.findDOMNode(this)).append("Surprise!")
},
});
//调用React Render方法把组件渲染到页面中，第一个参数是一段jsx代码第二个参数是渲染目标
/*
*需要注意的是其他属性的赋值一般来说是用字符穿的形式，但是style
* */
ReactDOM.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);
});
</script>
</body>
</html>
- 运行中阶段
componentWillReciveProps:父组件修改属性触发，可以修改新属性、修改状态
在属性被修改之前触发
shouldComponentUpdate:返回false会阻止render调用
即 React会询问开发者组件是否需要更新，有时候状态发生变化不需要更新显示出来的内容 只是更新数据这时候就可以用这个函数来阻止整个组件的更新 大部分时候是不需要使用这个函数的
componentWillUpdate：不能修改属性和状态
render：只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
componentDidUpdate：可以修改DOM
实例：
进了一个坑 在input标签里调用函数的时候习惯性的写了this.handleChange()后面的括号是不应该有的！！！
报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运行中阶段实例演示</title>
</head>
<body>
<script src="../jquery-3.3.1.js"></script>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../JSXTransformer.js"></script>
<script type="text/jsx">
$(document).ready(function () {
var style={
color:"red",
border:"1px solid #000"
};
/*
* HelloUniverse组件中个引用了HelloWorld组件 所以HelloWorld组件是HelloUniverse的子组件
*
* */
var HelloWorld = React.createClass({
componentWillReciveProps:function (newProps) {
console.log("componentWillReciveProps 1");
console.log(newProps);
},
//shouldComponentUpdate只有在提高性能时使用
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 () {
$(ReactDOM.findDOMNode(this)).append("suprise!")
console.log("componentDidUpdate 5");
}
});
var HelloUniverse = React.createClass({
getInitialState:function () {
return {name:''}
},
/*
handleChange用来响应Input的输入事件
* */
handleChange:function (event) {
this.setState({name : event.target.value});
},
render:function () {
return <div>
<HelloWorld name={this.state.name}/>
<br/>
<input type="test" onChange={this.handleChange}/>
</div>
}
});
ReactDOM.render(<div style={style}><HelloUniverse/></div>,document.body);
} );
</script>
</body>
</html>
以上代码运行中 componentWillRecive未被** 错误原因未找到 如有大神看到请指出
- 销毁阶段
在销毁阶段只有一个函数可以被使用
componentWillUnmount:在删除组件之前进行清理操作，比如计时器和事件监听器
第一种触发方式，在render中把之前有的组件去掉，反映在页面中就是删除掉第二种：使用React提供的一个函数来删除
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>销毁阶段实例演示</title>
</head>
<body>
<script src="../jquery-3.3.1.js"></script>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../JSXTransformer.js"></script>
<script type="text/jsx">
$(document).ready(function () {
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("BOOOOOOOOOM!!!")
}
});
var HelloUniverce= React.createClass({
getInitialState:function () {
return {name:''};
},
handleChange:function (event) {
if(event.target.value == "123"){
//getElementsByTagName必须是一开始装载的节点即 ReactDOM.render(<div style={style}><HelloUniverce/></div>,document.body);
ReactDOM.unmountComponentAtNode(document.getElementsByTagName("body")[0]);
//一定要加return来阻止想笑执行
return ;
}
this.setState({name:event.target.value});
},
render:function () {
return <div>
<HelloWorld name={this.state.name}/>
<br/>
<input type="text" onChange={this.handleChange}/>
</div>
}
})
ReactDOM.render(<div style={style}><HelloUniverce/></div>,document.body);
});
</script>
</body>
</html>