Рубрики
Без рубрики

Манипулирование детьми в React, веселый анти-паттерн

Фото Томаса Tastet (Unsplash) ПРИМЕЧАНИЕ: Я рекомендую использовать эти фрагменты кода. В конце концов, … с меткой React, JavaScript, WebDev.

Фото Томаса Tastet (Unsplash)

Примечание: я рекомендую использовать эти кусочки кода. В конце концов, это анти-паттерн. И если вы новичок, вы, вероятно, должны Прочитайте это о том, как изменить ценность детских компонентов Сначала подняв состояние …

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

И хотя это правильный способ сделать это, иногда вы можете просто «добраться до компонентов» вместо того, чтобы дети, достигнутые …

И для меня это был что -то вроде «момента ага», обнаружив эту технику о том, что на самом деле возможно в React.

Входные слова

Когда мы взаимодействуем с реальным DOM, мы делаем это, используя ссылки. Ссылки на другие объекты, поддерживающие свое собственное «состояние»:

function App() {
  const ref = useRef();

  useEffect(() => {
    ref.current.innerText =
      "I am manupulating the refs 'state'";
  }, []);

  return 
;
}

Этот метод может быть использован для прикрепления ссылок на ваши компоненты. И хотя мы взаимодействуем с «чем -то другим», действительно кажется, что мы манипулируем состоянием наших детей …

Старый верный пример

Давайте предположим, что у нас есть автономный счетчик с простым состоянием.

function Counter() {
  const [value, setValue] = useState(0);

  function changeValue(factor) {
    return function () {
      setValue(value + factor);
    };
  }

  return (
    

      
      
{value}

      
    

  );
}

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

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

Но давайте не будем этого делать. Мы идем причудливыми

ForwardRef и userPerativeHandle на помощь

Мы используем два утилита из библиотеки React для решения проблемы. Прежде всего ForwardRef

Эта функция завершает компонент и позволяет нам прикрепить рефери к другому дочернему компоненту. Обычно это необходимо в библиотеках компонентов, чтобы прикрепить ваш рефлектор к элементу DOM (например, пример выше). При завершении в ForwardRef ваш компонент получает два аргумента: первый обычный объект реквизита и второй (необязательный) ссылка, фактический объект REF от родительского, создающий компонент.

const Counter = forwardRef(function (props, ref) {
...
})

Следующий, UseImperativeHandle Hook

Этот крючок, который (как указано в документах) «Настройка значения экземпляра, которое подвергается воздействию родительских компонентов при использовании Ref» Анкет (А также предупредит нас, что это не хорошая практика … Но давайте проигнорируем вторую часть 😊)

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

Что мы добавляем в компонент, так это этот фрагмент кода:

useImperativeHandle(ref, () => ({
    /** In the imperative handler the change  will 
        immediatly be executed.
    */
    changeValue: (factor) => changeValue(factor)(),
    setValue
  }));

Теперь полный код для компонента счетчика выглядит примерно так:

const Counter = forwardRef(function (_, ref) {
  const [value, setValue] = useState(0);
  function changeValue(factor) {
    return function () {
      setValue(value + factor);
    };
  }

  useImperativeHandle(ref, () => ({
    /** In the imperative handler, the change  will 
        immediately be executed.
    */
    changeValue: (factor) => changeValue(factor)(),
    setValue
  }));

  return (
    

      
      
{value}

      
    

  );
});

Теперь, где бы мы ни использовали компонент счетчика, мы можем создать рефери с помощью const () Метод и передайте его к составляющему счетчику: Анкет Где бы мы ни имели доступ к рефери, мы можем выполнить функции SetValue и ChangeValue, как это:

Полный код и пример можно найти здесь

Как уже говорилось, это может быть не лучший или наиболее правильный способ решить исходную проблему. Но это интересный способ изучить возможности с React. Я использовал это только с моими внутренними библиотеками компонентов для доступа или манипулирования каким-то небольшим кусочком внутреннего состояния, где логика компонента предназначена для автономной. Но потом что -то происходит, и вам, возможно, придется достичь этого маленького кусочка состояния или обработчика …

Оригинал: “https://dev.to/stroemdev/manipulating-child-state-a-fun-react-anti-pattern-3i2d”

Читайте ещё по теме: