useContext() là cách để không phải dùng Consumer

Khi phải dùng Consumer:

import { createContext } from 'preact'

const Username = createContext()

export default function App() {
  return (
    // provide the username value to our subtree:
    <Username.Provider value="Bob">
      <Username.Consumer>
        {username => (
          // access the current username from context:
          <span>{username}</span>
        )}
      </Username.Consumer>
    </Username.Provider>
  )
}

Khi dùng useContext():

import { createContext } from 'preact'
import { useContext } from 'preact/hooks'

const Username = createContext()

export default function App() {
  const username = useContext(Username) // "Bob"
  return (
    <Username.Provider value="Bob">
      <span>{username}</span>
    </Username.Provider>
  )
}

Nguồn:: Context | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
createContext() nằm ngoài global, useContext() nằm trong component


Cập nhật lần cuối : 20 tháng 4, 2024
Tạo : 30 tháng 1, 2024