React Ref 和 React forwardRef

相关文章推荐

威武的马克杯 · react相关面试知识点总结 - ...· 4 周前 ·

有胆有识的泡面 · 「react进阶」一文吃透react-hoo ...· 4 周前 ·

奔跑的鸭蛋 · 在onChange事件中获取按钮值 - · 4 周前 ·

腼腆的卡布奇诺 · React应用报错：UncaughtInva ...· 2 周前 ·

面冷心慈的帽子 · react-dnd实现拖拽API学习_exp ...· 2 周前 ·

谈吐大方的山楂 · 为什么越来越多的人听Techno？诞生自昔日 ...· 2 月前 ·

聪明伶俐的大象 · Multiple LCS projects ...· 3 月前 ·

温柔的煎鸡蛋 · 学习必备软件：OneNote+Mindmas ...· 4 月前 ·

聪明伶俐的甘蔗 · 道教：六丁六甲，皆是道教神仙体系中的护法神将 ...· 5 月前 ·

私奔的青椒 · python tkinter图片缩放 - ...· 5 月前 ·

在数据流之外直接操作子孙组件：

ref属性赋值给Html元素，那么this.ref.current就获取到html元素
ref属性赋值给常规React组件，那么this.ref.current就获取到组件的实例
不要过度使用：
1. 有需要直接触达和操作子孙组件实例或者操作子dom元素的情况，这时候应该使用React Ref。
2. 如果属性下传能够解决问题，应该使用声明式的属性传递，而非命令式的ref。
3. 使用场景：
  1. 用来处理立即执行的动画，(我们知道流畅的动画或对用户动作的即时响应一般需要脱离react数据流，需要直接操作DOM节点(D3.js)或者node节点(cocos.js))。
  2. 用来处理非受控组件（比如没有用onChange检测数值的input元素）的焦点，什么是受控/非受控组件参考文章。
  3. 用来与第三方库对接，我知道的有d3 或者 cocos，因为第三方库需要获取dom或者节点。
  4. 简而言之就是自动透传引用（Ref），能让组件接收传过来的ref, 向下（或者说向前）传递Ref。
```
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
// You can now get a ref directly to the DOM button:
// 现在你可以获取DOM按钮的引用
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;　　
```
    上述代码的解释：
  5. 首先创建了一个ref, 这个ref的目的就是抓到子组件中的<button>DOM节点
  6. 通过组件jsx属性把ref传给子组件<FancyButton>，这一行
```
<FancyButton ref={ref}>Click me!</FancyButton>;　
```
  7. FancyButton组件通过React.forwardRef透传props和ref,这里ref才是我们要注意的点。
  8. forwardRef参数是一个函数，这个函数有一个ref参数，将其赋给子组件<button> 的ref属性
  9. 当ref关联上之后，这个ref.current将指向<button>的DOM节点。
  10. 比如我们写一个打印前后属性的高阶组件logProps，这个高阶组件能够透传ref
```
 1 function logProps(Component) {
 2   class LogProps extends React.Component {
 3     componentDidUpdate(prevProps) {
 4       console.log('old props:', prevProps);
 5       console.log('new props:', this.props);
 8     render() {
 9       const {forwardedRef, ...rest} = this.props;
11       // 把常规属性"forwardedRef"作为ref赋值给传过来的Component组件
12       return <Component ref={forwardedRef} {...rest} />;
16   // 注意React.forwardRef提供的第二个参数ref.
17   // 我们可以把ref作为一个常规属性"forwardedRef"传给LogProps这个组件
18   // 就可以跟实例绑定.
19   return React.forwardRef((props, ref) => {
20     return <LogProps {...props} forwardedRef={ref} />;
21   });
```

推荐文章

威武的马克杯 · react相关面试知识点总结 - beifeng11996

4 周前

有胆有识的泡面 · 「react进阶」一文吃透react-hooks原理 | 微信开放社区

4 周前

奔跑的鸭蛋 · 在onChange事件中获取按钮值 -

4 周前

腼腆的卡布奇诺 · React应用报错：UncaughtInvariantViolation解析及解决方案

2 周前

面冷心慈的帽子 · react-dnd实现拖拽API学习_expected drag drop context

2 周前

谈吐大方的山楂 · 为什么越来越多的人听Techno？诞生自昔日汽车中心的高科技舞曲——Techno_搜狐汽车_搜狐网

2 月前

聪明伶俐的大象 · Multiple LCS projects and environments on one Microsoft Entra tenant - Finance & Operations | Dynami

3 月前

温柔的煎鸡蛋 · 学习必备软件：OneNote+Mindmaster完美结合（精彩内容持续更新中…….）_onenote 与什么软件搭配-CSDN博客

4 月前

聪明伶俐的甘蔗 · 道教：六丁六甲，皆是道教神仙体系中的护法神将_百科TA说

5 月前

私奔的青椒 · python tkinter图片缩放 - CSDN文库

5 月前

React.forwardRef((props,ref)=><Compnent/>)

React.forwardRef((props, ref)=><Componnet>)在高阶组件中的使用：