reactjs - 我什么时候应该在 React 的新上下文 API 中使用 this.context 与 Consumer？

Question

在子组件中使用上下文数据有两种样式:this.context并使用 <myContext.Consumer>{(contextData) => {return(<div>{myContextData}</div>}}</myContext.Consumer>

我什么时候应该使用前者与后者？

Answer 1

在 v16.8.0 及更高版本中，使用上下文的方式不是两种而是三种。选择使用哪一个取决于您的用例。

第一个，即使用 static contextType 是两个中使用起来最简单的一个，它允许您在整个类组件中使用上下文。您可以使用渲染 Prop 模式实现相同的行为，但是您必须将您的组件包装在另一个功能组件中。

因此，尽管是个人喜好问题并且不会对调试性能产生太大影响，但选择很容易做出。

• 如果您只想在组件中使用一个context，您可以使用static contextType 来定义它。
• 但是，如果您希望组件使用多个上下文，则无法使用第一种模式实现，因此您必须使用 render props 模式

上面的一个例子是说你正在使用 ThemeProvider 并且你的组件只是使用你可以使用第一种模式简单地编写它

class MyComponent extends React.Component {
   ...
}
MyComponnet.contextType = ThemeContext;
export default MyComponent

如果你想在 render 方法之外使用 context，你需要像下面这样写 render prop pattern

class MyComponent extends React.Component {
   ...
}

export default (props) => (
    <ThemContext.Consumer>
        {(context) => <MyComponent {...props} context={context} /> 
     <ThemeContext.Consumer>
)

但是假设您想在 MyComponent 中使用两个上下文，即。说一个 ThemeContext 和 ShortCutContext 来听键盘快捷键，你会使用像下面这样的渲染 Prop 来编写它

class MyComponent extends React.Component {
   ...
}

export default (props) => (
    <ShortcutContext.Consumer>
        {(sCon) => (
         <ThemContext.Consumer>
            {(tCon) => <MyComponent {...props} themeContext={tCon} shortcutContext={sCon} /> 
         <ThemeContext.Consumer>
        )}
    </ShortcutContext.Consumer>

)

还有第三种方法是useContext，它允许您使用 Hook 模式在功能组件中使用上下文。如果您正在使用钩子(Hook)编写您的应用程序，您可以使用 useContext 这也允许您在您的应用程序中拥有多个上下文

您可以使用 useContext 如下所示使用多个上下文

const MyComponent = () => {
   const shortcutContext = useContext(ShortcutContext);
   const themeContext = useContext(ThemeContext);
   ...
}