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);

参考资料

教学影片