React 源码系列 | ref 功能详解 | 源码 + 实战例子 | 你可能并不真正懂 ref

时间  2019-11-09
标签 react 源码 系列 ref 功能 详解 实战 例子 可能 并不 真正 栏目 React 繁體版
原文   原文链接

Refs 提供了一种方式，容许咱们访问 DOM 节点或在 render 方法中建立的 React 元素。 在典型的 React 数据流中，props 是父组件与子组件交互的惟一方式。要修改一个子组件，你须要使用新的 props 来从新渲染它。可是，在某些状况下，你须要在典型数据流以外强制修改子组件。被修改的子组件多是一个 React 组件的实例，也多是一个 DOM 元素。对于这两种状况，React 都提供了解决办法。html

本文基于 React v16.8.6，本文代码地址react

相关官方文档git

什么时候使用 Refs

  • 管理焦点，文本选择或媒体播放（显示输入框的时候自动聚焦）
  • 触发强制动画
  • 集成第三方 DOM 库（传递 dom 节点进去）

3 种 ref

string ref

class StringRef extends Component {
  componentDidMount() {
    console.log('this', this);
    console.log('this.props', this.props);
    console.log('this.refs', this.refs);
  }
  render() {
    return (
      <div ref="container"> StringRef </div>
    )
  }
}
console.log(<StringRef />); 复制代码

打印的结果github

<StringRef /> 是由 React.createlElement 产生的一个对象，自身不是实例，因此它和 this 存在区别。数组

callback ref

class CallbackRef extends Component {
  componentDidMount() {
    console.log(this.props);
  }
  render() {
    return (
      <div ref={r => this.container = r}> CallbackRef </div>
    )
  }
}
复制代码

object ref

function ObjectRef(params) {
  const r = useRef();
  // const r = createRef();
  useEffect(() => {
    console.log('ObjectRef', r);
  });
  return (
    <div ref={r}> ObjectRef </div>
  )
}
复制代码

ref 高级使用

传递回调形式的 refs

class ParentComp extends Component {
  componentDidMount() {
    setTimeout(() => {
      console.log('this.inner', this.inner);
    }, 1000);
  }
  render() {
    return (
      <ChildComp innerRef={r => this.inner = r} /> ) } } function ChildComp({ innerRef }) { const r = createRef(); useEffect(() => { innerRef(r.current); }); return ( <div ref={r}> ChildComp </div> ) } 复制代码

这样从父组件就能够拿到子组件了。babel

forwardRef

forward refdom

class Input extends Component {
  focus = () => {
    console.log('focused');
    this.input.focus();
  }
  render() {
    return (
      <div>
        <input ref={r => this.input = r} id="input" />
        <button onClick={this.focus}>focus input</button>
      </div>
    )
  }
}
function FocusInput(Comp) {
  class FocusInputComp extends React.Component {
    render() {
      const {forwardedRef, ...rest} = this.props;
      // 将自定义的 prop 属性 “forwardedRef” 定义为 ref
      return <Comp ref={forwardedRef} {...rest} />;
    }
  }
  // 注意 React.forwardRef 回调的第二个参数 “ref”。
  // 咱们能够将其做为常规 prop 属性传递给 LogProps，例如 “forwardedRef”
  // 而后它就能够被挂载到被 LogPros 包裹的子组件上。
  return React.forwardRef((props, ref) => {
    return <FocusInputComp {...props} forwardedRef={ref} />;
  });
}
function ForwardComp(params) {
  const input = useRef();
  const ForwardInput = FocusInput(Input);
  useEffect(() => {
    console.log(input);
    setTimeout(() => {
      input.current.focus();
    }, 1000);
  });
  return <ForwardInput ref={input} inputName="ForwardInput" />;
}
复制代码

过 1s 以后输入框会自动 focus。函数

forwardRef 源码

去除 warning 代码以后，react/src/forwardRef 中的源码源码分析

// 这个 API 我也没有用过，具体文档看这里 https://reactjs.org/docs/forwarding-refs.html
// 总结来讲就是能把 ref 传递到函数组件上
// 其实没有这个 API 以前，你也能够经过 props 的方式传递 ref
// 这个实现没啥好说的，就是让 render 函数多了 ref 这个参数
export default function forwardRef<Props, ElementType: React$ElementType>( render: (props: Props, ref: React$Ref<ElementType>) => React$Node, ) {
  return {
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };
}
复制代码

