watak

注意:React.PropTypes自从React v15.5以来,它已经进入了一个不同的包。请使用该prop-types库,而不是定义contextTypes。我们提供了一个codemod脚本来自动化转换。

通过React,可以轻松跟踪通过React组件的数据流。当你看一个组件时,你可以看到哪些道具被传递,这使得你的应用程序很容易推理。

在某些情况下,您希望通过组件树传递数据,而不必在每个级别手动传递道具。您可以直接在React中使用强大的“上下文”API执行此操作。

为什么不使用上下文

绝大多数应用程序不需要使用上下文。

如果你希望你的应用程序稳定,不要使用上下文。这是一个实验性的API,它很可能在未来的React版本中被打破。

如果您不熟悉像Redux或MobX这样的状态管理库,请不要使用上下文。对于许多实际应用来说,这些库和它们的React绑定对于管理与许多组件相关的状态是一个很好的选择。Redux很可能是解决问题的正确解决方案,而不是正确的解决方案。

如果您不是经验丰富的React开发人员,请不要使用上下文。通常只有使用道具和状态才能实现功能。

如果您坚持使用上下文而不管这些警告,请尝试将上下文的使用隔离到一个小区域,并尽可能避免直接使用上下文API,以便在API更改时更容易升级。

如何使用上下文

假设你有一个像这样的结构:

class Button extends React.Component { render() { return (  ); }}class Message extends React.Component { render() { return ( 
{this.props.text}
); }}class MessageList extends React.Component { render() { const color = "purple"; const children = this.props.messages.map((message) => ); return
{children}
; }}

在这个例子中,我们手动穿过一个color道具来适当地设计ButtonMessage组件。使用上下文,我们可以自动将它传递给树:

import PropTypes from 'prop-types';class Button extends React.Component { render() { return (  ); }}Button.contextTypes = { color: PropTypes.string};class Message extends React.Component { render() { return ( 
{this.props.text}
); }}class MessageList extends React.Component { getChildContext() { return {color: "purple"}; } render() { const children = this.props.messages.map((message) => ); return
{children}
; }}MessageList.childContextTypes = { color: PropTypes.string};

通过添加childContextTypesgetChildContextMessageList(上下文提供),阵营传递的子树中向下自动信息和任何组分(在这种情况下,Button)可以通过定义访问它contextTypes

如果contextTypes没有定义,那么context将是一个空对象。

亲子合作

Context还可以让你建立一个父母和孩子交流的API。例如,以这种方式工作的一个库是React Router V4:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';const BasicExample = () => (  
  • Home
  • About
  • Topics

);

通过从经过了一些信息Router部分,每个LinkRoute可回传送到含有Router

在使用与此类似的API构建组件之前,请考虑是否有更清晰的替代方案。例如,如果您愿意,您可以将整个React组件作为道具传递。

在生命周期方法中引用上下文

如果contextTypes在组件内定义,则以下生命周期方法将收到附加参数,即context对象:

  • constructor(props, context)

  • componentWillReceiveProps(nextProps, nextContext)

  • shouldComponentUpdate(nextProps, nextState, nextContext)

  • componentWillUpdate(nextProps, nextState, nextContext)

注意:截至React 16,componentDidUpdate不再收到prevContext

在无状态功能组件中引用上下文

无状态的功能组件也可以引用,context如果contextTypes被定义为该功能的属性。以下代码显示了一个Button写入无状态功能组件的组件。

import PropTypes from 'prop-types';const Button = ({children}, context) => ;Button.contextTypes = {color: PropTypes.string};

更新上下文

不要这样做。

React有一个API来更新上下文,但它基本上被打破了,你不应该使用它。

getChildContext功能将在状态或道具改变时被调用。为了更新上下文中的数据,使用this.setState。触发本地状态更新。这将触发一个新的环境,并且变化将被孩子接收。

import PropTypes from 'prop-types'; class MediaQuery extends React.Component { constructor(props) { super(props); this.state = {type:'desktop'}; } getChildContext() { return {type: this.state.type}; } componentDidMount() { const checkMediaQuery = () => { const type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile'; if (type !== this.state.type) { this.setState({type}); } }; window.addEventListener('resize', checkMediaQuery); checkMediaQuery(); } render() { return this.props.children; }} MediaQuery.childContextTypes = { type: PropTypes.string };

的问题是,如果由组分变化,即使用该值后代提供上下文值将不会如果中间父返回更新falseshouldComponentUpdate。这完全无法控制使用上下文的组件,所以基本上无法可靠地更新上下文。这篇博文很好地解释了为什么这是一个问题,以及如何解决这个问题。

Artikel sebelumnya: Artikel seterusnya: