React에서 컨텍스트는 컴포넌트의 각 레이어에 대한 props를 수동으로 추가하지 않고 컴포넌트 트리 간에 데이터를 전송하는 방법입니다. 컨텍스트는 컴포넌트 트리를 통해 레이어별로 props를 명시적으로 전달할 필요 없이 컴포넌트 간에 지정된 값을 공유하는 방법을 제공합니다. .
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
컨텍스트는 각 구성 요소 레이어에 소품을 수동으로 추가하지 않고도 구성 요소 트리 간에 데이터를 전송하는 방법을 제공합니다. 일반적인 React 애플리케이션에서 데이터는 props를 통해 위에서 아래로(상위에서 하위로) 전달되지만 이 접근 방식은 특정 유형의 속성(예: 로케일 기본 설정, UI 테마)에 대해 매우 번거롭습니다. 응용 프로그램. 컨텍스트는 컴포넌트 트리의 각 레벨을 통해 props를 명시적으로 전달하지 않고도 컴포넌트 간에 이러한 값을 공유할 수 있는 방법을 제공합니다.
컨텍스트는 현재 인증된 사용자, 테마 또는 기본 언어와 같은 구성 요소 트리에 "전역"인 데이터를 공유하도록 설계되었습니다. 예를 들어, 아래 코드에서는 "테마" 속성을 통해 버튼 구성 요소의 스타일을 수동으로 조정합니다
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
function Toolbar(props) {
// Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。
// 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
// 因为必须将这个值层层传递所有组件。
return (
<p>
<ThemedButton theme={props.theme} />
</p>
);
}
class ThemedButton extends React.Component {
render() {
return <Button theme={this.props.theme} />;
}
}
// 通过props传递：App -> Toolbar -> ThemedButton
// 如果嵌套很深，那么需要逐层传递props，即使中间不需要该props，显得很繁琐컨텍스트를 사용하여 중간 요소를 통해 소품이 전달되는 것을 피할 수 있습니다
// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（"light"为默认值）。
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
// 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
// 无论多深，任何组件都能读取这个值。
// 在这个例子中，我们将 “dark” 作为当前的值传递下去。
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
return (
<p>
<ThemedButton />
</p>
);
}
class ThemedButton extends React.Component {
// 指定 contextType 读取当前的 theme context。
// React 会往上找到最近的 theme Provider，然后使用它的值。
// 在这个例子中，当前的 theme 值为 “dark”。
static contextType = ThemeContext;
render() {
return <Button theme={this.context} />;
}
}
// 也可以使用 ThemedButto.contextType = ThemeContext; React.createContextReact.createContextconst MyContext = React.createContext(defaultValue);
创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。
只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。这有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。
Context.Provider<MyContext.Provider value={/* 某个值 */}>每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。
Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。
当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。
Class.contextType挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中
import MyContext from './MyContext';
class MyClass extends React.Component {
componentDidMount() {
let value = this.context;
/* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
}
componentDidUpdate() {
let value = this.context;
/* ... */
}
componentWillUnmount() {
let value = this.context;
/* ... */
}
render() {
let value = this.context;
/* 基于 MyContext 组件的值进行渲染 */
}
// 或者如上边例子一样使用 static contextType = MyContext;
}
MyClass.contextType = MyContext;Context.Consumerimport MyContext from './MyContext';
function ToolList() {
return (
<MyContext.Consumer
{value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>
)
}这里，React 组件也可以订阅到 context 变更。这能让你在函数式组件中完成订阅 context。
这需要函数作为子元素（function as a child）这种做法。这个函数接收当前的 context 值，返回一个 React 节点。传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。
Context.displayNamecontext 对象接受一个名为 displayName
const MyContext = React.createContext(/* some value */); MyContext.displayName = 'MyDisplayName'; <MyContext.Provider> // "MyDisplayName.Provider" 在 DevTools 中 <MyContext.Consumer> // "MyDisplayName.Consumer" 在 DevTools 中
Context 객체를 생성합니다. React가 이 Context 객체를 구독하는 구성 요소를 렌더링할 때 구성 요소는 구성 요소 트리에서 자신과 가장 가까운 일치하는 Provider에서 현재 컨텍스트 값을 읽습니다.
defaultValue 매개 변수가 적용됩니다. 이는 구성 요소를 공급자로 래핑하지 않고 테스트하는 데 도움이 됩니다. 참고: 정의되지 않음이 공급자 값에 전달되면 소비자 구성 요소의 defaultValue가 적용되지 않습니다. Context.Providerexport const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export const ThemeContext = React.createContext(themes.dark); // 该处为默认值value 속성을 받아 소비 구성 요소에 전달합니다. 공급자는 여러 소비자 구성 요소와 대응 관계를 가질 수 있습니다. 여러 공급자를 중첩하여 사용할 수도 있으며 내부 레이어가 외부 레이어의 데이터를 덮어씁니다. 값 값이 변경되면 그 내부의 모든 소비 구성 요소가 다시 렌더링됩니다. Provider와 내부 소비자 구성 요소 모두 shouldComponentUpdate 함수의 적용을 받지 않으므로 상위 구성 요소가 업데이트를 종료하더라도 소비자 구성 요소를 업데이트할 수 있습니다. Class.contextType클래스에 마운트된 contextType 속성은 React.createContext() Context 객체에 의해 생성된 속성으로 다시 할당됩니다. 이를 통해 this.context를 사용하여 가장 최근 컨텍스트의 값을 사용할 수 있습니다. 렌더링 함수
import { ThemeContext } from './theme-context';
class ThemedButton extends React.Component {
render() {
let props = this.props;
// 获取到ThemeContext中的默认值
let theme = this.context;
return (
<button
{...props}
style={{backgroundColor: theme.background}}
/>
);
}
// static contextType = ThemeContext;
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;Context.Consumerimport { ThemeContext, themes } from './theme-context';
import ThemedButton from './themed-button';
// 一个使用 ThemedButton 的中间组件
function Toolbar(props) {
return (
<ThemedButton onClick={props.changeTheme}>
Change Theme
</ThemedButton>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: themes.light,
};
this.toggleTheme = () => {
this.setState(state => ({
theme: state.theme === themes.dark ? themes.light : themes.dark,
}));
};
}
render() {
// 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值，
// 而外部的组件使用默认的 theme 值
return (
<Page>
<ThemeContext.Provider value={this.state.theme}>
<Toolbar changeTheme={this.toggleTheme} />
</ThemeContext.Provider>
<Section>
<ThemedButton />
</Section>
</Page>
);
}
}
ReactDOM.render(<App />, document.root);
// 使用ThemeContext.Provider包裹的组件，可以消费到ThemeContext中的value
// 即Toolbar、ThemedButton中都可以使用this.context来获取到value
// 注意观察，更新state的方法是通过props向下传递，由子孙组件触发更新，下面会讲到通过context的方式传递更新函数value 값은 구성 요소 트리에서 이 컨텍스트에 가장 가까운 공급자가 제공한 value 값과 동일합니다. 해당 공급자가 없는 경우 value 매개변수는 createContext()에 전달된 defaultValue와 동일합니다.
Context.displayName컨텍스트 개체는 문자열 유형인 displayName이라는 속성을 허용합니다. React DevTools는 이 문자열을 사용하여 표시할 컨텍스트를 결정합니다. 다음 구성 요소는 DevTools에서 MyDisplayName으로 표시됩니다// 确保传递给 createContext 的默认值数据结构是调用的组件（consumers）所能匹配的！
export const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {}, // 定义更新主题的方法，向下传递
});
import { ThemeContext } from './theme-context';
function ThemeTogglerButton() {
// Theme Toggler 按钮不仅仅只获取 theme 值，它也从 context 中获取到一个 toggleTheme 函数（下面app.js部分）
return (
<ThemeContext.Consumer>
{({theme, toggleTheme}) => (
<button onClick={toggleTheme} style={{backgroundColor: theme.background}}>
Toggle Theme
</button>
)}
</ThemeContext.Consumer>
);
}
export default ThemeTogglerButton;import { ThemeContext, themes } from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';
class App extends React.Component {
constructor(props) {
super(props);
this.toggleTheme = () => {
this.setState(state => ({
theme: state.theme === themes.dark ? themes.light : themes.dark,
}));
};
// State 也包含了更新函数，因此它会被传递进 context provider。
this.state = {
theme: themes.light,
toggleTheme: this.toggleTheme, // 定义更新函数，通过context方式向下传递
};
}
render() {
// 整个 state 都被传递进 provider
return (
<ThemeContext.Provider value={this.state}>
<Content />
</ThemeContext.Provider>
);
}
}
function Content() {
return (
<p>
<ThemeTogglerButton />
</p>
);
}
ReactDOM.render(<App />, document.root);import { ThemeContext, themes } from './theme-context';
import ThemedButton from './themed-button';
// 一个使用 ThemedButton 的中间组件
function Toolbar(props) {
return (
<ThemedButton onClick={props.changeTheme}>
Change Theme
</ThemedButton>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: themes.light,
};
this.toggleTheme = () => {
this.setState(state => ({
theme: state.theme === themes.dark ? themes.light : themes.dark,
}));
};
}
render() {
// 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值，
// 而外部的组件使用默认的 theme 值
return (
<Page>
<ThemeContext.Provider value={this.state.theme}>
<Toolbar changeTheme={this.toggleTheme} />
</ThemeContext.Provider>
<Section>
<ThemedButton />
</Section>
</Page>
);
}
}
ReactDOM.render(<App />, document.root);
// 使用ThemeContext.Provider包裹的组件，可以消费到ThemeContext中的value
// 即Toolbar、ThemedButton中都可以使用this.context来获取到value
// 注意观察，更新state的方法是通过props向下传递，由子孙组件触发更新，下面会讲到通过context的方式传递更新函数在上面的例子中，我们通过 props 的方式向下传递一个更新函数，从而改变 App 中 themes 的值。我们知道，从一个在组件树中嵌套很深的组件中更新 context 是很有必要的。在这种场景下，你可以通过 context 传递一个函数，使得 consumers 组件更新 context
theme-context.js
// 确保传递给 createContext 的默认值数据结构是调用的组件（consumers）所能匹配的！
export const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {}, // 定义更新主题的方法，向下传递
});theme-toggler-button.js
import { ThemeContext } from './theme-context';
function ThemeTogglerButton() {
// Theme Toggler 按钮不仅仅只获取 theme 值，它也从 context 中获取到一个 toggleTheme 函数（下面app.js部分）
return (
<ThemeContext.Consumer>
{({theme, toggleTheme}) => (
<button onClick={toggleTheme} style={{backgroundColor: theme.background}}>
Toggle Theme
</button>
)}
</ThemeContext.Consumer>
);
}
export default ThemeTogglerButton;app.js
import { ThemeContext, themes } from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';
class App extends React.Component {
constructor(props) {
super(props);
this.toggleTheme = () => {
this.setState(state => ({
theme: state.theme === themes.dark ? themes.light : themes.dark,
}));
};
// State 也包含了更新函数，因此它会被传递进 context provider。
this.state = {
theme: themes.light,
toggleTheme: this.toggleTheme, // 定义更新函数，通过context方式向下传递
};
}
render() {
// 整个 state 都被传递进 provider
return (
<ThemeContext.Provider value={this.state}>
<Content />
</ThemeContext.Provider>
);
}
}
function Content() {
return (
<p>
<ThemeTogglerButton />
</p>
);
}
ReactDOM.render(<App />, document.root);为了确保 context 快速进行重渲染，React 需要使每一个 consumers 组件的 context 在组件树中成为一个单独的节点
// Theme context，默认的 theme 是 "light" 值
const ThemeContext = React.createContext('light');
// 用户登录 context
const UserContext = React.createContext({
name: 'Guest',
});
class App extends React.Component {
render() {
const { signedInUser, theme } = this.props;
// 提供初始 context 值的 App 组件
return (
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={signedInUser}>
<Layout />
</UserContext.Provider>
</ThemeContext.Provider>
);
}
}
function Layout() {
return (
<p>
<Sidebar />
<Content />
</p>
);
}
// 一个组件可能会消费多个 context
function Content() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}如果两个或者更多的 context 值经常被一起使用，那你可能要考虑一下另外创建你自己的渲染组件，以提供这些值。
因为 context 会使用参考标识（reference identity）来决定何时进行渲染，这里可能会有一些陷阱，当 provider 的父组件进行重渲染时，可能会在 consumers 组件中触发意外的渲染。举个例子，当每一次 Provider 重渲染时，以下的代码会重渲染所有下面的 consumers 组件，因为 value 属性总是被赋值为新的对象
class App extends React.Component {
render() {
return (
<MyContext.Provider value={{something: 'something'}}>
<Toolbar />
</MyContext.Provider>
);
}
}为了防止这种情况，将 value 状态提升到父节点的 state 里
class App extends React.Component {
constructor(props) {
super(props);
// 多次渲染，state 会被保留，当value不变时，下面的 consumers 组件不会重新渲染
this.state = {
value: {something: 'something'},
};
}
render() {
return (
<Provider value={this.state.value}>
<Toolbar />
</Provider>
);
}
}【相关推荐：javascript视频教程、web前端】
위 내용은 반응의 맥락은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
