React Hooks

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 + 1
      case 'sub':
        return state - 1
      default:
        return state
    }
  }, 0)
  return (
    <>
      <div>
        <p>{count}</p>
        <button onClick={() => dispatch('add')}>+1</button>
        <button onClick={() => dispatch('sub')}>-1</button>
      </div>
    </>
  )
}
export default UseReducer