Day23-资料操作

前言

在Day20我们学会了使用Props传递资料，但你是否想过，如果今天我们的组件阶层过於多，这样会导致一些不必要的组件，也要帮忙传递资料。

目前我要从A组件传递资料到D组件，但中间的B、C组件是不需要这些资料的。

於是React就有了全域资料的组件，方便我们使用。

今日会学习到的Hooks

useContext
useReducer

create Context

Context docs
首先我们必须建立一个全局的组件，从React引入createContext

//globalName.js
import { createContext } from "react";

export const nameContext = createContext(null)

然後我们需要把这个组件变成父组件。

这边我们把刚刚的组件引入，并且在组件中我们要使用 .Provider，并且我们要给予value

// App.js
import React from 'react'
import Child from '../Components/Child'
import { nameContext } from '../GlobalName'
function App() {
   const value = 'Ian'

  return (
    <nameContext.Provider value={value} >
      <Child />
    </nameContext.Provider>
  )
}

export default App

useContext

到了我们的子组件，也必须把全局的组件引入，并且使其变成参数传入Hook

syntax

const value = useContext(MyContext);

import React, {useContext} from 'react'
import {nameContext} from '../GlobalName'
function Child() {
  const name = useContext(nameContext)
  return (
    <div>
      My name is : {name}
    </div>

  )
}

export default Child

我们可以把useContext给值的name打印出来，可以发现是传入的value。当然，你传入何种资料型态，取用时也是同等的。

useReducer

useReducer docs
我们前面有学过useState来使用组件内的状态，而现在要学的useReducer不同於useState直接操作数值的方式。

而是使用触发动作，进而达到目标与需求。

这也可以解决当一次操作会有许多动作时，使用useReducer可以更好的了解资料流的去向。

syntax

const [state, dispatch] = useReducer(reducer, initialArg, init);

create reducer function

首先我们建立一个reducer的函式。

当然，你要取其他名子也可以，但建议还是维持reducer会比较明确。

// reducer.js
const countReducer = (state, action) => {
  switch (action) {
    case 'increase':
      return state + 1
    case 'decrease':
      return state - 1 
    default:
      return state  
  }
}
export default countReducer

并且把countReducer引入进我们的主程序

// App.js

import React, {useReducer} from 'react'
import countReducer from '../reducer'
function App() {
  let initialize = 0
  const [state, dispatch] = useReducer(countReducer,initialize)
  return (
    <div>
      <button onClick={() => dispatch('increase')}>Add</button>
      <button onClick={() => dispatch('decrease')}>Minus</button>
      <p>{state}</p>
    </div>
  )
}

export default App

而我们在onClick事件中各自绑定我们预设好的dispatch，各司其职，使其有很明确的操作动作。