ajax mysql项目 react_React生命周期和ajax请求

组件的生命周期可分成三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

React生命周期

常用生命周期方法解析：

componentWillMount : 在渲染前调用。

componentDidMount : 在第一次渲染后调用。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。

componentWillReceiveProps：在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

React 实例

class Button extends React.Component {

constructor(props) {

super(props);

this.state = {data: 0};

this.setNewNumber = this.setNewNumber.bind(this);

}

setNewNumber() {

this.setState({data: this.state.data + 1})

}

render() {

return (

INCREMENT

);

}

}

class Content extends React.Component {

componentWillMount() {

console.log('Component WILL MOUNT!')

}

componentDidMount() {

console.log('Component DID MOUNT!')

}

componentWillReceiveProps(newProps) {

console.log('Component WILL RECEIVE PROPS!')

}

shouldComponentUpdate(newProps, newState) {

return true;

}

componentWillUpdate(nextProps, nextState) {

console.log('Component WILL UPDATE!');

}

componentDidUpdate(prevProps, prevState) {

console.log('Component DID UPDATE!')

}

componentWillUnmount() {

console.log('Component WILL UNMOUNT!')

}

render() {

return (

{this.props.myNumber}

);

}

}

ReactDOM.render(

document.getElementById('example')

);

通过console可以看到生命周期的调用顺序

Component WILL MOUNT!

Component DID MOUNT!

Component WILL RECEIVE PROPS!

Component WILL UPDATE!

Component DID UPDATE!

Component WILL RECEIVE PROPS!

Component WILL UPDATE!

Component DID UPDATE!

...

componentWillMount()和componentDidMount()只在组件创建的时候调用一次，componentWillReceiveProps()、componentWillUpdate()和componentDidUpdate()在每次点击按钮更新数据的时候都会调用一次。

在我们正常的开发过程中，有一些功能可以通过重写组件生命周期的函数来完成。如React中的ajax请求。

// 代码摘自http://www.runoob.com/react/react-ajax.html

React 实例

class UserGist extends React.Component {

constructor(props) {

super(props);

this.state = {username: '', lastGistUrl: ''};

}

componentDidMount() {

this.serverRequest = $.get(this.props.source, function (result) {

var lastGist = result[0];

this.setState({

username: lastGist.owner.login,

lastGistUrl: lastGist.html_url

});

}.bind(this));

}

componentWillUnmount() {

this.serverRequest.abort();

}

render() {

return (

{this.state.username} 用户最新的 Gist 共享地址：

{this.state.lastGistUrl}

);

}

}

ReactDOM.render(

,

document.getElementById('example')

);

通过jquery来实现ajax请求。在componentDidMount()函数中发送ajax请求，拿到数据，通过setState()保存在state中，供给组件使用。当组件要卸载时，在componentWillUnmount()函数中，通过this.serverRequest.abort();将还没有完成的ajax请求停止。

从代码中可以比较清晰得看到一个简单的ajax请求的过程。