hooks如何给函数组件提供状态以及生命周期

1.hooks实现给函数组件提供状态

1.1useState使用步骤

使用useState 就可以让函数组件拥有状态了。使用步骤如下：

// 1.导入useState
import {useState} from 'react'

// 2.调用useState并传入初始值
const [count,setCount] = useState(null)

// 3.第一个参数count是你设置的状态，第二个setCount是设置状态的函数 react中状态不可变 
实例如下

import { useState } from 'react'

import reactDom from 'react-dom'

export default function App () {
  const [count, setCount] = useState(0)
  //   console.log(res)
  return (
    <div>
      <h1>第一个hooks count:{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1)
        }}>
        count+1
      </button>
    </div>
  )
}
reactDom.render(<App />, document.getElementById('root'))


  

1.2useState的注意点：

使用useState有两种写法： 

1.useState(初始值) 这种写法如果写多个会合并操作 

2.useState(()=>{    这种写法写多个可以实现累加的效果
    return 初始值
})

2.useEffect副作用

2.1什么是副作用：

与渲染页面无关的操作就被称为副作用

2.2副作用有什么用处

副作用的用处就是可以给函数组件提供或者说模拟生命周期钩子函数

2.3副作用基本用法

1.导入useEffect
import {useEffect} form 'react'

2.基本使用useEffect

useEffect(()=>{
    做一些副作用
})

3.useEffect的清理函数用法

useEffect(()=>{
    副作用代码

    return ()=>{
    这是清理函数
}
})

4.执行时机：
useEffect在页面挂载会执行一次 页面更新时也会执行一次

2.4useEffect依赖项

作用：使用依赖项可以模拟生命周期钩子函数

1.依赖项：不写=>挂载更新阶段都会执行
    useEffect(()=>{
        console.log('挂载更新都执行')  //挂载更新都会执行
    })
  
2.依赖项：[]=>只执行第一次类似于componentDidMount
    useEffect(()=>{
        console.log('挂载钩子')      //只会在挂载阶段执行一次
    },[])

3.依赖项：[]但副作用中return一个清理函数=>销毁前类似于componentWillMount
    useEffect(()=>{
        return ()=>{
            consoloe.log('销毁钩子')
        }
    },[])

4.依赖项：[参数1，参数2...]=>依赖项中的参数更新都会执行
    useEffect(()=>{
        console.log('依赖具体的参数') //参数更新执行
    })

5.依赖项执行时机
 第一：挂载阶段是必然会执行一次的
 第二：清理函数在下一个副作用函数执行之前执行