import React from 'react';
import ReactDOM from 'react-dom';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';
class App extends React.Component {
// 构造函数
constructor(props) {
super(props);
this.state = {
data: 'Old State'
};
alert('constructor');
console.log('初始化数据---------constructor---------');
}
// 组件将要加载
componentWillMount() {
alert('componentWillMount');
console.log('componentWillMount');
}
// 组件加载完成
componentDidMount() {
alert('componentDidMount');
console.log('componentDidMount');
}
// 将要接收父组件穿来的props
componentWillReceiveProps() {
alert('componentWillReceiveProps');
console.log('componentWillReceiveProps');
}
// 子组件是不是应该更新
shouldComponentUpdate() {
alert('shouldComponentUpdate');
console.log('shouldComponentUpdate');
// true表示要更新,false表示不要更新
return true;
// return false;
}
// 组件将要更新
componentWillUpdate() {
alert('componentWillUpdate');
console.log('componentWillUpdate');
}
// 组件更新完成
componentDidUpdate() {
alert('componentDidUpdate');
console.log('componentDidUpdate');
}
// 处理点击事件
handleClick() {
console.log('更新数据---------handleClick---------');
this.setState({
data: 'New State'
});
}
// 渲染
render() {
alert('render');
console.log('render');
return (
<div>
<div>App</div>
<p>
<button onClick={() => {
this.handleClick()
}}>更新组件
</button>
</p>
</div>
);
}
}
ReactDOM.render(
<div>
{/*<Component></Component>*/}
<App></App>
</div>,
document.getElementById('app')
);
执行顺序:
1、初始化数据———constructor———
2、componentWillMount
3、render
4、componentDidMount
点击按钮后(return true):
5、更新数据———handleClick———
6、shouldComponentUpdate
7、componentWillUpdate
8、render
9、componentDidUpdate
点击按钮后(return false):
5、更新数据———handleClick———
6、shouldComponentUpdate