반응의 일반적인 데이터 흐름에서 props 전달은 새로운 props 값을 전달하여 상위 구성 요소와 하위 구성 요소가 상호 작용할 수 있는 유일한 방법입니다. 다시다시 렌더링하여 상위-하위 구성 요소 통신을 달성합니다. 물론, React 공식 웹사이트에 설명된 대로, React의 일반적인 데이터 양 외에도 경우에 따라(예: 타사 DOM 라이브러리와 통합하거나 특정 DOM 요소에 초점을 맞추는 등) 필요할 수 있습니다. 하위 구성 요소를 수정하는 방법 중 하나는 ref 방법입니다. props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是ref方式。
ref 简介
React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。
例如，下面代码:
const domCom = <button>button</button>; const refDom = ReactDOM.render(domCom，container); //ConfirmPass的组件内容省略 const refCom = ReactDOM.render(<confirmpass></confirmpass>,container); console.log(refDom); console.log(refCom);
上述代码返回控制台结果如下图所示：
ref可以挂到任何组件上，可以挂到组件上也可以是dom元素上；二者不同是与上图答案一样：
挂到组件（这里组件指的是有状态组件）上的ref表示对组件实例的引用，而挂载到dom元素上时表示具体的dom元素节点。
ref可以设置回调函数
ref属性可以设置为一个回调函数，这也是官方强烈推荐的用法；这个函数执行的时机为：
组件被挂载后，回调函数被立即执行，回调函数的参数为该组件的具体实例。组件被卸载或者原有的ref属性本身发生变化时，回调也会被立即执行，此时回调函数参数为null，以确保内存泄露。
相关推荐：《react教程》
例如下面代码：
RegisterStepTwo = React.createClass({
getInitialState(){
return {visible: true};
},
changeVisible(){
this.setState({visible: !this.state.visible});
},
refCb(instance){
console.log(instance);
},
render(){
return(
<p>
<button>{this.state.visible ? '卸载' : '挂载'}ConfirmPass
</button>
{
this.state.visible ?
<confirmpass></confirmpass>: null
}
</p>
)
}
});
上述代码，渲染到页面时可以发现console.log出对应的组件实例，切换按钮时，ConfirmPass也在挂载与卸载之间切换，所以能看到不同的console.log结果。
ref可以设置字符串
ref还可以设置为字符串值，而不是回调函数；这种方式基本不推荐使用，或者在未来的react版本中不会再支持该方式，但是可以了解一下。
例如下面input设置ref的值为字符串。
<input>
然后在其他地方如事件回调中通过this.refs.input可以访问到该组件实例，其实就是dom元素节点。
let inputEl = this.refs.input; //然后通过inputEl来完成后续的逻辑，如focus、获取其值等等
获取ref引用组件对应的dom节点
不管ref设置值是回调函数还是字符串，都可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点。
但是对于html元素使用ref的情况，ref本身引用的就是该元素的实际dom节点，无需使用ReactDOM.findDOMNode(ref)来获取，该方法常用于React组件上的ref。
ref在有状态组件中的使用
上文说到过ref用到react有状态组件时，ref引用的是组件的实例；所以可以通过子组件的ref可以访问到子组件实例的props、state、refs、实例方法(非继承而来的方法)等等。
使用ref访问子组件情况可能是以下case：
访问子组件的某个具体的dom节点完成某些逻辑，通过
this.refs.childComponentRefName.refs.someDomRefName来完成，例如segmentfault上提问者提出的问题。-
可以访问子组件的公共实例方法完成某写逻辑。例如子组件定义了一个
reset方法用来重置子组件表单元素值，这时父组件可以通过this.refs.childComponentRefName.reset()ref 소개
React에서 제공하는ref속성은 컴포넌트의 실제 인스턴스에 대한 참조로 표현되며, 이는 실제로에서 반환하는 컴포넌트입니다. ReactDOM.render() 인스턴스;ReactDOM.render()가 컴포넌트를 렌더링할 때 dom 요소를 렌더링할 때 컴포넌트 인스턴스를 반환합니다. 특정 DOM 노드를 반환합니다. - 예를 들어 다음 코드는
function TestComp(props){ let refDom; return (<p> </p><p> refDom = node}> ... </p> ) }위 코드는 아래와 같이 콘솔 결과를 반환합니다.
ref는 구성 요소 또는 dom 요소 중 어느 구성 요소에든 걸 수 있습니다. 두 개는 다음과 같습니다. 다름 대답은 위 그림과 같습니다. 🎜컴포넌트에 걸린 참조(여기서 컴포넌트는 상태 저장 컴포넌트를 나타냄)는 컴포넌트 인스턴스에 대한 참조를 나타내며, dom 요소에 마운트되면 특정 컴포넌트를 나타냅니다. DOM 요소 노드. 🎜🎜ref는 콜백 함수로 설정될 수 있습니다.
🎜ref 속성은 콜백 함수로 설정될 수 있으며, 이는 공식적으로 권장되는 사용법이기도 합니다. 이 함수 실행 시점은 다음과 같습니다. 🎜- 🎜🎜
컴포넌트는 마운트 후 즉시 콜백 함수가 실행되며, 콜백 함수의 매개 변수는 해당 컴포넌트의 특정 인스턴스입니다. 🎜🎜🎜🎜<code>구성요소가 제거되거나 원래 ref 속성 자체가 변경되는 경우 콜백도 즉시 실행됩니다. 이때 콜백 함수 매개변수는 null입니다. 메모리를 확보하세요. 🎜🎜🎜🎜관련 권장 사항: "반응 튜토리얼"🎜🎜예를 들어, 다음 코드: 🎜rrreee🎜위 코드를 페이지에 렌더링하면 console.log가 해당 구성 요소 인스턴스를 출력하는 것을 볼 수 있습니다. 버튼이 전환되면 ConfirmPass도 마운트와 마운트 해제 간에 전환됩니다. 다양한 콘솔 결과를 볼 수 있습니다. 🎜ref를 문자열로 설정할 수 있습니다.
🎜ref를 콜백 함수 대신 문자열 값으로 설정할 수도 있습니다. 이 방법은 기본적으로 권장되지 않거나 향후 반응 버전에서 더 이상 지원되지 않습니다. 그러나 당신은 알아낼 수 있습니다. 🎜🎜예를 들어 다음input은 ref 값을 문자열로 설정합니다. 🎜rrreee🎜그러면 실제로 DOM 요소 노드인 this.refs.input을 통해 이벤트 콜백과 같은 다른 위치에서 구성 요소 인스턴스에 액세스할 수 있습니다. 🎜rrreeeref 참조 컴포넌트에 해당하는 DOM 노드 가져오기
🎜ref 설정 값이 콜백 함수든 문자열이든 관계없이ReactDOM.findDOMNode(ref)를 통해 컴포넌트 마운트를 가져올 수 있습니다. 실제 DOM 노드 뒤. 🎜🎜하지만 html 요소에 대해 ref를 사용할 때 ref 자체는 요소의 실제 dom 노드를 참조하므로 이를 얻기 위해 ReactDOM.findDOMNode(ref)를 사용할 필요가 없습니다. React 구성 요소에 대한 참조에 사용됩니다. 🎜상태 저장 구성 요소에서 ref 사용
🎜위에서 언급한 것처럼 반응 상태 저장 구성 요소에서ref를 사용할 때 ref는 구성 요소의 인스턴스를 참조하므로 전달될 수 있습니다. 하위 요소를 통해 구성 요소의 ref는 props, state, refs 및 인스턴스 메서드에 액세스할 수 있습니다. 상속됨) 등이 있습니다. 🎜🎜ref를 사용하여 하위 구성 요소에 액세스하는 경우는 다음과 같습니다. 🎜- 🎜🎜
this.refs.childComponentRefName.refs.someDomRefName 세그먼트폴트에 대한 질문자가 제기한 질문과 같이 완료합니다. 🎜🎜🎜🎜하위 구성 요소의 공개 인스턴스 메서드에 액세스하여 특정 논리를 완성할 수 있습니다. 예를 들어, 하위 컴포넌트는 하위 컴포넌트의 양식 요소 값을 재설정하기 위해 <code>reset 메소드를 정의합니다. 이때 상위 컴포넌트는 this.refs.childComponentRefName을 통해 하위 컴포넌트를 완성할 수 있습니다. Reset() 구성 요소 양식 요소를 재설정합니다. 🎜🎜🎜🎜...🎜🎜🎜🎜그러나 React는 특정 로직을 완료하기 위해 상위 구성 요소에 있는 하위 구성 요소의 인스턴스 메서드에 직접 액세스하는 것을 권장하지 않습니다. 대부분의 경우 표준 React 데이터 흐름 방법을 사용하세요. 교체가 더 명확해졌습니다.🎜🎜또한 위의 경우는 구성 요소 관계가 깊게 중첩되면 매우 보기 흉해집니다. 🎜ref在无状态组件中的使用
上文说到的react组件都是指有状态的，对于无状态组件stateless component而言，正如这篇文章React创建组件的三种方式及其区别里描述的一样，无状态组件是不会被实例化的，在父组件中通过ref来获取无状态子组件时，其值为null，所以：
无法通过
ref来获取无状态组件实例。
虽然无法通过ref获取无状态组件实例，但是可以结合复合组件来包装无状态组件来在其上使用ref引用。
另外，对于无状态组件我们想访问的无非是其中包含的组件或者dom元素，我们可以通过一个变量来保存我们想要的组件或者dom元素组件的实例引用。例如下面代码：
function TestComp(props){
let refDom;
return (<p>
</p><p> refDom = node}>
...
</p>
)
}
这样，可以通过变量refDom来访问到无状态组件中的指定dom元素了，访问其中的其他组件实例类似。
ref在HOC中存在问题
react的HOC是高阶组件，简单理解就是包装了一个低阶的组件，最后返回一个高阶的组件；高阶组件其实是在低阶组件基础上做了一些事情，比方说antd组件的Form create的方法，它就是在为低阶组件封装了一些特殊的属性，比如form属性。
既然HOC会基于低阶组件生成一个新的高阶组件，若用ref就不能访问到我们真正需要的低阶组件实例，我们访问到的其实是高阶组件实例。所以:
若HOC不做特殊处理，ref是无法访问到低阶组件实例的
要想用ref访问低阶组件实例，就必须得HOC支持，就像Redux的connect方法提供的withRef属性来访问低阶组件一样。具体可以参考这里。
总结
ref提供了一种对于react标准的数据流不太适用的情况下组件间交互的方式，例如管理dom元素focus、text selection以及与第三方的dom库整合等等。 但是在大多数情况下应该使用react响应数据流那种方式，不要过度使用ref。
另外，在使用ref时，不用担心会导致内存泄露的问题，react会自动帮你管理好，在组件卸载时ref值也会被销毁。
最后补充一点：
不要在组件的
render方法中访问ref引用，render方法只是返回一个虚拟dom，这时组件不一定挂载到dom中或者render返回的虚拟dom不一定会更新到dom中。
