New Context API
Provider【context的生产者组件】
- createContext 创建一个Context对象，订阅了整个Context对象的组件，会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值。
- Context.Provider 父Context对象返回的Provider组件，允许消费组件订阅context的变化。
Consumer【context的消费者组件】
- Class.contextType 申明了contextType属性的组件会被赋值一个Context对象，组件内的this.context可以访问最近Context上的值。
- Context.Consumer 函数组件订阅Context对象的方式，如同contextType之于Class组件。
New Context API-实战
import React, { Component } from 'react';
import CustomContext from './components/button-context';
import NewButton from './components/new-button';
export default class NewContext extends Component {
constructor(props) {
super(props);
this.state = {
color: '#28a745',
};
}
render() {
const { color } = this.state;
// Provider【context的生产者组件】
return (
<CustomContext.Provider value={color}>
<NewButton>new context api</NewButton>
</CustomContext>
);
}
}import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CustomContext from '../button-context';
export default class NewButton extends Component {
// 【context的消费者组件】
static contextType = CustomContext;
static propTypes ={
children: PropTypes.string,
}
static defaultProps = {
children: '默认文案',
}
render() {
const { children } = this.props;
return (
<button type="button" style={{color: this.context }}>
{children}
</button>
);
}
}import React from 'react';
const CustomContext = React.createContext();
export default CustomContext;文章来源地址https://www.toymoban.com/news/detail-726274.html
文章来源：https://www.toymoban.com/news/detail-726274.html
到了这里，关于React 状态管理 - Context API 前世今生（下）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
