refs转发 React.forwardRef
<div style="margin: 0 auto; font-size: 14px"><div style="color: rgba(143, 115, 87, 1); line-height: 100px; text-align: center; font-size: 24px">2020-04-01</div>
<div style="text-align: center; height: 34px; border-bottom: 2px solid rgba(48, 51, 54, 1)"><span style="background-color: rgba(48, 51, 54, 1); font-size: 20px; color: rgba(255, 255, 255, 1); display: inline-block; line-height: 24px; padding: 4px">refs转发</span></div>
<div style="padding-top: 40px">
<p>前几天刚总结完ref&DOM之间的关系，并且想通了3种ref的绑定方式</p>
<p>今天总结一下refs转发</p>
<p>这是react中一直困扰我的一个点</p>
</div>
<div style="font-size: 18px; color: rgba(51, 51, 51, 1); line-height: 40px; font-weight: bold">示例:</div>
<div><span style="font-weight: bold">输入: </span> words = ["time", "me", "bell"]</div>
<div><span style="font-weight: bold">输出: </span>10</div>
<div><span style="font-weight: bold">解释: </span> S = "time#bell#" ， indexes = 。</div>
<div style="font-size: 16px; color: rgba(122, 68, 66, 1); line-height: 40px">用途1: 传递refs 到 DOM 组件</div>
<div>在下面的示例中，FancyButton 使用 React.forwardRef 来获取传递给它的 ref，然后转发到它渲染的 DOM button：</div>
<div>这样，使用 FancyButton 的组件可以获取底层 DOM 节点 button 的 ref ，并在必要时访问，就像其直接使用 DOM button 一样。</div>
<div><img src="https://img2020.cnblogs.com/blog/1962579/202004/1962579-20200401104816379-1861130749.png"></div>
<div style="font-size: 18px; color: rgba(51, 51, 51, 1); line-height: 40px; font-weight: bold">以下是对上述示例发生情况的逐步解释:</div>
<ul style="margin-top: 0">
<li>我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。</li>
<li>我们通过指定 ref 为 JSX 属性，将其向下传递给 FancyButton ref={ref}</li>
<li>React 传递 ref 给 forwardRef 内函数 (props, ref) => ...，作为其第二个参数。</li>
<li>我们向下转发该 ref 参数到 button ref={ref} ，将其指定为 JSX 属性。</li>
<li>当 ref 挂载完成，ref.current 将指向 button DOM 节点。</li>
</ul>
<div style="font-size: 16px; color: rgba(122, 68, 66, 1); line-height: 40px">用途2: 在高阶组件中转发 refs</div>
<div>我们在使用HOC或者decorator时，得到的组件并不是真正的那个组件而是装饰过后 被包裹后的组件</div>
<div>不做处理的decorator如下：</div>
<div> </div>
<div><img src="https://img2020.cnblogs.com/blog/1962579/202004/1962579-20200401104950987-1403243709.png"></div>
<div> </div>
<div> </div>
<div>使用decorator装饰 Son组件</div>
<div><img src="https://img2020.cnblogs.com/blog/1962579/202004/1962579-20200401105259457-1080317782.png"></div>
<div> </div>
<div>所以如果我们直接在组件上写ref={...} 通过ref得到的是包裹后的新组件 这并不符合我们通常的预期 如下：</div>
<div> </div>
<div><img src="https://img2020.cnblogs.com/blog/1962579/202004/1962579-20200401104845299-494260525.png"></div>
<div> </div>
<div><img src="https://img2020.cnblogs.com/blog/1962579/202004/1962579-20200401104903112-1999345356.png"></div>
<div> </div>
<div>当我们使用React.forwardRef处理decorator后，ref指向了Son组件 这是我们通常所希望的</div>
<div>使用React.forwardRef处理decorator如下：</div>
<div> </div>
<div><img src="https://img2020.cnblogs.com/blog/1962579/202004/1962579-20200401105022750-1032387883.png"></div>
<div> </div>
<div>使用修改后的decorator装饰Son组件</div>
<div><img src="https://img2020.cnblogs.com/blog/1962579/202004/1962579-20200401105344055-237659928.png"></div>
<div> </div>
<div>这种情况下 在父组件中给Son绑定的ref={this.son1Ref}的指向是指向Son组件</div>
<div> </div>
<div><img src="https://img2020.cnblogs.com/blog/1962579/202004/1962579-20200401105512981-356605210.png"></div>
<div> </div>
<div><img src="https://img2020.cnblogs.com/blog/1962579/202004/1962579-20200401105610719-229244142.png"></div>
<div> </div>
<div>可见 forwardRef 在 HOC中的作用是很大的。</div>
<div> </div>
</div><br><br>
来源：https://www.cnblogs.com/lanpang9661/p/12611087.html
頁:
[1]