react上下文_如何在React中使用上下文API

react上下文

什么是上下文API

上下文API是React提供的一种组件结构，用于管理应用程序所有级别的状态。

它的工作方式与redux相同，并且可以帮助您替换redux或避免在应用程序中使用第三方库。

它将与redux相同。 我们必须定义我们的上下文，而我们只需要将上下文的值通过提供者传递给我们的react应用程序即可。

让我们看看如何创建上下文以及如何通过创建一个简单的计数器应用程序来在我们的React应用程序中使用它。

您必须已经安装了node和npm。 然后只需创建一个新的react项目。 在终端中键入以下命令。

npx create-react-app contex-api

现在，您将有一个react项目，只需在/ src文件夹中创建一个名称上下文的文件夹，并在其中创建index.js文件。 该文件将具有我们柜台应用程序的上下文。

我们将使用React的createContext（）方法创建一个新的上下文。 将以下代码复制到src / context / index.js文件中。

import React from “react”
export default React.createContext({
title : “Welcome to counter App!”,
counter : 0
});

在我们的上下文中，我们定义了两个值，一个是标题，另一个是计数器，用于管理计数器应用程序的计数记录。 现在，我们将了解如何在我们的应用程序中使用这些值。

只需使用以下代码替换App.js文件的内容。

import React from ‘react’;
import Context from “./context”
class App extends React . Component  {
render(){
return (
< React.Fragment >
 <Context.Consumer>
{context => (
<div style={{ display: ‘flex’, justifyContent: ‘center’, flexDirection: ‘column’, alignItems: ‘center’}}>
<h1>{context.title}</h1>
<div style={{ display: ‘flex’, flexDirection: ‘row’, justifyContent: ‘space-around’}}>
<button>Increment</button>
<p>Conter:- {context.counter}</p>
<button>Decrement</button>
</div>
</div>
)}
</Context.Consumer>
</React.Fragment>
);
}
}
export default App;

在App.js文件中，我们导入了先前创建的上下文，并且使用了React类的Consumer方法使用的内容中包含的值。 这是访问上下文中存在的值的方法之一。

现在运行该应用程序。 打开您的终端并转到相应的文件夹，然后在终端中键入以下行。

npm start

访问http://localhost:3000 . 您将看到以下输出。

我们已经使用Consumer方法访问了render方法内部的上下文API。 现在，我们的递增和递减按钮不起作用。 让我们编写代码使它们生效。

我们将编写两个函数增量（）和减量（），增量（）函数将计数器增加一，递减函数将计数器减少一。

在render方法之前，将以下代码添加到我们的App.js文件中。

state = {counter : 0
}
increment = () => {
this .setState({
counter : this .state.counter + 1
});
}
decrement = () => {
this .setState({
counter : this .state.counter — 1
});
}

所以，我们有现成的功能，但如果你去http://localhost:3000 ，那么你将看到我们的按钮都还没有成型。

因为在我们的计数器中，我们显示的是上下文API所提供的值，而我们尚未更新上下文值。 让我们看看如何更新上下文值。 为此，我们将进行一些更改。 我们将为标题和计数器创建单独的组件。 标题组件将显示应用程序的标题，计数器组件将显示更新的计数器。

我们将在/ src文件夹中创建一个新的文件夹组件，并在其中创建两个文件。 我们将分别命名为CounterTitle.js和Counter.js。

在此之前，我们将做一件事，我们还必须更新上下文值，因此，让我们看看如何更新上下文值。

现在，我们将用以下代码替换App.js文件。

import React from ‘react’;
import Context from “./context”
import Counter from “./component/Counter”
import CounterTitle from “./component/CounterTitle”
class App extends React . Component  {
state = {
counter : 0
}
increment = () => {
this .setState({
counter : this .state.counter + 1
});
}
decrement = () => {
this .setState({
counter : this .state.counter — 1
});
}
render(){
return (
< React.Fragment >
 <Context.Provider value={{ counter: this.state.counter }}>
<div style={{ display: ‘flex’, justifyContent: ‘center’, flexDirection: ‘column’, alignItems: ‘center’}}>
<CounterTitle />
<div style={{ display: ‘flex’, flexDirection: ‘row’, justifyContent: ‘space-around’}}>
<button onClick={this.increment}>Increment</button>
<Counter />
<button onClick={this.decrement}>Decrement</button>
</div>
</div>
)}
</Context.Provider>
</React.Fragment>
);
}
}
export default App;

在上面的代码中，我使用了Provider函数代替了使用者。 如果您要从我们的上下文访问值，则使用Consumer函数，而Provider函数用于更新或更改将对应用程序的所有组件可用的context的值。

我们已经在App.js中导入了Counter和CounterTitle组件。 现在，将以下代码分别添加到CounterTitle.js和Counter.js中。

将以下代码添加到CounterTitle.js文件。

import React, {useContext} from “react”
import Context from “../context”
export default function CounterTitle () {
const mycontext = useContext(Context);
return < h1 > {mycontext.title} </ h1 > ;
}

将以下代码添加到Counter.js文件。

import React, { useContext } from “react”
import Context from “../context”
export default function Counter () {
const mycontext = useContext(Context);
return < p > Counter: {mycontext.counter} </ p >
}

如果同时查看这两个文件，您将看到我们已经使用了功能组件，并且没有使用任何使用者函数。 如果我们使用功能组件，并且必须使用上下文API的值，则在react中具有useContext（）挂钩。 我们能够在类和功能组件中使用上下文API。 现在再次运行该应用程序，您将看到我们的应用程序现在运行良好。 欢呼…

结论

我们已经学习了如何在类和功能组件中使用上下文API。

如果您需要上述计数器应用程序的完整代码，请在https://github.com/mvcman/Counter-App.git上获取它。

翻译自: https://hackernoon.com/how-to-use-context-api-in-react-ud4o3v8f

react上下文