Почему поведение отличается?

Question

В чем разница между createRef и ref = {(c) => this.el = c}?

Когда я выводлю каждый ref имеет один и тот же элемент, но не ложный.

почему?

import React from "react"

class Home extends React.Component {
constructor(){
  super();
  this.el1 = React.createRef();
}

componentDidmount(){
  console.log(el1 === el2) // false   why false?
}

render(){
  return (
    <>
      <div ref={this.el1}>
        <span>A</span>
      </div>
      <div ref={(c)=> { this.el2 = c }}}>
        <span>A</span>
      </div>
    </>
  )
}

Answer 1

В коде оба ref указывают на два разных узла DOM, поэтому они не совпадают.

createRef возвращает либо узел DOM, либо подключенный экземпляр компонента, в зависимости от на том, где вы это называете. В любом случае, то, что у вас есть, действительно просто, как вы заметили. Но что, если вы хотите что-то сделать с этой ссылкой? Что, если вы хотите сделать это, когда компонент монтируется?

Ref обратные вызовы отлично подходят для этого, потому что они вызываются до componentDidMount и componentDidUpdate. Таким образом, вы получаете более точный контроль над реф. Теперь вы просто не просто захватываете элементы DOM, а вместо этого динамически обновляете DOM в жизненном цикле React, но получаете детальный доступ к вашей DOM через API ref.