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

搜索热词

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

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

生命周期

{this.state.ajax}

;

}

componentDidMount() {

//ajax 模拟异步处理

setTimeout(function(){

this.setState({ajax:"ajax异步值"})

}.bind(this),500)//让this指向类

}

}

ReactDOM.render(

);

registerServiceWorker();

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢寻找一群志同道合、互帮互助的学习伙伴，可以点击下方链接加入：

编程之家官方1群

编程之家官方2群

编程之家官方3群

编程之家官方4群