Question

我在github上看到了一些使用不同类型道具的代码示例我看到了childContextTypes和context 但实施情况有所不同，但用法看起来相似一些代码如下所示：

propTypes: {
        a: React.PropTypes.string
    },
    childContextTypes: {
        a: React.PropTypes.string
    },
    getChildContext() {
        return {
            a: this.props.a
        }
}

contextTypes: {
        a: React.PropTypes.string,
        b: React.PropTypes.string
    },
    render() {
        return (
            <div>
                Three
                ({this.context.a}, {this.context.b})
            </div>
        );
}

我已经在网上和堆栈溢出中读到了它，但无法理解它究竟是什么以及在何处或为何使用它？
为什么还有更多props然后contextTypes？

的示例

Answer 1

更新 - 2018年3月29日
由于反应v16.3.0，一个新的上下文API被发布并被认为是安全的＃34;使用。虽然你仍然应该think twice before using it：

当某些数据需要被不同嵌套级别的许多组件访问时，主要使用上下文。谨慎应用它因为它使组件重用更加困难。

如果您只想避免将一些道具传递到多个级别，则组件组合通常比上下文更简单。

在您进一步阅读之前，让我引用React context DOCS

中的内容

如果您希望应用程序稳定，请不要使用上下文。它是一个实验API，它很可能在未来的版本中破坏反应。

现在它!safe进一步阅读您可以使用context API访问父作用域中存在的数据，而不将其传递给子组件。
如果您不想在每个级别手动传递数据，这非常有用例如，在这种情况下：

<Root/>组件，用于呈现子<List/>组件。
<List/>组件呈现Item个组件
<Item/>呈现<Button/>（以及其他组件）。

现在我们可以说Button组件需要Root组件中的某些数据，例如isEnabled，这将提供disabled或Enabled {{1 }}。

此类数据设置在Button的顶级组件上，但为了将其传递给<Root/>组件，我们需要在每个级别上传递它：

Button

嗯，这对于树下的所有其他组件来说有点乏味和无关紧要使用<Root/> -> <List isEnabled /> -> <Item isEnabled /> -> <Button isEnabled/> API，您可以＆＃34;跳过＆＃34;此数据流将此数据作为prop传递，并将此数据公开在顶级context组件的context对象中，然后通过{{1}直接在Root组件中访问它对象。您可以将其视为Button位于父组件和子组件的共享范围内。

您也可以执行Parent-Child Coupling，而且正如文档所提到的，像react-router这样的某些库使用此API来将数据从子组件向上传递到容器。

Answer 2

上下文在使用和定义方面与Props完全不同。

在哪里使用它？好吧，如果没有它可以生存，那就意味着you don't really need it。

如果他们“要求”，那么上下文值将从父级 - 已声明的 - 传递，并且可供所有子级访问，所有子级都可以在整个应用树中访问。

一个很好的例子是Redux中的<Provider />如何工作，所以你声明了很多子节点，并且连接的组件（你在connect()内传递的组件内部都要求这个上下文，所以无论在哪里声明，如果此组件在Provider内，它可以访问Provider上下文。并且您不必通过组件手动传递所有商店。

class MyProvider extends React.Component {
  getChildContext() {
    return {
      color: "#6257af"
    }
  }
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

MyProvider.childContextTypes = {
  color: window.PropTypes.string
}

class Main extends React.Component {
  render() {
    return (
      <Text />
    )
  }
}

class Text extends React.Component {
  render() {
    return (
      <p style={{ color: this.context.color }}>Hi! Context color {this.context.color}</p>
    )
  }
}

Text.contextTypes = {
  color: window.PropTypes.string
}

ReactDOM.render(
<MyProvider>
  <Main />
</MyProvider>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
  <div id="root"></div>

希望有所帮助：）

Context和childContextTypes

2 个答案: