搜索热词
生命周期我们并不陌生，比如我们在开发页面会写这样代码：
window.οnlοad=function(){
//code
}
等待页面加载完成执行代码，同样的react也有类似的生命周期函数：
1.测试周期
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
//设置组件
class ComponentDate extends React.Component {
render() {
return
;
}
componentWillMount() {
console.log('在渲染前调用,在客户端也在服务端')
}
componentDidMount() {
console.log('在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout,setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。')
}
componentWillReceiveProps(newProps) {
console.log('在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。')
}
shouldComponentUpdate(newProps,newState) {
//返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
//可以在你确认不需要更新组件时使用。
return true;
}
componentWillUpdate(nextProps,nextState) {
console.log('在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。');
}
componentDidUpdate(prevProps,prevState) {
console.log('在组件完成更新后立即调用。在初始化时不会被调用。')
}
componentWillUnmount() {
console.log('在组件从 DOM 中移除的时候立刻被调用。')
}
}
ReactDOM.render(
);
registerServiceWorker();
显示如下：
2.生命周期函数和ajax
我们在第一次渲染后模拟ajax异步处理：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
//设置组件
class ComponentDate extends React.Component {
constructor(props) {
super(props);
// 设置 initial state
this.state = {
ajax: "ajax初始值"
};
}
render() {
return
;
}
componentDidMount() {
//ajax 模拟异步处理
setTimeout(function(){
this.setState({ajax:"ajax异步值"})
}.bind(this),500)//让this指向类
}
}
ReactDOM.render(
);
registerServiceWorker();
总结
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴，可以点击下方链接加入：
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群
