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

今天药忘吃喽~ 2022-11-30 14:28 154阅读 0赞

## 内容 ##

> 记住 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的前后端交互][axios]

[axios]: https://blog.csdn.net/cwq521o/article/details/106073374