hook组件初步认识,使用

最新推荐文章于 2024-05-07 20:58:24 发布

lxn_zyl

最新推荐文章于 2024-05-07 20:58:24 发布

阅读量484

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/lxn_zyl/article/details/117331502

版权

# hook

是react自16.8版本后新出的一套api,其目的是为了让函数组件拥有全部的react特性.

## 设计思想

函数式编程

## useState

状态管理:

- 语法:`const[value,setValue] = useState(default)`

- 定义:让函数组件拥有和类组件一样的状态

- 数组里的第一个值是渲染到页面上的数据state,后面的值是用来修改前面数据的方法,等价于内组件的setState

- 不能直接修改value 只能用setvalue函数去修改,这样才能让组件进行更新

- - [注意]useState返回的修改函数和类组件setState执行逻辑不一样

- setState是把新旧值合并,useState返回的修改函数是传进来的新值直接把旧值替换

## useEffect 生命周期

定义:把componentDidMount,

componentDidUpdate,

componentWullUnmount,

shouldComponentUpdate合并成一个叫做useEffect函数了

### componentDidMount(页面挂载完成)

```js
useEffect(function(){

    console.log('页面挂载完成')

},[])
```

### componentWillUnmount(卸载)

```js
useEffect(()=>{

        retutn function(){

            //当组件被销毁的时候调用的,在这个函数里做准备卸载的一些事情

            //例如:清除定时器...

        }

    })
```

### componentDidUpdate

```js
useEffect(function(){

    console.log("当props或state发生改变时,这个函数就相当于更新的钩子函数")

})
```

### shouldComponentUpdate

```js
useEffect(()=>{

    console.log("只有'数据'发生改变我才执行")

},['数据'])
```

使用:

//导入hook组件

import React, { useState,useEffect } from 'react'

const App = () => {

    const [data, setData] = useState(1)

    useEffect(()=>{

        console.log('挂载完成')

    },[])

    useEffect(()=>{

        return ()=>{

            console.log('卸载完成')

        }



    })

    useEffect(()=>{

        console.log('更新')

    })

    useEffect(()=>{

        console.log('固定数据发生改变时触发')

    },[data])

    // 写函数时要声明 这和class组件不一样

    const add=()=>{

        setData(data+1)

    }

    return (

        <div>

            {  data }

            <button onClick={add}>++</button>

        </div>

    )

}

export default App