1

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>
    </>
  )
}
4

1 回答 1

1

在代码中，两者ref都指向两个不同DOM的节点，这就是它们不同的原因。

createRef正在返回一个 DOM 节点或组件的已安装实例，具体取决于您调用它的位置。无论哪种方式，正如您所指出的，您手头的东西确实很简单。但是如果你想用那个参考做些什么呢？如果你想在组件挂载时这样做怎么办？

Ref回调非常适合，因为它们在 componentDidMount 和 componentDidUpdate 之前被调用。这就是您对 ref 进行更细粒度控制的方式。你现在不仅仅是命令式地获取 DOM 元素，而是在 React 生命周期中动态更新 DOM，而是通过 ref API 对你的 DOM 进行细粒度的访问。

于 2020-01-10T03:48:06.883 回答