INP

Убедитесь, что значения свойств не меняются

Предотвратить рендеринг в нашем примере было довольно легко. Но на практике это сложнее, так как легко внести непреднамеренные изменения в реквизит.

Давайте добавим в Counterкомпонент кнопку Increment.

const Counter = React.memo(function Counter({ name, value, onClickIncrement }) {
  console.log(`Rendering counter ${name}`);
  return (
    <div>
      {name}: {value} <button onClick={onClickIncrement}>Increment</button>
    </div>
  );
});

Теперь компонент Appпередает onClickIncrementсвойство каждому Counter.

<Counter
  name="A"
  value={counterA}
  onClickIncrement={() => setCounterA(counterA + 1)}
/>

Если вы увеличиваете счетчик A, оба счетчика отображаются повторно.

Rendering counter A
Rendering counter B

Почему? Потому что значение свойства onClickIncrementменяется каждый раз, когда приложение перерисовывается. Каждая функция представляет собой отдельный объект JavaScript, поэтому React видит изменение свойства и обязательно обновляет файл Counter.

Это имеет смысл, поскольку onClickIncrementфункция зависит от counterAзначения из родительской области видимости. Если бы одна и та же функция передавалась каждый Counterраз, приращение перестанет работать, поскольку начальное значение счетчика никогда не обновится. Значение счетчика будет устанавливаться 0 + 1 = 1каждый раз.

Проблема в том, что onClickIncrementфункция меняется каждый раз, даже если значение счетчика, на которое она ссылается, не изменилось.

Мы можем использовать useCallbackкрючок, чтобы это исправить. useCallbackзапоминает переданную функцию, так что новая функция возвращается только при изменении одной из зависимостей перехватчика.

В данном случае зависимостью является counterAсостояние. Когда это изменится, onClickIncrementфункция должна обновиться, чтобы мы не использовали устаревшее состояние позже.

<Counter
  name="A"
  value={counterA}
  onClickIncrement={React.useCallback(() => setCounterA(counterA + 1), [
    counterA,
  ])}
/>

Если мы сейчас увеличим счетчик A, перерисовывается только счетчик A.

Rendering counter A

Если вы используете компоненты на основе классов, добавьте в класс методы и используйте функцию bindв конструкторе, чтобы обеспечить доступ к экземпляру компонента.

constructor(props) {
  super(props)
  this.onClickIncrementA = this.onClickIncrementA.bind(this)
}

(Вы не можете вызвать bindфункцию рендеринга, так как она возвращает новый объект функции и приведет к повторному рендерингу.)

Передача объектов в качестве реквизита

Непреднамеренный повторный рендеринг происходит не только с функциями, но и с литералами объектов.

function App() {
  return <Heading style={{ color: "blue" }}>Hello world</Heading>
}

Каждый раз, когда Appкомпонент визуализирует, создается новый объект стиля, что приводит Headingк обновлению запомненного компонента.

К счастью, в этом случае объект стиля всегда один и тот же, поэтому мы можем просто создать его один раз вне компонента, Appа затем повторно использовать для каждого рендеринга.

const headingStyle = { color: "blue" }
function App() {
  return <Heading style={headingStyle}>Hello world</Heading>
}

А что, если стиль рассчитывается динамически? В этом случае вы можете использовать useMemoхук, чтобы ограничить время обновления объекта.

function App({ count }) {
   const headingStyle = React.useMemo(
    () => ({
      color: count < 10 ? "blue" : "red",
    }),
    [count < 10]
  );
  return <Heading style={headingStyle}>Hello world</Heading>
}

Обратите внимание, что зависимостью от ловушки является не простое значение count, а count < 10условие. Таким образом, если счетчик изменится, заголовок будет отображаться повторно только в том случае, если изменится и цвет.

Мы получаем те же проблемы с идентификацией объекта и непреднамеренным повторным рендерингом, если передаваемые нами дочерние элементы представляют собой нечто большее, чем просто простая строка.

