带有 json 数组的 React 状态如何影响性能

How does React State with json arrays affect performace

提问人:Hruday Rudraraju 提问时间:11/6/2023 最后编辑:Hruday Rudraraju 更新时间:11/6/2023 访问量:42

问:

我正在学习react,我正在构建一个在状态变量中具有json数组的应用程序。由于 react 似乎没有重新渲染 json 数组状态变量的页面,而没有像这里提到的那样首先复制它。如果只有一个状态变量,我可以随时更新该变量,以便页面重新呈现,性能会更高。通过这样做,我会提高性能吗?

制作英雄跟踪应用程序的示例代码

const Heroes = () => {
  const [MockData, setMockData] = useState(MData.Heros);

  const listHeroes = MockData.map((Hero) => (
    <li>
      <Tile Hero={Hero} />
    </li>
  ));

  const AddNewHero = () => {
    let newMockData = [...MockData];

    let length = newMockData.length + 1;

    let newhero = { name: name, id: length++ };

    newMockData.push(newhero);
    setMockData(newMockData);
  };

  return (
    <div>
      <h2>My Heroes</h2>
      <form>
        <p>Hero Name:</p>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </form>
      <button onClick={AddNewHero}>New Hero</button>
      {listHeroes}
      {/* <button onClick={sayHello}>Defasult</button>; */}
    </div>
  );
};

export default Heroes;

vs 使用 updatePage stateChange 重新呈现页面。

import { useState } from "react";
import ReactDOM from "react-dom/client";
import { MockData } from "../Mockdata";
import Tile from "./Tile";

const Heroes = () => {
  const [name, setName] = useState("");
  const [updatePage, setUpdatePage] = useState(true);

  const listHeroes = MockData.Heros.map((Hero) => (
    <li>
      <Tile Hero={Hero} />
    </li>
  ));

  const AddNewHero = () => {
    let length = MockData.Heros.length + 1;
    let newhero = { name: name, id: length++ };
    MockData.Heros.push(newhero);
    setUpdatePage(!updatePage);
  };

  return (
    <div>
      <h2>My Heroes</h2>
      <form>
        <p>Hero Name:</p>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </form>
      <button onClick={AddNewHero}>New Hero</button>
      {listHeroes}
      {/* <button onClick={sayHello}>Defasult</button>; */}
      <div>{updatePage && ""}</div>
    </div>
  );
};

export default Heroes;

既然 updateState 只是一个布尔值,那么像这样更新状态会更有效吗?

其中哪一个更有效率,我该如何测试以查看哪一个性能更快?

reactjs 性能 react-hooks json-arrayagg

评论


答:

0赞 Nate Norris 11/6/2023 #1

概括地说,您的两个实现将具有相同的性能。每当你向列表中添加一个新英雄时,React 仍然必须通过迭代数组来重新渲染该列表,所以你的时间复杂度是 。无论您想如何更新页面,这一事实都不会改变。O(n)

鉴于没有办法避免在更新后迭代列表以重新呈现它,我建议避免使用第二种方法。 非常适合这种情况 - 它只会在有状态值更新时触发重新渲染,并且它会自行处理。试图控制渲染发生的时间只会增加你和你自己未来版本试图维护此代码的复杂性。useState(Data.heroes)

而且,作为不相关的建议,我建议您在开始使用应用程序时不要太担心性能。首先让它工作,然后优化它。祝您黑客愉快!:)