react中hooks的使用

作用： 为函数组件提供状态、生命周期等原本 在Class 组件中才提供的功能

• Hooks 只能在函数组件中使用

• 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性

第一个hooks:useState

使用useState为函数组件提供状态

const [count, setCount] = useState(初始数据)

count:状态值（state） setCount: 修改该状态的函数

useState-回调函数格式2

useState((上一次的值) => { return 新值 })

1. 回调函数的返回值就是状态的初始值

2. 该回调函数只会触发一次

useState只会在组件第一次渲染时使用状态的初值，随后都会使用状态的最新值

第二个hooks:useEffect

useEffect被称为副作用

• 主作用：就是根据数据（state/props）渲染 UI

• 副作用：数据（Ajax）请求、手动修改 DOM、localStorage 操作等

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

// 2. 使用useEffect
useEffect(() => {
	console.log('useEffect 1 执行了,可以做副作用')
})
useEffect(() => {
	console.log('useEffect 2 执行了,可以做副作用')
})

执行时机 

1. 组件挂载时，执行一次

2. 组件更新时，可能执行多次

useEffect-设置依赖项

useEffect(() => {
  // 副作用函数的内容
}, [])

1. useEffect没有依赖项，挂载时执行一次,每次更新都会渲染

2. useEffect的依赖项是[ ], 挂载时才执行一次

3. useEffect的依赖项是[count], 挂载时执行一次,当count依赖项改变时就会触发