这仅仅是构建了一种结构，渲染要交给 react dom。post

打一个 debugger 查看调用栈。

renderWithHooks

本次调用时 renderWithHooks 的参数。

参数解释

  • Component 就是 forwardRef 中的匿名函数
  • props 是 React.forwardRef 生成的组件的 props，传递 inputName 时，props 为 {inputName: xxx}
  • refOrContext 是 React.forwardRef 生成的组件的 ref

在 react-reconciler/src/ReactFiberHooks 中。

// forwardRef 处理的地方
export function renderWithHooks( current: Fiber | null, workInProgress: Fiber, Component: any, props: any, refOrContext: any, nextRenderExpirationTime: ExpirationTime, ): any {
  // ...
  // forwardRef((props, ref) => (<Comp {...props} forwardRef={ref} />))
  // 将从父组件上得到的 props 和 ref 传递给匿名函数，这个匿名函数实际也是一个组件(function component)
  let children = Component(props, refOrContext);
  // ...
  return children;
}
复制代码

updateForwardRef

再看 updateForwardRef，在 react-reconciler/src/ReactFiberBeginWork 文件中

这里显示的很是清楚。

  • render 是 React.forwardRef 返回对象的 render
  • ref 就是用 useRef 建立的对象

beginWork

再往上看，调用的是 beginWork，在 react-reconciler/src/ReactFiberBeginWork。

在 shared/ReactWorkTags 中 export const ForwardRef = 11;。再往上不是本篇文章的范围，不做讲解，囧！！！

分析 ref 是如何被挂载的

从上篇 React 源码文章 React 源码系列-Component、PureComponent、function Component 分析 ，咱们知道 <StringRef> 由 babel 编译以后，是由 createElement 来生成一个对象的。函数执行过程当中，会将 ref 属性从 props 中单独拿出来。

通过 function createElementWithValidation(type, props, children)，在 function createElement(type, config, children) 中被提取出来。

if (config != null) {
    // 验证 ref 和 key，只在开发环境下
    if (hasValidRef(config)) {
      ref = config.ref;
    }
  // ...
  }
复制代码

在 ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props) 中，ref 传递到返回的对象

注意到一个问题没有？

咱们打印的 <StringRef /> 竟然 ref = null

这是由于，咱们的 ref 不在 <StringRef /> 的属性上，而是在 <div /> 上！！！

在 ReactElement(建立 element 的最后一个环节) 中打印

结果是

ref => refs 是在哪里实现的呢？

咱们见到的组件如今都还仅仅是由 createElement 生成的，父与子、root 与 曾曾曾 child 之间的联系是 type ，type 是组件自己，class component 是 render 方法里面返回对象， function component 是直接 return 返回。

咱们生成的结构，是交给 ReactDOM.render 渲染出来的，这篇文章不讲渲染部分，直达 refs 。

里面的 element._owner 就是挂载在 render 方法的class，element 是 render 方法 return 的一部分。

例子

class A extends Component{
  render() {
      return <StrComp ref="xxx" />; }; } // A 就是 StrComp 的 owner 复制代码

coerceRef

在 react-reconciler/src/ReactChildFiber

coerceRef 功能： 检查 element.ref 并返回 ref 函数或者对象

  • 若是是 string ref，则返回一个函数，返回的函数主要是把该 ref 挂载在 element 的 owner 实例的 refs 上 this.refs
  • 若是是其余类型的 ref，则直接返回它
