React Hooks

basic hooks

• useState
• useEffect
• useContext

useState

useState接收一个参数，返回的是一个数组，参数表示初始值，数组的第1项就是定义的变量，第2项就是改变变量的方法。
参数可以是基本数据类型，如string、number，也可以是复合数据类型，如array，object等，

useEffect

在一个组件的声明周期函数里可以做很多事情, React 在 Hooks 出现之前会用

• componentWillMount 组件即将挂载
• componentDidMount 组件完成挂载
• componentDidUpdate 组件完成更新
• componentWillUnmount 组件即将销毁

等的一些生命周期函数

在 Hooks 出现之后, 就可以用 useEffect 函数来代替一些生命周期函数

  useEffect(() => {console.log('我到User页面了')return () => {console.log('我走了, User页面')}})

在未传入第二个参数时，每次state修改会触发绑定解绑 我来了和我走了事件

它是一个数组，数组中可以写入很多状态对应的变量, 意思是当状态值发生变化时，我们才进行解绑。但是当传空数组[]时，就是当组件将被销毁时才进行解绑，这也就实现了componentWillUnmount的生命周期函数

useEffect 实现生命周期的三种方式:

• 作为 componentDidMount 使用, [] 作为第二个参数
• 作为 componentDidUpdate 使用, 可指定依赖
• 作为 componentWillUnmount 使用, 通过 return
• 三种状态可同时存在

如果出现了多个 useEffect, 那么会按顺序执行

useContext 和 useReducer 实现 Redux

import { createContext, useContext, useState } from "react"
//新增
const CountContext = createContext()
const Counter = () => {const count = useContext(CountContext)return (<h2>{count}</h2>)
}
const ContextHooks = () => {const [count, setCount] = useState(0)return (<div><p>{count}</p><button onClick={() => { setCount(count + 1) }}>+1</button><CountContext.Provider value={count}><Counter></Counter></CountContext.Provider></div>)
}
export default ContextHooks

把count变量允许跨层级实现传递和使用了, 在父组件 count 变化的时候子组件 Counter 也可以接收到了

和props进行传递参数的区别

useContext可以爷孙组件传递，只有一层当然props方便

useReducer

useReducer 和 Redux 的 Reducer 类似, 参数是一个回调函数, 分别接收 state(数据), 和 action(对数据进行某种操作的描述)

import { useReducer } from 'react'
const UseReducer = () => {const [count, dispatch] = useReducer((state, action) => {switch (action) {case 'add':return state + 1case 'sub':return state - 1default:return state}}, 0)return (<><div><p>{count}</p><button onClick={() => dispatch('add')}>+1</button><button onClick={() => dispatch('sub')}>-1</button></div></>)
}
export default UseReducer