React Hook 入门到精通（ useState | useReduce、useEffect、useContext、useRef、useCallback | useMemo ）

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

---

useState | useReduce 的使用

---

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

// 创建reduce
const ageReduce = (state, action) => {
  switch (action.type) {
    case 'add':
      return state + 1
    case 'minus':
      return state - 1
    default:
      return state
  }
}

const StateReduce = function () {
  // 基础数据类型推荐使用useState Number、String、Boolean
  const [count, setCount] = useState(0)

  // 复杂类型推荐使用useReduce 如 Object、Array  对应的属性更容易操作
  const [age, ageDispatch] = useReducer(ageReduce, 0)

  const addCount = () => {
    // 第一更新种方式
    // setCount(count + 1)

    // 第二种更新方式
    setCount(count => count + 1)
  }

  /**
   * @type 操作类型
   */
  const setAge = type => {
    ageDispatch({ type })
  }

  return (
    <div>
      <div>count：{count}</div>
      <button onClick={addCount}>addCount</button>
      <div>age：{age}</div>
      <button onClick={setAge.bind(this, 'add')}>addAge</button>
      <button onClick={setAge.bind(this, 'minus')}>minusAge</button>
    </div>
  )
}

export default StateReduce

 附上视频教程(非原创视频)：《useState&useReduce视频教程》

useEffect 的使用

---

• 你可以把 useE