【Day 23】React 关於 Hook(3)

关於 Hook 的方法与实作

useContext

useContext 可以使元件跨越层级直接传递变量，与 redux 不同的是，useContext 解决的是元件间传值问题，redux 则是统一控管状态

下方程序是以计数器为例，在一开始调用 createContext()方法建立 Context，而透过 <Context.Provider>把需要传递的资料带入 Context 中，在 Counter 中可以藉由useContext(CountContext) 去取得 Provider 带进来的内容。

import React, { useState, useContext, createContext } from 'react';

const CountContext = createContext();

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

function Example() {
  const [ count, setCount ] = useState(0);
  return (
    <div>
      <p>你已经点击了{count}次</p>
      <button onClick={() => {setCount(count+1)}}>点击</button>
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
  )
}

export default Example

useReducer

Javascript 里 Reducer 的延伸，在 Redux 里也有提及，是一个纯函数(state, action) => state
可以透过 action 的传递，更新逻辑的 State

还记得 Redux 里提的 Reducer?

下方程序就是 Reducer，由 State 与 Action 组成，经由 Action 的类型去回覆 State 的变化

function calculateReducer(state, action) {
    switch(action.type) {
      case 'ADD':
        return state + 1;
      case 'SUB':
        return state - 1;
      default:
        return state;
    }
}

useReducer 如何使用？

下方程序就是以计数器为例子，眼尖的读者会发现其实写法与 Redux 真的差不多

档案位置 src/Example.js:

import React, { useReducer } from 'react';

function Example() {
  const [ count, dispatch ] = useReducer((state, action) => {
    switch (action){       // 这里要注意，不是使用 action.type 而是使用 action 
      case 'ADD':
        return state + 1
      case 'SUB':
        return state - 1
      default:
        return state
    }
  }, 1000)   // 预设 count 初始值为 1000
  return (
    <div>
      <h2>现在分数是 {count} </h2>
      <button onClick={()=>dispatch('ADD')}>增加</button>
      <button onClick={()=>dispatch('SUB')}>减少</button>
    </div>
  )
}

export default Example