本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号.1.什么是参考？Refs在计算机中被称为弹性文件系统（英文：ResilientFileSystem，ReFS）。React中的Refs提供了一种方法，让我们可以访问在render方法中创建的DOM节点或React元素。本质是ReactDOM.render()返回的组件实例，如果是渲染组件，则返回组件实例，如果是渲染dom，则返回具体的dom节点。通过this.refs中传入的字符串格式获取对应的元素输入对象。该对象由React.createRef()创建。使用时，创建对象中的current属性为对应的元素输入函数，这个函数会在DOM挂载时回调。这个函数会传入一个element对象，这个对象可以自己保存。使用时直接获取之前保存的element对象，传入hook即可。钩子是通过useRef()创建的，使用钩子对象的current属性生成对应的元素传入字符串。只需要在相应的元素或组件中ref属性classMyComponenttextendsReact.Component{constructor(props){super(props);this.myRef=React.createRef();}render(){return;}}访问当前节点的方式如下：this.refs.myref.innerHTML="hello";通过React.createRef()创建传入对象refs，然后给React元素添加ref属性，如下：classMyComponenttextendsReact.Component{constructor(props){super(props);this.myRef=React.createRef();}render(){return;}}传递ref时对于渲染中的元素，可以在refconstnode=this.myRef.current的current属性中访问对该节点的引用；当ref作为函数传入时，在渲染过程中，回调函数参数会传入一个element对象，然后通过实例classMyComponenttextendsReact.Component{constructor(props){super(props);this.myRef保存该对象=React.createRef();}render(){returnthis.myref=element}/>;}}获取ref对象只需要传入之前存储的对象constnode=this.myref即可hook通过useRef创建ref，整体用法与React.createRef一致，hook对象的current属性为constnode=myref.current；在以上三种情况下，ref属性都用在原生HTML元素上。如果ref设置的组件是类组件，则ref对象接收组件的挂载实例。注意不幸的是，您不能在函数组件上使用ref属性，因为它们没有实例。三、应用场景在某些情况下，我们会使用refs来更新组件，但不推荐这种方式。在更多情况下，我们使用refs来更新组件。Props和state用于重新渲染子元素过度使用refs会暴露组件实例或DOM结构，这违反了组件封装的原则。例如，避免在Dialog组件中公开open()和close()方法。传递isOpen属性固然好，但是在以下场景使用refs非常有用：对Dom元素的焦点控制、内容选择、对Dom元素的内容设置控制、媒体播放对Dom元素的操作和对组件的操作instances集成第三方DOM库参考文献https://zh-hans.reactjs.org/docs/refs-and-the-dom.htmlhttps://segmentfault.com/a/1190000020842342https://vue3js.cn/interview
