React Context 与 Hooks 简明指南
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
我花了好长时间才弄明白如何在 React Hooks 中使用 Context，我读过的所有教程要么解释得不够简单，要么似乎都只关注类语法。类语法很快就要被淘汰了，所以我想试试看。
为什么要使用上下文？
将 props 传递给多个子组件可能会变得难以管理。
const [someState, setSomeState] = useState('cool value');
return <SomeBigDaddyComponent someState={someState} />
现在是实施阶段SomeBigDaddyComponent。
const SomeBigDaddyComponent = ({ someState }) = {
return <SomeMediumDaddyComponent someSate={someState} />
}
现在是实施阶段SomeMediumDaddyComponent。
const SomeMediumDaddyComponent = ({ someState }) = {
return <SomeSmallDaddyComponent someSate={someState} />
}
SomeSmallDaddyComponent现在……的实施情况
越来越糟糕了，对吧？现在正是运用上下文的好时机。
创建和传播语境
上下文本质上是一种无需传递 props 即可将数据逐级传递给子组件的方法。举例说明会更容易理解。让我们创建一个非常简单的上下文。
import React from 'react';
const CoolMessageContext = React.createContext('hello hello hello');
export default CoolMessageContext;
我上面用一个简单的字符串初始化了上下文，但这可以是任何值，通常会使用一个对象。现在让我们看看上下文是如何工作的。考虑一下App.js。
import React from 'react';
import CoolMessageContext from './CoolMessageContext';
const App = () => {
return (
<CoolMessageContext.Provider value={'bye bye bye'} />
<SomeBigDaddyComponent />
</CoolMessageContext.Provider>
);
}
能够访问上下文值的组件都被包裹在 `<container>` 中Provider。这本质上是在说：“我是值的提供者，我下面的所有组件都可以获取这个值。” 在上面的示例中，` SomeBigDaddyComponent<container>` 及其子组件 `<container>`SomeMediumDaddyComponent和 `<container> ` 都可以获取SomeSmallDaddy该值。提供者之上的任何组件都无法访问该值。
const App = () => {
return (
<div>
<SomeOtherComponent />
<CoolMessageContext.Provider value={'bye bye bye'} />
<SomeBigDaddyComponent />
</CoolMessageContext.Provider>
</div>
);
}
SomeOtherComponent由于它位于提供程序之上，因此无法访问该值。请注意，必须提供初始值，这里我提供了'bye bye bye'。虽然已使用 设置了初始值，createContext但这实际上只是一个安全值，以防在设置提供程序时未提供值。
获取上下文值
现在该值已被广播，我们可以从任何子节点访问它。要获取该值，我们将使用钩子函数useContext。
import React, { useContext } from 'react';
import CoolMessageContext from './CoolMessageContext';
const SomeSmallDaddyComponent = () => {
const coolMessage = useContext(CoolMessageContext);
return <h1>{coolMessage}</h1>
};
export default SomeSmallDaddyComponent;
该useContext钩子函数使用上下文对象进行初始化，这样就可以在无需繁琐的 prop 传递的情况下访问该值。您可以将 useContext 理解为提供一个传送门，使该值能够传送到需要它的组件中。
设置上下文的值
如果使用状态，也可以从任何地方以类似的方式更改上下文的值。
import React from 'react';
const ObjectContext = React.createContext({
object: {
number: 0,
word: 'hello'
},
setObject: () => {}
});
export default ObjectContext;
上述上下文与我们之前使用的上下文类似，但还具有存储设置函数的属性setState。
import React, { useState } from 'react';
import ObjectContext from './ObjectContext';
const App = () => {
const [object, setObject] = useState({
number: 1,
word: 'bye'
});
return (
// ES6 Object Property Value Shorthand
<ObjectContext value={{ object, setObject }} />
<SomeBigDaddyComponent />
</ObjectContext >
);
};
上述值是通过状态对象和状态设置函数设置的。现在，从任何地方设置状态都等同于访问该值。
import React, { useContext } from 'react';
import ObjectContext from './ObjectContext';
const SomeSmallDaddyComponent = () => {
const { object, setObject } = useContext(ObjectContext);
const clickHandler = () => {
const objectCopy = {...object};
objectCopy.title = 'wow new title!';
setObject(objectCopy);
}
return <button onClick={clickHandler}>{object.title}</button>
};
export default SomeSmallDaddyComponent;
以上就是基本情况概述！如果我遗漏了什么或者您有任何疑问，请告诉我。如果您喜欢这篇文章，请在Twitter上关注我@keke_arif。谢谢！
keke
文章来源：https://dev.to/keke_arif/a-simple-guide-to-react-context-with-hooks-34jj