Context

Context
Categories:
Tags:

提供一種傳遞資料方式，不需要透過 props 的層層傳遞到每一層元件

  • Context api 可以說是簡化版的 redux
    • 沒有redux那麼強大可以結合許多redux生態系的middleware﹐例如thunk或saga來做data fetching / 處理side effect
  • 若只是單單想找地方存share data來避掉props drilling的問題﹐那麼context api不失為一個簡單的解法。
  • 寫新元件如果不想要依賴redux的時候﹐可以試著用Context來解。
  • 解决同样的问题：“跨组件层级传递props的效率问题（prop-drilling）”
  • 但不显示该值随时间变化的任何历史记录
  • 订阅了context实例对象的组件在context值变化的时候一定会被强制更新，也就是说没办法跳过更新。
  • 不包括任何副作用和中间件机制。
import { createContext, useState, useEffect } from 'react'

const DataContext = createContext({});

export const DataProvidor = ({children}) => {
  return (
    <DataContext.Providor value={{
      width, search, setSearch
    }}>
      {children}
    </DataContext.Providor>
  )
}

import { useContext } from 'react';
import DataContext from './DataContext';


const { width } = useContext(DataContext);

參考資料

教學影片