<Heading>
  <strong>Hello world</strong>
</Heading>

Однако применяются те же решения. Если дочерние элементы статичны, переместите их из функции. Если они зависят от состояния, используйте useMemo.

function App({}) {
  const content = React.useMemo(() => <strong>Hello world ({count}</strong>, [
    count,
  ]);

  return (
    <>
      <Heading>{content}</Heading>
    </>
  );
}

Использование ключей, чтобы избежать повторного рендеринга

Ключевые реквизиты позволяют React идентифицировать элементы при рендеринге. Они чаще всего используются при рендеринге списка элементов.

Если каждый элемент списка имеет согласованный ключ, React может избежать повторной отрисовки компонентов даже при добавлении или удалении элементов списка.

function App() {
  console.log("Render App");
  const [items, setItems] = React.useState([{ name: "A" }, { name: "B" }]);
  return (
    <div>
      {items.map((item) => (
        <ListItem item={item} />
      ))}
      <button onClick={() => setItems(items.slice().reverse())}>Reverse</button>
    </div>
  );
}
const ListItem = React.memo(function ListItem({ item }) {
  console.log(`Render ${item.name}`);
  return <div>{item.name}</div>;
});

Без ключа <ListItem>мы получаем Warning: Each child in a list should have a unique "key" propсообщение.

Это вывод журнала при нажатии кнопки «Реверс».

=> Reverse
Render app
Render B
Render A

Вместо перемещения элементов React обновляет их оба и передает новый itemреквизит.

Добавление уникального ключа к каждому элементу списка решает проблему.

<ListItem item={item} key={item.name} />

React теперь может правильно распознать, что элементы не изменились, и просто перемещает существующие элементы.

Что такое хороший ключ

Ключи должны быть уникальными, и никакие два элемента в списке не должны иметь одинаковый ключ. По этой причине ключ item.name, который мы использовали выше, не идеален, поскольку несколько элементов списка могут иметь одно и то же имя. По возможности назначайте уникальный идентификатор каждому элементу списка — часто вы получаете его из внутренней базы данных.

Ключи также должны быть стабильными. Если вы используете Math.random()ключ, он будет меняться каждый раз, что приведет к повторному монтированию и повторной визуализации компонента.

Для статических списков, в которых элементы не добавляются и не удаляются, также можно использовать индекс массива.

Ключи на фрагментах

Вы не можете добавлять ключи к фрагментам, используя короткий синтаксис ( <>), но это работает, если вы используете полное имя:

<React.Fragment key={item.name}>
</React.Fragment>

Избегайте изменений в древовидной структуре

Дочерние компоненты будут перемонтированы, если изменится окружающая структура DOM. Например, это приложение добавляет контейнер вокруг списка. В более реалистичном приложении вы можете поместить элементы в разные группы в зависимости от настроек.

function App() {
  console.log("Render App");
  const [items, setItems] = React.useState([{ name: "A" }, { name: "B" }]);
  const [showContainer, setShowContainer] = React.useState(false);
  const els = items.map((item) => <ListItem item={item} key={item.name} />);
  return (
    <div>
      {showContainer > 0 ? <div>{els}</div> : els}
      <button onClick={() => setShowContainer(!showContainer)}>
        Toggle container
      </button>
    </div>
  );
}
const ListItem = React.memo(function ListItem({ item }) {
  console.log(`Render ${item.name}`);
  return <div>{item.name}</div>;
});

При добавлении родительского компонента все существующие элементы списка размонтируются и создаются новые экземпляры компонента. Инструменты разработчика React показывают, что это первый рендеринг компонента.

По возможности сохраняйте структуру DOM прежней. Например, если вам нужно отобразить разделители между группами внутри списка, вставьте разделители между элементами списка вместо добавления обертки div к каждой группе.

Отслеживайте производительность вашего приложения

DebugBear может отслеживать время загрузки и активность процессора вашего веб-сайта с течением времени. Просто введите свой URL-адрес, чтобы начать.