58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
// 通过state 添加自定属性 触发刷新
|
|
class Test extends React.Component {
|
|
constructor(props){
|
|
console.log("触发构造函数");
|
|
super(props);
|
|
}
|
|
|
|
componentWillMount() {
|
|
console.log('componentWillMount')
|
|
}
|
|
componentDidMount() {
|
|
console.log('componentDidMount')
|
|
}
|
|
componentWillReceiveProps(newProps) {
|
|
console.log('componentWillReceiveProps!')
|
|
}
|
|
shouldComponentUpdate(newProps, newState) {
|
|
return true;
|
|
}
|
|
componentWillUpdate(nextProps, nextState) {
|
|
console.log('componentWillUpdate!');
|
|
}
|
|
componentDidUpdate(prevProps, prevState) {
|
|
console.log('componentDidUpdate!')
|
|
}
|
|
componentWillUnmount() {
|
|
console.log('componentWillUnmount!')
|
|
}
|
|
render() {
|
|
return <h1>我的数字, {this.props.myNumber}</h1>;
|
|
};
|
|
}
|
|
|
|
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 (
|
|
<div>
|
|
<button onClick = {this.setNewNumber}>INCREMENT</button>
|
|
<Test myNumber = {this.state.data}></Test>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(
|
|
<Button/>,
|
|
document.getElementById('root')
|
|
);
|