import React from 'react';
import ReactDOM from 'react-dom';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';
class Component 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>
<div>Props:{this.props.data}</div>
<p>
<button onClick={() => {
this.handleClick()
}}>更新组件
</button>
</p>
</div>
);
}
}
class App extends React.Component {
// 构造函数
constructor(props) {
super(props);
this.state = {
data: 'Old Props'
};
alert('App初始化---------constructor---------');
console.log('App初始化---------constructor---------');
}
// 更新props属性
onPropsChange() {
alert('更新props属性');
console.log('更新props属性');
this.setState({
data: 'New Props'
});
}
// 渲染
render() {
return (
<div>
<Component data={this.state.data}/>
<p>
<button onClick={() => {
this.onPropsChange()
}}>改变Props
</button>
</p>
</div>
)
}
}
ReactDOM.render(
<div>
{/*<Component></Component>*/}
<App></App>
</div>,
document.getElementById('app')
);
点击“改变Props”按钮后:
1、更新props属性
2、componentWillReceiveProps
3、shouldComponentUpdate
4、componentWillUpdate
5、render
6、componentDidUpdate