【React】从入坑到跑路：生命周期

内容

记住 React 常用的钩子函数
关于input 表单实现 数据->视图，视图->数据
React 中的网络请求

1. React中的钩子

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

生命周期的3个状态：

1. Mounting:将组件插入到DOM中
2. Updating:将数据更新到DOM中
3. Unmounting:将组件移除DOM中

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

CompontWillMount:组件将要渲染时触发；可以在此时：添加ajax 请求，添加动画前的类
CompontDidMount:组件渲染完毕；添加动画
compontWillReceiveProps:组件将要接受props数据；查看接收props的数据什么
ShouldComponentUpdate：组件接收到新的state或者props；判断是否更新。返回布尔值
CompontWillUpdate:组件将要更新
ComponentDidUpdate:组件已经更新
ComponentwillUnmount:组件将要卸载

注意：钩子函数大多配合其他操作，帮助我们达到效果

2. 表单输入

示例（注释清晰）：

import React from 'react';
class SearCom extends React.Component{
    
    
    constructor(props){
    
    
        super(props);
        this.state = {
    
    
            value:''
        }
    }
    render(){
    
     // 注意：React中的input输入框，必须绑定onchange事件（实现双线绑定）
        return(
            <div>
                <h3}>输入地区进行查询</h3>
                <input type="text"
                    placeholder="请输入要查询的省份"
                    value={
    
    this.state.value} 
                    onChange={
    
    this.inpChange}/>
            </div>
        )
    }
    inpChange= (e)=>{
    
    
       this.setState({
    
    
           value:e.target.value
       })
    }
}

注意：React中的input输入框，必须绑定onchange事件（实现双向绑定）

3. React中的网络请求

对于网络请求， 各个框架相差不大，大多使用axios，进行请求。开发时配合钩子函数，实现页面的渲染。此处可参考：axios的前后端交互