React组件生命周期（旧有格式）
新的生命周期
下面是旧有声明周期的案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test"></div>
<!-- 制作组件 -->
<script type="text/babel">class Count extends React.Component{
//构造器;
constructor(props){
console.log('我是构造器');
super(props);
//初始状态；因为在构造器内部，所以，需要加this关键字;
this.state={count:0};
}
//组件将要挂载;
componentWillMount(){
console.log('组件将要挂载...');
}
//加1按钮的回调;
add = () => {
//获取原始状态;
const{count}=this.state;
//更新状态;
this.setState({count:count+1});
}
death= () => {
ReactDOM.unmountComponentAtNode(document.getElementById('test'));
}
//挂载完毕;
componentDidMount(){
console.log('组件挂载完毕...');
}
//卸载组件;
componentWillUnmount(){
console.log('组件卸载了...');
}
//组件更新
shouldComponentUpdate(){
console.log('shouldComponentUpdate...');
return true;
}
//组件将要更新
componentWillUpdate(){
console.log('componentWillUpdate...');
}
//组件更新
componentDidUpdate(){
console.log('componentDidUpdate...');
}
//强制更新;
force= () => {
this.forceUpdate();
}
//渲染;
render(){
console.log('render');
const {count}=this.state; //这句不要忘了加
return(
<div>
<h2>当前求和是：{count}</h2>
<button onClick={this.add}>按钮测试</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>强制更新</button>
</div>
);
}
}
//调用;
ReactDOM.render(<Count/>,document.getElementById('test'));</script>
</body>
</html>
