Question

我正在尝试使用DataContext使用实时数据更新仪表板中的各个组件。我在上下文的value属性中使用了多个状态，我要一起更新的每组值都使用一个状态。

但是，在设置一个状态时，将重新渲染使用DataContext中任何状态的所有组件。某些值每秒会更新多次，从而导致性能很差。

这里是一个例子：

App.js

import React, { useState, useContext } from "react";

var DataContext = React.createContext();

function DataProvider({ children }) {

  var [prop1State, setProp1State] = useState({test: 1});
  var [prop2State, setProp2State] = useState({test: 2});
  var [prop3State, setProp3State] = useState({test: 3});

  setInterval(() => {
    setProp2State(state => {
      return {test: state.test + 1}
    });
  }, 1000);

  setInterval(() => {
    setProp3State(state => {
      return {test: state.test + 1}
    });
  }, 2500);

  return (
    <DataContext.Provider
      value={{
        prop1: {
          get: prop1State,
          set: setProp1State
        },
        prop2: {
          get: prop2State,
          set: setProp2State
        },
        prop3: {
          get: prop1State,
          set: setProp1State
        }
      }}
    >
      {children}
    </DataContext.Provider>
  );
};

function SomeComponent(props) {

  console.log("Rendering SomeComponent");

  var dataContext = useContext(DataContext);

  return (
    <p>
      {dataContext.prop1.get.test}
    </p>
  );
}

function App() {
  return (
    <DataProvider>
        <SomeComponent/>
    </DataProvider>
  );
}

export default App;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

页面仅显示1，但是控制台中充满了“ Rendering SomeComponent”，这是由setInterval触发的，仅更新2和3。

是否可以不解决此问题，而无需将SomeComponent包装在3个不同的上下文中，每个状态一个？说10个嵌套上下文不好吗？在这种情况下是否有更好的替代方法？

在上下文的值中使用多个状态，防止使用未更改的状态重新渲染组件？

0 个答案: