React状态提升，Hook是什么，怎么使用？

痛定思痛。 2022-12-11 13:54 140阅读 0赞

#### React状态提升 ####

React中的状态提升概括来说,就是多个组件需要反映相同的变化数据，提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件。

###### React Hooks是React 16.8.0版本推出的新特性 主要的作用就是让无状态组件 可以使用状态（在react开发中状态的管理是必不可少的 以前为了进行状态管理需要使用类组件或者redux等来管理 ######

**useState()** 就是React提供最基础、最常用的Hook，主要用来定义和管理本地状态。

useState返回的是一个数组(长度为2)，数组的第一个对象表示当前状态的值，第二个对象表示用于更改状态的函数，类似于类组件的setState。

#### 语法： ####

let \[val(当前状态的值),setVal(改变状态的函数)\]=useState(当前状态的初始值)

#### 无状态组件中使用Hook–useState ####

1、一个参数时useState中直接写这个参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
2、多个参数useState中传递一个对象（如果需要修改数据需要先解构这个对象）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]

##### 无状态组件useRef使用获取元素节段 #####

hooks中可以通过 useRef()获取Dom节点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]

##### Hooks----useEffect #####

useEffect：函数组件中没有生命周期，那么可以使用 useEffect 来替代。可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

import React,{useEffect} from "react"
    function Demof(){
        useEffect(()=>{
            console.log(999999)
            console.log(document.title)
        })
        return(
            <h2>使用useEffect</h2>
        )
    }
    export default Demof

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ac9844bb83014e489e89bd188e953e84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/07876862503c42b18f453917b40c066a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/513ee7805caa49de9d936eca692b4937.png