87. 说说Context有哪些属性，怎么使用Context开发组件，为什么React并不推荐我们优先考虑使用Context？

[ForeveHG]

1. 什么时候使用Context? 组件树的不同层级需要访问同一批数据时，可以使用Context，Context将数据从上往下广播，组件树中的所有的组件都能访问到这些数据，也能访问到后续的数据更新

2. Context有哪些属性？ Context.Provider: 接收value值，传递给消费组件 Class.contextType : 在类组件中接收value值 Context.Consumer: 在函数组件中接收value值 Context.displayName = '字符串' React DevTools 使用该字符串来确定 context 要显示的内容

3. 怎么使用Context开发组件

   
   const ThemeContext = React.createContext("light");

class ContextTest extends React.Component { render() { return ( <> {/ 使用Context默认值 /}

    {/* 使用Context自定义值 */}
    <ThemeContext.Provider value="dark">
      <Form></Form>
    </ThemeContext.Provider>
  </>
);

} }

class Form extends React.Component { render() { return (

{/* class组件，使用contextType属性 */} {/* 函数组件，使用Context.Consumer */} {/* 函数组件，使用useContext */}

);

} }

class Button extends React.Component { static contextType = ThemeContext; render() { return {this.context}; } }

//在函数组件中使用Context const ButtonFn = () => { return (

{(value) => {value}} ); }; const ButtonFn2 = () => { const context = useContext(ThemeContext); return {context}; }; ``` 4. 为什么React并不推荐我们优先考虑使用Context？ 因为组件复用性会变差