如何在消費者而不是提供者中更改上下文？

Question

我發現這個問題通過將所有上下文更改功能添加到最頂層的父級來回答這個問題。 反應上下文 api - 上下文更改后消費者不重新渲染

但這很尷尬，我想要在改變它的組件中改變上下文的函數。 假設我有一個按鈕可以更改內容中的某些內容，我希望在該組件中有 handleChange()，而不是用不屬於那里的功能和狀態阻塞我的父級。

這是否可以將上下文邏輯外包給組件？

Answer 1

如果您不希望父級具有 state 和狀態更改功能，請不要使用上下文- 聽起來本地組件 state就是您要尋找的全部。

Answer 2

是的，您需要使用 useReducer。 https://reactjs.org/docs/hooks-reference.html#usereducer

您在useReducer的幫助下創建了一個reducer並將其傳遞給Context 。 之后，您可以使用state以及從連接到上下文的任何組件的dispatch 。

鏈接：

• https://reactjs.org/docs/hooks-reference.html#usereducer
• https://medium.com/octopus-labs-london/replacing-redux-with-react-hooks-and-context-part-1-11b72ffdb533
• 何時使用原生 React.useReducer Hook 以及它與 Redux 的區別
• https://www.simplethread.com/cant-replace-redux-with-hooks/

Answer 3

context只是一種無需擔心層次結構即可傳遞props的奇特技術。

與普通props相比，數據流解耦是唯一的區別。 因此，更改context的值伴隨着一些注意事項。

當您需要更改父母和孩子之間共享的 state 時，您需要抬起 state並傳遞更改它的方法。 與context沒有什么不同

---

假設以下提供者傳遞一個theme和一種改變它的方式

export const context = createContext()
const { Provider } = context

export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState({ color: 'foo' })
    const value = { theme, setTheme }
    return (
        <Provider value={value}>
            {children}
        </Provider>
    )
}

您仍然需要傳遞一個處理程序來更改 state。 要從Component （它是ThemeProvider的后代）內部更改theme ，您可以這樣做

import { useContext } from 'react'
import {context} from './ThemeProvider'

const Component = () =>{
    const {theme, setTheme} = useContext(context)

    const handleChange = () => setTheme({color:'blue'})

    return <button onClick={handleChange}>Change</button>
}

---

通常（不一定） Providers在頂級組件App.js中聲明

//App.js
import { ThemeProvider } from './ThemeProvider'

const App = () =>{
    <ThemeProvider>
         <RestOffYourApp />
    </ThemeProvider>
}