React context API

1. 以Provider提供的值為準
2. createContext 後面提供的預設值，是給上層如果沒有找對應的Provider的component話用的。
3. 每一個context物件都有一個Provider，React會讓它的吸精元件訂閱這些context
4. 需要注意reference identity，避免不必要的re-render

實際使用的教學：
今天我要寫一個🌲🐦🐦的context。

1. 首先先來createContext

const TreeBirdBirdContext = React.createContext(['🌲', '🐦']);

2. 之後來做它的 Provider

const TreeBirdBridProvider = ({children}) => {
  const [state, setState] = useState(['🌲', '🐦', '🐦'])
  return (
    <TreeBirdBirdContext.Provider value={[state, setState]}>
      {children}
    </TreeBirdBirdContext.Provider>
  )
}

3. 接著是顯示畫面、操作的邏輯

const Controller = () => {
  const [state, setState] = useContext(TreeBirdBirdContext);

  const addBird = () => {
    setState(oldArray => [...oldArray, '🐦']);
  }
  return (
    <>
      <div>{state}</div>
      <button onClick={() => addBird()}>Click Me</button>
    </>
  )
}

4. 接下來把他們包起乃

const App = () => {
  return (
    <TreeBirdBridProvider>
      <Controller />
    </TreeBirdBridProvider>
  )
}
export default App;

然後就大功告成溜！

在這裡可以看