保安日记：React框架学习第三篇之生命周期

生命周期

生命周期即是组件从实例化到渲染到最终从页面中销毁，整个过程就是生命周期。在这生命周期中，我们有许多可以调用的事件，也俗称为钩子函数

生命周期的3个状态：

Mounting(挂载):将组件插入到DOM中

Updating:将数据更新到DOM中

Unmounting(卸载):将组件移除DOM中

生命周期中的钩子函数（方法，事件）

componentWillMount :组件将要渲染，AJAX，添加动画前的类

componentDidMount:组件渲染完毕,添加动画

componentWillReceiveProps:组件将要接受props数据，查看接收props的数据什么

ShouldComponentUpdate：组件接收到新的state或者props,判断是否更新。返回布尔值

componentWillUpdate:组件将要更新

componentDidUpdate:组件已经更新

componentWillUnmount:组件将要卸载

表单

import react from 'react'

export default class SearchCom extends react.Component{
    constructor(props){
        super(props)
        this.state ={
            value:'',
            result:null
        }
    }

    render(){
        return(
            <div>
                <input type="text"
                       value={this.state.value}
                       placeholder='请输入查询的省份' 
                       onKeyDown={this.searchEvent}
                       onChange={this.onChange}
                  />
                <div>
                    <h2>查询结果</h2>
                    {this.state.result}
                </div>
            </div>
        )
    }
    searchEvent=(e)=>{
        if(e.keyCode===13){
            console.log(e.keyCode); //当keycode是回车时执行查询
            console.log(e.target.value);
            let num = this.props.provincesObj[e.target.value]
            if(num ==undefined){
                this.setState({
                    result: <h2>输入错误，请输入正确省份</h2>
                })
            }else{
                this.setState({
                    result:<div>
                                <div>确诊人数:{num.confirm}</div>
                                <div>痊愈人数:{num.heal}</div>
                                <div>死亡人数:{num.dead}</div>
                           </div>
                })
            }
        }
    }
    onChange=(e)=>{
        this.setState({
            value:e.target.value
        })
        console.log(e.target.value);
    } 
}

  value:e.target.value
    })
    console.log(e.target.value);
} 

}