Изучаем серию React Hooks — useMemo

React.js
Изучаем серию React Hooks — useMemo

Сцена:Когда родительский компонент изменяет свои собственные данные, дочерний компонент будет визуализироваться каждый раз, когда родительский компонент визуализируется без изменения данных дочернего компонента.

1. Узнайте о компоненте React.PureComponent

Скажи это первымshouldComponentUpdateЭта функция жизненного цикла, которая управляет визуализацией компонента, возвращая true или false, может эффективно избежать бессмысленного или повторного рендеринга компонента.Избегайте ненужных двойных вычислений, сокращайте потери ресурсов и повышайте производительность..

shouldComponentUpdate(nextProps, nextState) {
    if(this.props.value === nextProps.value) {
        return false; // 判断props接收的参数value有无变化，无变化则返回false，组件不渲染
    }
}

Компоненты класса наследуютсяComponentВместо этого наследуются компонентыPureComponentкомпоненты, вам не нужно писатьshouldComponentUpdateФункция жизненного цикла определяет, изменились ли параметры для управления отрисовкой компонента.

наследование дочерних компонентовPureComponentкомпонента, он определит, изменились ли входящие параметры, и если изменений нет, рендеринг дочернего компонента будет предотвращен.

PureComponentСлабые стороны компонентов:

  • Предусмотрены только простые алгоритмы сравнения.
  • сложные структуры данных передаются по значению,PureComponentКомпоненты не могут принимать правильные решения.
  • Функциональные компоненты не могут наследоватьPureComponentкомпоненты.

2. Узнайте о React.memo()

React 16.6.0 официально выпустил React.memo(), который является компонентом более высокого порядка.

import React, { memo } from 'react';
const Child = memo(function Child(props) {
    return(
        <h1>{props.value}</h1>
    )
});

export default Child;

React.memo()а такжеReact.PureComponentСходства и различия компонентов:

Другое: React.memo() есть函数组件, React.PureComponent — это类组件.

То же самое: это поверхностное сравнение полученных параметров реквизита для решения проблемы эффективности компонента во время выполнения и оптимизации поведения компонента при повторном рендеринге.

3. Давайте поговорим о useMemo

useMemo() выпущен в React 16.8.0.

React.memo()Это нужно для того, чтобы судить, повторяется ли рендеринг функционального компонента.

useMemo()Является ли определение того, выполняется ли часть логики функции повторно.

import React, { memo, useState, useMemo } from "react";
function App() {
    const [value, setValue] = useState(0);
    const increase = useMemo(() => {
        if(value > 2) return value + 1;
    }, [value]);
    return (
        <div>
            <Child value={value} />
            <button
                type="button"
                onClick={() => {
                    setValue(value + 1);
                }}
            >
                value:{value},increase:{increase || 0}
            </button>
        </div>
    );
}
const Child = memo(function Child(props) {
    console.log('Child render')
    return <h1>value:{props.value}</h1>;
});
export default App;

useMemo() зависит от значения, определяющего увеличение параметра:

const increase = useMemo(() => {
    if(value > 2) return value + 1;
}, [value]);

Начальное значение значения равно 0. Когда значение значения увеличивается до значения, превышающего 2, начинает назначаться увеличение, а после назначения увеличение всегда будет больше значения на 1.

Дочерний компонент

const Child = memo(function Child(props) {
  console.log('Child render')
  return <h1>value:{props.value}</h1>;
})

  • Компонент memo определяет, обновляется ли значение, переданное props.Если есть обновление, значение, отображаемое дочерним компонентом, обновляется, и консоль выводит Child render
  • Чтобы четко видеть роль memo, вы можете изменить значение, передаваемое дочернему компоненту, на увеличение,<Child value={increase} />
  • Когда увеличение равно 0, дочерний компонент не будет отображаться.
  • Нажмите кнопку, чтобы увеличить значение, когдаvalue > 2Когда , параметр увеличения обновляется, поэтому дочерний компонент Child будет рендериться, а консоль выведет Child render

4. Параметры useMemo()

Если вы использовали useEffect(), вы, вероятно, знаете роль второго параметра useEffect(). useMemo() — это то же самое, что и useEffect().

Первый параметр useEffect() — это функция выполнения, затем... второй параметр:

  • Если второй параметр пуст, эта часть логики будет выполняться каждый раз при рендеринге компонента, и не будет судить о том, выполняется ли логика повторно в соответствии с входящим значением атрибута, поэтому бессмысленно писать useMemo() .
  • Если второй параметр является пустым массивом, он будет выполняться только один раз при рендеринге компонента, и обновление значения входящего свойства не будет иметь никакого эффекта.
  • Таким образом, второй параметр useMemo() должен передавать зависимые параметры в массиве.

    useMemo(() => {
  // to do somthing...
}, [value])

5. Время выполнения useMemo()

useMemo()Должно быть возвращаемое значение, а возвращаемое значение непосредственно участвует в рендеринге, поэтому useMemo() находится в渲染期间Завершенный.


так что проблема в начальной сцене должна быть эффективно решена🤔


Категории