Почему поведение другое?

Question

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

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

Зачем?

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 через ref API.