react学习笔记8：组件生命周期钩子函数和ajax

生命周期我们并不陌生，比如我们在开发页面会写这样代码：

window.onload=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 <div>
	 	<p>生命周期</p>
	 </div>;
	}

	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(
    <div>
		<ComponentDate />
	</div>,document.getElementById('root')
);
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 <div>
			<p>生命周期</p>
			<div>{this.state.ajax}</div>
		</div>;
	}


	componentDidMount() {
	   	//ajax 模拟异步处理
	   	setTimeout(function(){
		   this.setState({ajax:"ajax异步值"})
		}.bind(this),500)//让this指向类
	}


	
}


ReactDOM.render(
    <div>
		<ComponentDate />
	</div>,document.getElementById('root')
);
registerServiceWorker();