本文主要是介绍使用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;
在这个例子中，我们使用 useState hook 来创建 theme 状态和 setTheme 函数。然后我们创建一个对象，其中包含 theme 和 toggleTheme，并将该对象传递给 ThemeContext.Provider 的 value 属性。
在 ThemedButton 组件中，我们使用 useContext hook 来获取当前的主题值和切换主题的方法。当点击按钮时，会调用 toggleTheme 方法来更改主题。
这样，我们就可以在组件树中任何地方使用 useContext hook 来访问主题值和切换主题的方法，而无需手动将它们作为 prop 逐层传递。
这篇关于使用React.createContext()在React应用中传递数据，nolan出品的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
