React.forwardRef уже возможен без него, так в чем его польза? - PullRequest
Новая
       38

React.forwardRef уже возможен без него, так в чем его польза?

2 голосов
/ 01 апреля 2020

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

Вот пример кода, который вы можете подключить к codeSandbox и убедиться, что он работает: 

import React, {useRef, useEffect} from "react";
import "./styles.css";

const ChildComponent = (props) => {

  useEffect( ()=> {
    props.callbackFunction()
  })

  return(
    <div ref={props.fRef}>
      {"hello"}
    </div>
  )
}


export default function App() {
  const callbackFunction = () => {
    console.log("The parent is now holding the forwarded ref to the child div: ")
    console.log(forwardedRef)
  }

  const forwardedRef = useRef(null)

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ChildComponent name="gravy" callbackFunction={callbackFunction} fRef={forwardedRef}/>
    </div>
  );
}

Или вот вложение этот пример. Честно говоря, я новичок в этом, и я не знаю точно, как работает вставка и изменяет ли кто-то вставку мою первоначальную песочницу или нет, поэтому я не решался ее поставить. Но вот оно. Пример пересылки Ref

В этом примере родительский компонент App () успешно передает ref дочернему элементу, который дочерний элемент присоединяет к своему визуализированному div. После рендеринга он вызывает функцию обратного вызова для родителя. Затем родительский файл ведет консольный журнал, где он доказывает, что его перенаправленный ref теперь держит дочерний элемент div. И все это делается без React.forwardRef.

Так в чем же тогда смысл использования React.forwardRef?

Ответы [ 2 ]

2 голосов
/ 01 апреля 2020

Вы абсолютно правы, что можете делать то, что описали. Недостатком является то, что вы вынуждены выставить API (ie: fRef prop) для его работы. Ничего страшного, если вы являетесь индивидуальным разработчиком, создающим приложение, но это может быть более проблематично c например. если вы поддерживаете библиотеку с открытым исходным кодом с publi c API.

В этом случае потребители библиотеки не будут иметь доступа к внутренним компонентам компонента, то есть вам придется разоблачить это для них как-нибудь. Вы можете просто сделать то, что вы предлагаете в своем примере, и добавить именную опору. Фактически это то, что библиотеки делали до React 16.3. Не такая уж большая сделка, но вам придется документировать ее, чтобы люди знали, как ее использовать. В идеале вы также хотели бы использовать какой-то стандарт, который бы использовали все, чтобы он не вводил в заблуждение (многие библиотеки использовали соглашение об именовании innerRef), но вокруг этого должен быть некоторый консенсус. Таким образом, все выполнимо, но, возможно, не идеальное решение.

Использование forwardRef, передача ссылки компоненту, работает как положено. ref реквизит уже стандартизирован в React, поэтому вам не нужно go просматривать документы, чтобы выяснить, как передать ссылку или как она работает. Тем не менее, подход, который вы описываете, вполне подходит, и, если он отвечает вашим потребностям, непременно go с этим.

0 голосов
/ 01 апреля 2020

Как упомянуто в документах , это полезно для многократно используемых компонентов , то есть компонентов, которые обычно используются как обычные HTML DOM-элементы.

This полезно для библиотек компонентов, где у вас много «листовых» компонентов. Вы, вероятно, использовали такой, как Material UI.

Пример:

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

Вы создаете <Button/> и <Input/> компонент, который, возможно, просто добавляет стиль по умолчанию.

Обратите внимание, что эти компоненты буквально похожи на обычные HTML элементы DOM с дополнительными шагами.

Если эти компоненты были сделаны будет использоваться как обычные элементы HTML DOM, тогда я ожидаю, что все реквизиты будут одинаковыми, включая ref, нет?

Не было бы утомительно, если бы получить кнопку ref от вашего * Компонент 1024 * Я должен был бы получить его через что-то вроде fRef или buttonRef?

То же самое с вашим <Input/>, мне нужно go к документации, чтобы просто узнать, какой реф использовать, и это что-то вроде inputRef? Теперь я должен запомнить?

Получение ссылки должно быть простым: <Button ref={}/>

Задача

Как вы, возможно, знаете, ref не будет пропущено через реквизит потому что, как и key, React обрабатывает его по-разному.

Solution

React.forwardRef () решает эту проблему, поэтому я могу использовать <Button ref={}/> или <Input ref={}/>.

...