在 React 中调用 useContext 的位置是否重要？答案

【问题标题】：Does it matter where you call useContext in React?在 React 中调用 useContext 的位置是否重要？
【发布时间】：2020-06-06 10:54:24
【问题描述】：

例如，如果我得到一个数组（示例有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）。那么，如果我有一个更大的数组和更多的项目，这会显着影响性能吗？还是在包装器 (parent) 组件中使用 useContext 并使用 props 传递首选项会更好？

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

【问题讨论】：

标签： reactjs use-context

【解决方案1】：

不要预先优化。

React 非常快，每秒可以执行数百万次，所以你不会注意到低谷。

如果您发现延迟，请测量它的实际速度有多慢，尝试对其进行优化，看看这是否真的提高了速度。如果不还原它。但在发现延迟之前不要担心。

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

【讨论】：