在與 state 無關的 React 上下文中使用全局 object

Question

我希望有一個全局 object 可供我的應用程序使用，我可以在其中檢索任何地方的值，也可以在任何地方設置一個新值。 目前我只對與 state 相關的值使用 Context ，即當值更改時需要再次渲染。 例如：

import React from 'react';
const TokenContext = React.createContext({
    token: null,
    setToken: () => {}
});

export default TokenContext;

import React, { useState } from 'react';
import './App.css';
import Title from './Title';
import TokenContext from './TokenContext';

function App() {

  const [token, setToken] = useState(null);


  return(
    <TokenContext.Provider value={{ token, setToken }}>
      <Title />
    </TokenContext.Provider>
  );
}

export default App;

如果我只想在上下文（不是狀態）中存儲 JS object 並在任何地方更改值，我將如何處理？

Answer 1

React 世界中的全局上下文概念是為了解決通過多個組件層傳遞 props 的問題而誕生的。 在使用 React 時，我們希望在“數據源”發生變化時重新渲染。 React 中數據綁定的一種方式使這個流程更易於編碼、調試和維護。 那么，您存儲全局 object 的具體目的是什么，而當 object 發生變化時什么也沒發生？ 如果沒有任何東西在它改變時重新渲染，那么它的主要用途是什么？

React 中的防止重新渲染有多種方法，例如useEffect或舊的shouldComponentUpdate方法。 如果您的主要想法只是防止在某些非常特定的情況下重新渲染，我認為它們會有所幫助。

Answer 2

將其用作 state 管理庫，如 Redux。

您有一個全局 object （存儲）並通過上下文查詢該值，但您還需要添加forceUpdate()因為變異 object 不會觸發渲染，因為它不是 React ZDB974238714CA8DE634A7CE1D08A 的一部分：

const globalObject = { counter: 0 };

const Context = React.createContext(globalObject);

const Consumer = () => {
  const [, render] = useReducer(p => !p, false);
  const store = useContext(Context);

  const onClick = () => {
    store.counter = store.counter + 1;
    render();
  };

  return (
    <>
      <button onClick={onClick}>Render</button>
      <div>{globalObject.counter}</div>
    </>
  );
};

const App = () => {
  return (
    <Context.Provider value={globalObject}>
      <Consumer />
    </Context.Provider>
  );
};