You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
6.8 KiB
215 lines
6.8 KiB
7 years ago
|
---
|
||
|
id: legacy-context
|
||
|
title: Legacy Context
|
||
|
permalink: docs/legacy-context.html
|
||
|
---
|
||
|
|
||
|
> This API is deprecated as of React 16.3.
|
||
|
>
|
||
|
> The API will be supported in all 16.x releases, but applications using it should migrate to the [new API](/docs/context.html). The experimental API lacked a safe mechanism to update context. Version 16.3 introduced a new context API that is more efficient and supports both static type checking and deep updates.
|
||
|
|
||
|
## How To Use Context
|
||
|
|
||
|
> This section documents a deprecated API. See the [new API](/docs/context.html).
|
||
|
|
||
|
Suppose you have a structure like:
|
||
|
|
||
|
```javascript
|
||
|
class Button extends React.Component {
|
||
|
render() {
|
||
|
return (
|
||
|
<button style={{background: this.props.color}}>
|
||
|
{this.props.children}
|
||
|
</button>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class Message extends React.Component {
|
||
|
render() {
|
||
|
return (
|
||
|
<div>
|
||
|
{this.props.text} <Button color={this.props.color}>Delete</Button>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class MessageList extends React.Component {
|
||
|
render() {
|
||
|
const color = "purple";
|
||
|
const children = this.props.messages.map((message) =>
|
||
|
<Message text={message.text} color={color} />
|
||
|
);
|
||
|
return <div>{children}</div>;
|
||
|
}
|
||
|
}
|
||
|
```
|
||
|
|
||
|
In this example, we manually thread through a `color` prop in order to style the `Button` and `Message` components appropriately. Using context, we can pass this through the tree automatically:
|
||
|
|
||
|
```javascript{6,13-15,21,28-30,40-42}
|
||
|
import PropTypes from 'prop-types';
|
||
|
|
||
|
class Button extends React.Component {
|
||
|
render() {
|
||
|
return (
|
||
|
<button style={{background: this.context.color}}>
|
||
|
{this.props.children}
|
||
|
</button>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
Button.contextTypes = {
|
||
|
color: PropTypes.string
|
||
|
};
|
||
|
|
||
|
class Message extends React.Component {
|
||
|
render() {
|
||
|
return (
|
||
|
<div>
|
||
|
{this.props.text} <Button>Delete</Button>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class MessageList extends React.Component {
|
||
|
getChildContext() {
|
||
|
return {color: "purple"};
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
const children = this.props.messages.map((message) =>
|
||
|
<Message text={message.text} />
|
||
|
);
|
||
|
return <div>{children}</div>;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
MessageList.childContextTypes = {
|
||
|
color: PropTypes.string
|
||
|
};
|
||
|
```
|
||
|
|
||
|
By adding `childContextTypes` and `getChildContext` to `MessageList` (the context provider), React passes the information down automatically and any component in the subtree (in this case, `Button`) can access it by defining `contextTypes`.
|
||
|
|
||
|
If `contextTypes` is not defined, then `context` will be an empty object.
|
||
|
|
||
|
> Note:
|
||
|
>
|
||
|
> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types) to define `contextTypes`.
|
||
|
>
|
||
|
> We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion.
|
||
|
|
||
|
### Parent-Child Coupling
|
||
|
|
||
|
> This section documents a deprecated API. See the [new API](/docs/context.html).
|
||
|
|
||
|
Context can also let you build an API where parents and children communicate. For example, one library that works this way is [React Router V4](https://reacttraining.com/react-router):
|
||
|
|
||
|
```javascript
|
||
|
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
|
||
|
|
||
|
const BasicExample = () => (
|
||
|
<Router>
|
||
|
<div>
|
||
|
<ul>
|
||
|
<li><Link to="/">Home</Link></li>
|
||
|
<li><Link to="/about">About</Link></li>
|
||
|
<li><Link to="/topics">Topics</Link></li>
|
||
|
</ul>
|
||
|
|
||
|
<hr />
|
||
|
|
||
|
<Route exact path="/" component={Home} />
|
||
|
<Route path="/about" component={About} />
|
||
|
<Route path="/topics" component={Topics} />
|
||
|
</div>
|
||
|
</Router>
|
||
|
);
|
||
|
```
|
||
|
|
||
|
By passing down some information from the `Router` component, each `Link` and `Route` can communicate back to the containing `Router`.
|
||
|
|
||
|
Before you build components with an API similar to this, consider if there are cleaner alternatives. For example, you can pass entire React components as props if you'd like to.
|
||
|
|
||
|
### Referencing Context in Lifecycle Methods
|
||
|
|
||
|
> This section documents a deprecated API. See the [new API](/docs/context.html).
|
||
|
|
||
|
If `contextTypes` is defined within a component, the following [lifecycle methods](/docs/react-component.html#the-component-lifecycle) will receive an additional parameter, the `context` object:
|
||
|
|
||
|
- [`constructor(props, context)`](/docs/react-component.html#constructor)
|
||
|
- [`componentWillReceiveProps(nextProps, nextContext)`](/docs/react-component.html#componentwillreceiveprops)
|
||
|
- [`shouldComponentUpdate(nextProps, nextState, nextContext)`](/docs/react-component.html#shouldcomponentupdate)
|
||
|
- [`componentWillUpdate(nextProps, nextState, nextContext)`](/docs/react-component.html#componentwillupdate)
|
||
|
|
||
|
> Note:
|
||
|
>
|
||
|
> As of React 16, `componentDidUpdate` no longer receives `prevContext`.
|
||
|
|
||
|
### Referencing Context in Stateless Functional Components
|
||
|
|
||
|
> This section documents a deprecated API. See the [new API](/docs/context.html).
|
||
|
|
||
|
Stateless functional components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows a `Button` component written as a stateless functional component.
|
||
|
|
||
|
```javascript
|
||
|
import PropTypes from 'prop-types';
|
||
|
|
||
|
const Button = ({children}, context) =>
|
||
|
<button style={{background: context.color}}>
|
||
|
{children}
|
||
|
</button>;
|
||
|
|
||
|
Button.contextTypes = {color: PropTypes.string};
|
||
|
```
|
||
|
|
||
|
### Updating Context
|
||
|
|
||
|
> This section documents a deprecated API. See the [new API](/docs/context.html).
|
||
|
|
||
|
Don't do it.
|
||
|
|
||
|
React has an API to update context, but it is fundamentally broken and you should not use it.
|
||
|
|
||
|
The `getChildContext` function will be called when the state or props changes. In order to update data in the context, trigger a local state update with `this.setState`. This will trigger a new context and changes will be received by the children.
|
||
|
|
||
|
```javascript
|
||
|
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
|
||
|
};
|
||
|
```
|
||
|
|
||
|
The problem is, if a context value provided by component changes, descendants that use that value won't update if an intermediate parent returns `false` from `shouldComponentUpdate`. This is totally out of control of the components using context, so there's basically no way to reliably update the context. [This blog post](https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076) has a good explanation of why this is a problem and how you might get around it.
|