1

例如，如果我有一个数组（示例有 4 个元素，真正的 50 个）：

export default ["foo", "bar", "faz", "moo"];

假设我得到了显示数据的组件：

import React, { useContext } from 'react';
import PreferenceContext from '../contexts/PreferenceContext';

export default props => {
  const { accentColor } = useContext(PreferenceContext);

  return (
    <div style={{ color: accentColor }}>
      {props.foo}
    </div>
  );
}

接下来，我在父组件中重用该组件

// FooCollection.js
import React from 'react';
import FooDisplay from './FooDisplay';
import fooArray from '../data/fooArray';

export default () => {
  return fooArray.map(fooItem => <FooDisplay foo={fooItem} />
}

这会导致组件被渲染乘以数组中的项目数量（因此也多次FooDisplay调用）。useContext那么，如果我有一个更大的数组和更多的项目，这会显着影响性能吗？或者我会更好地使用useContext包装器（父）组件中的 并传递首选项props吗？

实际上，组件嵌套了三次，这会导致道具传递混乱，所以这就是我使用上下文的原因，但是我可以想象如果它多次调用上下文会使应用程序变慢

4

1 回答 1

0

不要预先优化。

React 非常快，每秒可以执行数百万次，因此您不会注意到低调。

如果您发现延迟，请测量它的实际速度有多慢，尝试对其进行优化，看看这是否真的提高了速度。如果不还原它。但不要担心，直到你注意到一个滞后。

但在那之前，不要打扰并专注于编写可维护的代码。

于 2020-06-06T11:33:00.197 回答