React Hooks數據管理

什麼是React Hook

Hook 是 React 16.8 的新增特性。它可讓你在不編寫 class 的狀況下使用 state 以及其餘的 React 特性，以及數據狀態共享。

本文僅用於學習過程當中記錄！！！

useState介紹

useState是react自帶的一個hook函數，做用是用來聲明狀態變量

function Example() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => {setCount(count+1)}}>Click me</button>
    </div>
  )
}
複製代碼

useEffect介紹

useEffect代替經常使用生命週期函數，useEffect跟 class 組件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具備相同的用途，只不過被合併成了一個 API，能夠比喻爲它使得函數組件擁有了「生命週期函數」。

function Example() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`useEffect => You cliked ${count}`)
    return () => {
      console.log('==============')
    }
  }, [count])
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => {setCount(count+1)}}>Click me</button>
    </div>
  )
}
複製代碼

• 在useEffect第二個參數爲空時，視圖每次render都會從新執行useEffect的內容，設置爲[]的時候，只有首次會被渲染，設置[count]的時候，在count發生變化才執行useEffect
• 在useEffect中第二個參數設置爲[],而且return一個函數，能夠實現componentWillUnmount

useContext介紹

useContext能夠幫助咱們跨越組件層級直接傳遞變量，實現共享，避免一層層的傳遞狀態。

它對所包含的組件樹提供全局共享數據的

const CountContext = createContext()

function Counter() {
  let count = useContext(CountContext)
  return (<h2>{count}</h2>)
}

function Example() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => {setCount(count+1)}}>Click me</button>
      <CountContext.Provider value={count}>
        <Counter></Counter>
      </CountContext.Provider>
    </div>
  )
}
複製代碼

useReducer介紹

useReducer能夠看作是對 useState 作了一層包裝，讓咱們能夠更直觀的去管理狀態。看下它的使用方法：

function ReducerDemo() {
  const [count, dispatch] = useReducer((state, action) => {
    switch(action.type) {
      case 'add':
        return state+1
      case 'sub':
        return state-1
      default:
        return state
    }
  }, 0)
  return (
    <div>
      <h2>如今計數是：{count}</h2>
      <button onClick={() => {dispatch({
        type: 'add'
      })}}>Increment</button>
      <button onClick={() => {dispatch({
        type: 'sub'
      })}}>Dcrement</button>
    </div>
  )
}
複製代碼

使用useContext和useReducer實現數據管理

新建一個reducer，初始化數據、添加數據處理邏輯，經過useContext包裹組件，使得被包裹的組件能夠獲取數據和dispatch，共享數據爲了組件樹能獲取數據，共享dispatch讓組件樹能夠修改數據狀態信息

import React, { createContext, useReducer } from 'react';
export const CounterContext = createContext({})
export const ADD_COUNTER = 'ADD_COUNTER'
export const DELETE_COUNTER= 'DELETE_COUNTER'

const reducer = (state, action) => {
  switch(action.type) {
    case ADD_COUNTER:
      return action.count + 1
    case DELETE_COUNTER:
      return action.count - 1
    default: 
      return state
  }
}

export const Counter = props => {
  const [count, dispatch] = useReducer(reducer, 0)

  return (
    <CounterContext.Provider value={{
      count, dispatch
    }}>
      {props.children}
    </CounterContext.Provider>
  )
}
複製代碼

ShowData組件和ChangeData組件包裹在Counter內部，所以能夠經過useContext獲取到父組件的數據以及dispatch，而後經過dispatch去更新狀態數據信息

import React, {useContext} from 'react'
import { Counter, CounterContext, ADD_COUNTER, DELETE_COUNTER } from './counter'

function Example() {
  return (
    <div>
      <Counter>
        <ShowData></ShowData>
        <ChangeData></ChangeData>
      </Counter>
    </div>
  )
}

function ShowData() {
  const { count } = useContext(CounterContext)
  return (
    <div>
      當前計數： {count}
    </div>
  )
}

function ChangeData() {
  const { count, dispatch } = useContext(CounterContext)
  return (
    <div>
      <button onClick={() => {dispatch({
        type: ADD_COUNTER,
        count: count
      })}}>增長</button>
      <button onClick={() => {
        dispatch({
          type: DELETE_COUNTER,
          count: count
        })
      }}>減小</button>
    </div>
  )
}

export default Example
複製代碼

經過這些就實現了類Redux的效果以達到數據管理的目的