精选文章 React解密:React Hooks函数之useContext

React解密:React Hooks函数之useContext

作者:leelxp 时间: 2020-08-05 04:33:47
leelxp 2020-08-05 04:33:47

useContext函数是React Hooks三大基础hooks函数之一。话不多说,我们先来看用法:

const value = useContext(MyContext);

接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的  的 value prop 决定。 当组件上层最近的  更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染。调用了 useContext 的组件总会在 context 值变化时重新渲染。如果重渲染组件的开销较大,你可以 通过使用 memoization 来优化

注意:useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用  来为下层组件提供 context。

何时使用Context?

Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。举个例子,在下面的代码中,我们通过一个 “theme” 属性手动调整一个按钮组件的样式:

// Context 可以让我们无须明确地传遍每一个组件,就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context(“light”为默认值)。
const ThemeContext = React.createContext('light');
class App extends React.Component {
  render() {
    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。   
    // 无论多深,任何组件都能读取这个值。    
    // 在这个例子中,我们将 “dark” 作为当前的值传递下去。    
    return (
                  
                
          
        );
      }
}

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {  return (
    
); } class ThemedButton extends React.Component { // 指定 contextType 读取当前的 theme context。 // React 会往上找到最近的 theme Provider,然后使用它的值。 // 在这个例子中,当前的 theme 值为 “dark”。 static contextType = ThemeContext; render() { return
勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:【STM32F429开发板用户手册】第38章 STM32F429的FMC总线应用之是32路高速IO扩展

下一篇:浮点数二分 AtCoder Beginner Contest 174 E - Logs

您可能感兴趣

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。