React源码 React ref
<div>ref 的功能，在 react 当中。我们写了一个组件，在这个时候，我们的 render function 里面我们会渲染一系列的子组件或者 dom 节点，有时候我们会希望有这样的需求，就是我们要获取某个 dom 节点，或者是某个子组件的实例。去对他进行一些手动的操作，而不仅仅是 props 更新这种方式去更新这个节点。比如我们要获取一个 dom 节点，自己去绑定某一些事件，然后去做一些操作。通过 ref 这个特殊的 attr 非常方便的在组件内部去获取到子节点的具体的一个实例。这就是 ref 的核心功能。</div><p> </p>
<div>代码</div>
<div>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class RefDemo extends React.Component {
constructor() {
super()
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.objRef =<span style="color: rgba(0, 0, 0, 1)"> React.createRef()
}
componentDidMount() {
setTimeout(() </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.refs.stringRef.textContent = 'string ref got'
<span style="color: rgba(0, 0, 255, 1)">this</span>.methodRef.textContent = 'method ref got'
<span style="color: rgba(0, 0, 255, 1)">this</span>.objRef.current.textContent = 'obj ref got'<span style="color: rgba(0, 0, 0, 1)">
}, </span>1000<span style="color: rgba(0, 0, 0, 1)">)
}
render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><>
<p ref="stringRef">span1</p>
<p ref={ele => (<span style="color: rgba(0, 0, 255, 1)">this</span>.methodRef = ele)}>span3</p>
<p ref={<span style="color: rgba(0, 0, 255, 1)">this</span>.objRef}>span3</p>
</>
<span style="color: rgba(0, 0, 0, 1)"> )
}
}</span></pre>
</div>
<p> </p>
</div>
<p> </p>
<div>如上，在 react 当中有3中使用 ref 的方式</div>
<div>1、<strong>string ref </strong></div>
<div>
<div class="cnblogs_code">
<pre><p ref="stringRef">span1</p>
=>
<span style="color: rgba(0, 0, 255, 1)">this</span>.refs.stringRef.textContent = 'string ref got'</pre>
</div>
<p>也就是我们想要获取的这个节点的 props 上面使用一个 ref 属性，然后传入一个字符串，传入这个字符串之后呢，react 在完成这一个节点的渲染之后，他会在 this.refs 这个对象上面挂载这个 string 对应的一个 key 。那么这个 key 他所指向的就是我们这个节点他的实例的对象。如果是 dom 节点，他就对应 dom 的实例，如果是子组件就会是子组件的实例，就是我们的 class component。如果是 function component 怎么办呢，正常来讲，他是会失败的，也就是拿到的会是个 undefined 。因为 function component 没有实例。这是第一种使用的方式，也是 v16 之前用的最多的方式。也是最不被推荐的一种方式。在下一个大版本之中会被废弃的一种方式</p>
</div>
<p> </p>
<div>2、<strong>function</strong> </div>
<div>
<div class="cnblogs_code">
<pre><p ref={ele => (<span style="color: rgba(0, 0, 255, 1)">this</span>.methodRef = ele)}>span2</p>
=>
<span style="color: rgba(0, 0, 255, 1)">this</span>.methodRef.textContent = 'method ref got'</pre>
</div>
<p>这个我们的 ref 传入的是一个方法，这个方法会接收一个参数，这个参数就是这个节点对应的实例，如果是 dom 节点对应的是 dom 的实例，如果是组件对应的是组件的实例。然后我们可以自己去this上面去挂载某一个属性，比如在这里，对应的是 methodRef 。</p>
</div>
<p> </p>
<div>3、<strong>createRef</strong> (这是 react 提供给我们的 api)</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>.objRef =<span style="color: rgba(0, 0, 0, 1)"> React.createRef()
这个 api 就是 React.createRef()，这个对象其实就是这样的 { current: </span><span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)"> } 。然后这个对象传入给某一个节点
</span><p ref={<span style="color: rgba(0, 0, 255, 1)">this</span>.objRef}>span3</p></pre>
</div>
<p>在组件渲染完成之后，会把这个节点对应的实例挂载到这个对象的 current 这个属性里面，我们要调用他就是通过</p>
</div>
<div>this.objRef.current.textContent = 'obj ref got'</div>
<p> </p>
<div>运行这个js文件，显示 span1 span2 span3 。一秒钟后被 string ref got ， method ref got， obj ref got 替换。然后我们看 createRef 这个的源码，因为其他的两种方式并没有在源码上有任何的体现，因为他们传入的一个是 string ，一个 function 。并没有直接挂载到 React 上面的一个 api。只有第三种方式 React.createRef 给我们创建了这么一个东西。</div>
<p> </p>
<div>我们看 React.js 里面 createRef 引自 ReactCreateRef</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
* @flow
</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
import type {RefObject} from </span>'shared/ReactTypes'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> an immutable object with a single mutable value</span>
export <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> createRef(): RefObject {
const refObject </span>=<span style="color: rgba(0, 0, 0, 1)"> {
current: </span><span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">,
};
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (__DEV__) {
Object.seal(refObject);
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> refObject;
}</span></pre>
</div>
</div>
<p>点开源码，震惊了，非常的少。 也非常的简单，他返回的就是这样一个对象 refObject 。他里面 current 是 null 。如果是开发状态下 Object.seal(refObject) 。refObject 这个对象被封闭，阻止添加新属性并将现有属性标记为不可配置。当前属性的值只要可写就可以改变</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/wzndkj/p/11938192.html
頁:
[1]