Запретить повторную визуализацию при отправке функции prop из функционального компонента

Question

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

При использованииКомпоненты класса это просто:

class Component extends React.Component {
  render() {
    return <List createRows={this.createRows}/>;
  }

  createRows = () => this.props.data.map(dataToRow);
}

Учитывая, что List является либо PureCompoment, либо функциональным компонентом, опора createRows никогда не вызовет повторный рендеринг List.

---

Но если Component является функциональным компонентом, это больше невозможно:

  function Component(props) {
    return <List createRows={createRows}/>;

    function createRows() {
      return props.data.map(dataToRow);
    }
  }

Поскольку createRows создается каждый раз при рендеринге Component, реквизит изменится,вызывая повторную визуализацию List каждый раз, когда Component перерисовывается.Это может привести к большой потере производительности.Также обратите внимание, что createRows нельзя размещать вне функционального компонента, поскольку он зависит от data реквизита List.

---

Теперь, с введением на крючках, возможнодля удержания createRows в хуке useState:

  function Component(props) {
    const [ createRows ] = useState(() => () =>
      props.data.map(dataToRow);
    );

    return <List createRows={createRows}/>;
  }

Так как createRows сохраняется в хуке состояния, он не будет меняться при каждом рендеринге, и не будет повторного рендеринга List произойдет, как мы хотим.

Однако это больше похоже на взлом, чем на решение.

---

Как лучше всего отправлять реквизит функции из функционалакомпонентов для дочернего компонента, не вызывая ненужных повторных визуализаций дочернего компонента?

Answer 1

Хук

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

  function Component(props) {
    const createRows = useCallback(() =>
      props.data.map(dataToRow);
    ), []); // provide dependencies here

    return <List createRows={createRows}/>;
  }

Answer 2

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

Проблема с простым примером использования React HooksCallback

Какова цель использования ловушки React's useCallback вместо useEffect? ​​

React Hooks useCallback вызывает повторный рендеринг дочернего элемента