useContext

Context 简介#

React.Context 是设计用来跨组件传递数据用的。我们可以先简单看一下 React.Context 的数据结构。

node -e "console.log(require('react').createContext({ name: 'foo' }))"

{
  '$$typeof': Symbol(react.context),
  _calculateChangedBits: null,
  _currentValue: { name: 'foo' },
  _currentValue2: { name: 'foo' },
  _threadCount: 0,
  Provider: { '$$typeof': Symbol(react.provider), _context: [Circular] },
  Consumer: {
    '$$typeof': Symbol(react.context),
    _context: [Circular *1],
    _calculateChangedBits: null
  },
  _currentRenderer: null,
  _currentRenderer2: null
}

回到 PPT 页面，转到 Context 运行原理的部分

Context 的跨组件传递及更新#

Live Editor

Result

尝试减少组件重绘的范围