reactjs —— useContext ：上下文 & 属性之间的传递 & 全局变量

原文：

https://www.react.express/hooks/usecontext

useContext

We use the useContext hook for passing values to deeply nested components. This is essentially dependency injection.

We frequently use contexts for values which will be used throughout our app, such as theme constants or localized strings.

Example

Suppose we want to use a theme throughout our app.

Without contexts

Without a context, we have to pass the theme as a prop into every component - even those that don't use it! That's both a hassle and may cause unnecessary rerendering.

import React, { useContext } from 'react'

function Title({ theme }) {
  const style = {
    background: theme.primary,
    color: theme.text,
  }

  return <h1 style={style}>Title</h1>
}

function Nested({ theme }) {
  return <Title theme={theme} />
}

function NestedTwice({ theme }) {
  return <Nested theme={theme} />
}

export default function App() {
  const theme = {
    primary: 'dodgerblue',
    text: 'white',
  }

  return <NestedTwice theme={theme} />
}

　　

With contexts

With a context, the component that actually wants to use the theme can access it directly from the context.

import React, { useContext, createContext } from 'react'

const ThemeContext = React.createContext()

function Title() {
  const theme = useContext(ThemeContext)

  const style = {
    background: theme.primary,
    color: theme.text,
  }

  return <h1 style={style}>Title</h1>
}

function Nested() {
  return <Title />
}

function NestedTwice() {
  return <Nested />
}

export default function App() {
  const theme = {
    primary: 'dodgerblue',
    text: 'white',
  }

  return (
    <ThemeContext.Provider value={theme}>
      <NestedTwice />
    </ThemeContext.Provider>
  )
}