function coerceRef( returnFiber: Fiber, current: Fiber | null, element: ReactElement, ) {
  // mixedRef 是 function 或者 object 就直接 return 它
  let mixedRef = element.ref;
  // 若是是字符串，则返回一个函数，这个函数会将 ref 指向的 dom 挂载在 this.refs 上
  if (
    mixedRef !== null &&
    typeof mixedRef !== 'function' &&
    typeof mixedRef !== 'object'
  ) {
    // 拥有者 就是给其它组件设置 props 的那个组件。
    // 更正式地说，若是组件 Y 在 render() 方法是建立了组件 X，那么 Y 就拥有 X。
    // 组件不能修改自身的 props - 它们老是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。
    if (element._owner) {
      const owner: ?Fiber = (element._owner: any);
      let inst; // undefined
      // 有 owner 就提取 owner 实例
      if (owner) {
        const ownerFiber = ((owner: any): Fiber);
        // owner 实例（父组件实例）
        inst = ownerFiber.stateNode;
      }
      // mixedRef 强制转换成字符串
      const stringRef = '' + mixedRef;
      // Check if previous string ref matches new string ref
      if (
        current !== null &&
        current.ref !== null &&
        typeof current.ref === 'function' &&
        current.ref._stringRef === stringRef
      ) {
        return current.ref;
      }
      // 重点是这个函数
      const ref = function(value) {
        // 拿到 owner stateNode 的 refs
        let refs = inst.refs;
        // var emptyObject = {};
        // {
        // Object.freeze(emptyObject);
        // }
        // Component 中 this.refs = emptyObject;
        // export const emptyRefsObject = new React.Component().refs;
        if (refs === emptyRefsObject) {
          // This is a lazy pooled frozen object, so we need to initialize.
          refs = inst.refs = {};
        }
        if (value === null) {
          delete refs[stringRef];
        } else {
          // 将 dom 和 this.props.refs.xxx 绑定
          refs[stringRef] = value;
        }
      };
      // 给 ref 函数添加 _stringRef 属性为 stringRef
      ref._stringRef = stringRef;
      return ref;
    }
  }
  return mixedRef;
}
复制代码

ownerFiber.stateNode 就是 owner 组件的实例，能够滑到上面最上面去看 String ref 的 this

咱们打个 debuger 看看。

注意 div...cxqa2 ，看看咱们 string ref 指向的 div

ref 函数处理的就是我写的 string ref。

commitAttachRef

在 react-reconciler/src/ReactFiberCommitWork

调用栈往上看，调用了 commitAttachRef。

看到 commitAttachRef 的内容没有？是它来处理 dom 和 refs、function、createRef object 的挂接的。

function commitAttachRef(finishedWork: Fiber) {
  // finishedWork 处理好的 FiberNode， string ref 在这以前被 coerceRef 函数处理好了
  const ref = finishedWork.ref;
  if (ref !== null) {
    // 获取它的实例
    const instance = finishedWork.stateNode;
    let instanceToUse;
    // 下面的 switch 多是准备加某个功能如今预留出来的
    switch (finishedWork.tag) {
      // 原生组件，div span ...
      case HostComponent:
        // function getPublicInstance(instance) {
        // return instance;
        // }
        // instanceToUse === instance true
        instanceToUse = getPublicInstance(instance);
        break;
      default:
        instanceToUse = instance;
    }
    if (typeof ref === 'function') {
      // ref 是函数由两种状况
      // 一、string ref 返回的函数，传进去 ref 本应该指向的实例，则 `refs[stringRef] = instanceToUse`
      // 二、ref 属性咱们定义了一个函数 `r => this.xxx = r`，则 `this.xxx => instanceToUse`，这样后面就可使用 `this.xxx` 调用该实例了
      ref(instanceToUse);
    } else {
      // dev 时，检测对象是否包含 current 属性 
      // ...

      // 传进来一个对象，则把实例赋值给 `xx.current`
      // `React.createRef()` 返回一个对象 `{current: null}`
      // `React.useRef()` 返回一个对象 `{current: undefined}`
      // 给变量引用的对象的某个属性赋值，在其余做用域依然能够获取到该属性
      ref.current = instanceToUse;
    }
  }
}
复制代码

finishedWork

这里 finishedWork.stateNode 就是 html div

涉及的函数

  • forwardRef
  • renderWithHooks
  • updateForwardRef
  • beginWork
  • coerceRef
  • commitAttachRef

关于 ref 的源码分析就到这里。收获不少，这篇文章大大加深了我对 ref 的理解！！！

没作源码分析以前，总感受很是困难， react-dom 源码就有 2.5w 行，看到了都怕！！！如今越分析越有劲，每次分析都是在不断加深理解。

广告时间

欢迎关注，每日进步！！！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程