使用React.createContext()在React应用中传递数据，nolan出品

本文主要是介绍使用React.createContext()在React应用中传递数据，nolan出品，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

React.createContext() 是React中的一个API，用于创建一个“上下文”，这是一种在组件树中传递数据的方法，而无需手动将props逐级传递。

这个方法接受一个参数，即默认值，当组件在树中上层没有找到对应的Provider时，就会使用这个默认值。

React.createContext() 返回一个对象，该对象包含两个React组件：Provider和Consumer。

Provider组件接受一个名为value的prop，你可以将任何数据类型的值传递给它。这个值将会被Provider的所有后代Consumer组件所消费。

Consumer组件使用一个函数作为子组件，这个函数接收当前的context值并返回一个React节点。当Provider的value值发生变化时，Consumer组件都将重新渲染。

在React新的版本中，也可以使用useContext这个Hook来消费context。

这个API的主要用途是共享可以被视为全局的数据，例如当前认证的用户、主题或首选语言等。

怎么使用

下面是一个简单的React应用，用React.createContext()创建了一个主题上下文，并在组件树中使用了Provider和Consumer。

import React from 'react';// 创建一个主题上下文，默认值为“light”
const ThemeContext = React.createContext('light');class App extends React.Component {render() {// 使用Provider组件传递当前的主题给子组件树return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);}
}// Toolbar组件并不关心主题，但是它包含了使用主题的子组件
function Toolbar() {return (<div><ThemedButton /></div>);
}// ThemedButton组件使用Consumer获取当前的主题
function ThemedButton() {return (<ThemeContext.Consumer>{theme => <button theme={theme}>我是{theme}主题的按钮</button>}</ThemeContext.Consumer>);
}export default App;

在这个例子中，我们创建了一个ThemeContext，并在App组件中使用ThemeContext.Provider组件传递了一个主题值（dark）。然后，在ThemedButton组件中，我们使用了ThemeContext.Consumer组件来获取当前的主题值，并将其应用于按钮。

这样，我们就可以在组件树中任何地方使用Consumer组件来访问主题值，而无需手动将主题值作为prop逐层传递。如果我们想要更改主题，只需更改App组件中Provider的value即可，所有的Consumer组件都会自动更新。

传递对象例子

以下是一个使用React.createContext()传递对象的示例：

import React from 'react';// 创建一个主题上下文，默认值包含主题和切换主题的方法
const ThemeContext = React.createContext({theme: 'light',toggleTheme: () => {},
});class App extends React.Component {constructor(props) {super(props);this.state = {theme: 'light',toggleTheme: this.toggleTheme,};}toggleTheme = () => {this.setState(prevState => ({theme: prevState.theme === 'light' ? 'dark' : 'light',}));};render() {// 使用Provider组件传递一个包含主题和切换主题方法的对象给子组件树return (<ThemeContext.Provider value={this.state}><Toolbar /></ThemeContext.Provider>);}
}function Toolbar() {return (<div><ThemedButton /></div>);
}function ThemedButton() {return (<ThemeContext.Consumer>{({ theme, toggleTheme }) => (<button onClick={toggleTheme} theme={theme}>我是{theme}主题的按钮</button>)}</ThemeContext.Consumer>);
}export default App;

在这个例子中，我们创建了一个ThemeContext，并在App组件的构造函数中初始化了一个包含theme和toggleTheme的状态对象。然后我们将整个状态对象传递给ThemeContext.Provider的value属性。

在ThemedButton组件中，我们使用了ThemeContext.Consumer组件来获取当前的主题值和切换主题的方法。当点击按钮时，会调用toggleTheme方法来更改主题。

这样，我们就可以在组件树中任何地方使用Consumer组件来访问主题值和切换主题的方法，而无需手动将它们作为prop逐层传递。

React hooks 写法

使用 React Hooks 的写法会更简洁一些。以下是使用 React.createContext() 和 useContext hook 的示例：

import React, { useState, useContext } from 'react';const ThemeContext = React.createContext();function App() {const [theme, setTheme] = useState('light');const toggleTheme = () => {setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');};return (<ThemeContext.Provider value={{ theme, toggleTheme }}><Toolbar /></ThemeContext.Provider>);
}function Toolbar() {return (<div><ThemedButton /></div>);
}function ThemedButton() {const { theme, toggleTheme } = useContext(ThemeContext);return (<button onClick={toggleTheme}>我是{theme}主题的按钮</button>);
}export default App;