react中的Context是什么？

SUNYIMIN commented 4 years ago

Context主要是为了解决在每一次层级手动的传递props的问题。

第一步：创建一个context的实例；

import React from 'react'

// 创建context实例
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});

export default ThemeContext

第二步：通过ThemeContext.provider包裹父类组件并通过value传值

<ThemeContext.Provider value={{background: 'green', color: 'white'}}>
         <Header />
 </ThemeContext.Provider>

第三步：需要用到数据的子组件通过ThemeContext.Consumer获取

  <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>

SUNYIMIN commented 4 years ago

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递props

SUNYIMIN commented 4 years ago

context的缺点：react组件树种某个上级组件shouldComponetUpdate 返回false,当context更新时，不会引起下级组件更新错误

SUNYIMIN / react-review

react中的Context是什么？ #8