时间戳

首页 > 解决方案 > 在 React Context 中使用与状态无关的全局对象

javascript - 在 React Context 中使用与状态无关的全局对象

问题描述

我希望有一个可用于我的应用程序的全局对象，我可以在任何地方检索值并在任何地方设置新值。目前，我只将 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 对象（而不是状态）并在任何地方更改值，我将如何处理这个问题？

标签： javascriptreactjs

解决方案

React 世界中的全局上下文概念是为了解决通过多个组件层传递 props 的问题而诞生的。在使用 React 时，我们希望在“数据源”发生变化时重新渲染。React 中数据绑定的一种方式使这个流程更易于编码、调试和维护。那么您存储全局对象的具体目的是什么，而当该对象发生更改时什么也没有发生？如果没有任何东西在它改变时重新渲染，那么它的主要用途是什么？

React 中的防止重新渲染有多种方式，如useEffect或旧shouldComponentUpdate方法。如果您的主要想法只是防止在某些非常特定的情况下重新渲染，我认为它们会有所帮助。

推荐阅读