3. React 组件生命周期介绍

        React 中的每个组件都有三个阶段,这三个阶段构成了组件完整的生命周期。组件的生命周期为初始化→运行中→销毁,每个阶段都可以有开发者自定义的函数,执行不同的行为。下面介绍不同阶段的特点、不同阶段可以触发的函数以及触发条件。

        组件本质上是状态机,输入确定,输出一定确定。 状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出响应。 可以用事件的思路来理解状态。

初始化阶段介绍


        这个阶段可以触发五个函数,下面是不同函数的触发条件:
         getDefaultProps:只调用一次,实例之间共享引用
         getInitialState:初始化每个实例特有的状态
        componentWillMount:render之前最后一次修改状态的机会
         render:只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出
         componentDidMount:成功render并渲染完成真实DOM之后触发,可以修改DOM
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>react dom dangerouslySetInnerHTML</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<script type="text/babel">
var count = 0;
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");
$(ReactDOM.findDOMNode(this)).append("surprise!");
},
});

ReactDOM.render(<div><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>, document.body);
</script>
</body>
</html>

运行结果
getDefaultProps, 1
getInitialState, 2
componentWillMount, 3
render, 4
getInitialState, 2
componentWillMount, 3
render, 4
2次componentDidMount, 5

运行中阶段介绍 


        这个阶段可以触发四个函数:
         componentWillReceiveProps:父组件修改属性触发,可以修改新属性、修改状态
         shouldComponentUpdate:返回false会阻止render调用
         componentWillUpdate:不能修改属性和状态
         render:只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出
         componentDidUpdate:可以修改DOM
<script type="text/babel">
var HelloWorld = React.createClass({
componentWillReceiveProps: function (newProps) {
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() {
$(ReactDOM.findDOMNode(this)).append("surprise!");
},
});
var HelloUniverse = 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>
},
});
ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>, document.body);
</script>

运行,输入1,输出:
render 4
componentWillReceiveProps 1
Object {name: "1"}
shouldComponentUpdate 2
componentWillUpdate 3
render 4

销毁阶段介绍


        这个阶段可以触发一个函数:
         componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器
<script type="text/babel">
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("clear HelloWorld!");
},
});
var HelloUniverse = React.createClass({
getInitialState: function () {
return {name: ''};
},
handleChange: function (event) {
if (event.target.value == "123") {
ReactDOM.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>
},
});
ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>, document.body);
</script>

运行,当输入123会把内容删除, 并输出: clear HelloWorld!




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值