<!DOCTYPE html>
<html>
<head>
? ? <meat charset="UTF-8">
? ? ? ? <title>2_react生命周期-setState</title>
</head>
<body>
? ? <!-- 准备好一个容器 -->
? ? <div id="test"></div>
? ? <!-- 核心库 -->
? ? <script type="text/javascript" src="../js/react.development.js"></script>
? ? <!-- react-dom,操作dom -->
? ? <script type="text/javascript" src="../js/react-dom.development.js"></script>
? ? <!-- 引入babel，jsx转为js -->
? ? <script type="text/javascript" src="../js/babel.min.js"></script>
? ? <!-- 此处一定要写babel -->
? ? <script type="text/babel">
? ? ? ? //1.创建组件
? ? ? ? class Count extends React.Component{
? ? ? ? ? //构造器
? ? ? ? ? constructor(props){
? ? ? ? ? ? ? console.log('Count---constructor');
? ? ? ? ? ? ? super(props)
? ? ? ? ? ? ? ?//初始化状态
? ? ? ? ? ? ? this.state = { count: 0 }
? ? ? ? ? }
? ? ? ? ? //加1按钮的回调
? ? ? ? ? add = ()=>{
? ? ? ? ? ? //获取原状态
? ? ? ? ? ? const {count} =this.state
? ? ? ? ? ? //更新状态
? ? ? ? ? ? this.setState({count: count+1})
? ? ? ? ? }
? ? ? ? ? death = ()=>{
? ? ? ? ? ? ? ReactDOM.unmountComponentAtNode(document.getElementById('test'))
? ? ? ? ? }
? ? ? ? ? //组件将要挂载的钩子
? ? ? ? ? componentWillMount(){
? ? ? ? ? ? ? console.log('Count---componentWillMount');
? ? ? ? ? }
? ? ? ? ? //组件挂载完毕的钩子
? ? ? ? ? componentDidMount(){
? ? ? ? ? ? ? console.log('Count---componentDidMount')
? ? ? ? ? }
? ? ? ? ? //组件将要卸载的钩子
? ? ? ? ? componentWillUnmount(){
? ? ? ? ? ? ? console.log('Count---componentWillUnmount')
? ? ? ? ? }
? ? ? ? ? //控制组件更新的‘阀门’
? ? ? ? ? shouldComponentUpdate(){
? ? ? ? ? ? ? console.log('Count---shouldComponentUpdate')
? ? ? ? ? ? ? return true;
? ? ? ? ? }
? ? ? ? ? ?//组件将要更新的钩子
? ? ? ? ? ? componentWillUpdate() {
? ? ? ? ? ? ? ? console.log('Count---componentWillUpdate')
? ? ? ? ? ? }
? ? ? ? ? ? ? //组件更新完毕的钩子
? ? ? ? ? ? componentDidUpdate() {
? ? ? ? ? ? ? ? console.log('Count---componentDidUpdate')
? ? ? ? ? ? }
? ? ? ? ? ?render(){ ?
? ? ? ? ? ? ? ? console.log('Count---render')
? ? ? ? ? ? ? ? const {count}=this.state
? ? ? ? ? ? ? ?return(
? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h2>当前求和为：{count}</h2>
? ? ? ? ? ? ? ? ? ? <button onClick={this.add}>点我+1</button> ?
? ? ? ? ? ? ? ? ? ? <button onClick={this.death}>卸载组件</button>
? ? ? ? ? ? ? ? ? </div> ? ? ? ?
? ? ? ? ? ? ? ?) ? ? ? ? ?
? ? ? ? ? ?}
? ? ? ? } ? ? ? ? ?
? ? ? ? //2.渲染组件到页面
? ? ? ? ReactDOM.render(<Count/>, document.getElementById("test")); ?
? ? </script>
</body>
</html>
======================
页面刷新，控制台：
?
点加1，接着上面出现
========
附上图片
?
?
