Коммуникация родитель-потомок в React с помощью ссылок

Эффективное управление коммуникацией между родительским и дочерним компонентами имеет решающее значение для построения хорошо структурированных приложений React. Хотя props являются предпочтительным методом для большинства потоков данных, возникают ситуации, когда родительский компонент должен напрямую вызывать функцию внутри дочернего. В этой статье рассматривается, как этого достичь с помощью refs, с акцентом на лучших практиках и подчеркивая важность разумного использования refs.

Содержание

• Что такое Refs в React
• Вызов функций дочернего компонента из родительского компонента класса
• Вызов функций дочернего компонента из родительского функционального компонента
• Лучшие практики и альтернативы

Что такое Refs в React

Refs предоставляют способ прямого доступа к элементам DOM или экземплярам компонентов. Они не являются частью потока данных компонента React и должны использоваться экономно. Хотя они обеспечивают прямой доступ к дочерним компонентам, чрезмерное использование может привести к менее поддерживаемому и трудно тестируемому коду. Приоритетом является использование props для типичной коммуникации между родительским и дочерним компонентами, когда это возможно.

Вызов функций дочернего компонента из родительского компонента класса

В компонентах класса мы используем React.createRef() для создания ref и присваиваем его дочернему компоненту. Затем родительский компонент получает доступ к экземпляру дочернего компонента и вызывает его метод.

// ChildComponent.js
import React from 'react';

class ChildComponent extends React.Component {
  myChildFunction = () => {
    console.log('Child function called!');
  };

  render() {
    return <button onClick={this.myChildFunction}>Нажми меня</button>;
  }
}

export default ChildComponent;

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  callChildFunction = () => {
    if (this.childRef.current) {
      this.childRef.current.myChildFunction();
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.callChildFunction}>Вызвать функцию дочернего компонента</button>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

export default ParentComponent;

Вызов функций дочернего компонента из родительского функционального компонента

Функциональные компоненты используют хук useRef для аналогичной функциональности. Хук useRef возвращает изменяемый объект, свойство .current которого инициализируется значением null и сохраняется между рендерами.

// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef(null);

  const callChildFunction = () => {
    if (childRef.current) {
      childRef.current.myChildFunction();
    }
  };

  return (
    <div>
      <button onClick={callChildFunction}>Вызвать функцию дочернего компонента</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

export default ParentComponent;

Лучшие практики и альтернативы

Хотя refs обеспечивают прямой доступ, они усложняют тестирование и понимание кода. Рассмотрите следующие альтернативы, прежде чем прибегать к refs:

• Обратные вызовы (Callbacks): Передайте функцию из родительского компонента в дочерний в качестве prop. Дочерний компонент вызывает эту функцию по мере необходимости, передавая любые необходимые данные обратно родителю.
• Библиотеки управления состоянием: Такие библиотеки, как Redux или Context API, предоставляют более структурированные способы управления потоком данных и коммуникацией между компонентами, что упрощает поддержку и масштабирование вашего приложения.
• Пользовательские события: Отправляйте пользовательские события из дочернего компонента и отслеживайте их в родительском.

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