import React from 'react'
function Parent() {
  const domRef = React.useRef()
  const classRef = React.useRef()
  const funcRef = React.useRef()
  useEffect(() => {
    console.log(domRef.current) // 指向 div 节点
    console.log(classRef.current) // 指向 Child1 组件实例
    console.log(funcRef.current) // undefined
  }, [])
  return (
    <>
      <div ref={domRef}>这是DOM节点</div>
      <Child1 ref={classRef}>这是类组件</Child1>
      <Child2 ref={funcRef}>这是函数组件</Child2>
    </>
  )
}

import React from 'react'
class Parent extends React.Component {
  domRef = React.createRef()
  classRef = React.createRef()
  funcRef = React.createRef()
  componentDidMount() { 
    console.log(this.domRef.current) // 指向 div 节点
    console.log(this.classRef.current) // 指向 Child1 组件实例
    console.log(this.funcRef.current) // null
  }
  render = () => (
    <>
      <div ref={this.domRef}>这是DOM节点</div>
      <Child1 ref={this.classRef}>这是类组件</Child1>
      <Child2 ref={this.funcRef}>这是函数组件</Child2>
    </>
  )
}

import React from 'react'
class Parent extends React.Component {
  componentDidMount() {
    console.log(this.domRef) // 指向 div 节点
    console.log(this.classRef) // 指向 Child1 组件实例
    console.log(this.funcRef) // undefined
  }
  setCallbackRef(instKey) {
    return ref => {
      // 将函数赋予 ref 属性时，对应的 DOM 节点、类组件实例作为函数参数返回。
      // 作用于函数组件，将不符合任何参数，即 ref 为 undefined。
      this[instKey] = ref
    }
  }
  render = () => (
    <>
      <div ref={this.setCallbackRef('domRef')}>这是DOM节点</div>
      <Child1 ref={this.setCallbackRef('classRef')}>这是类组件</Child1>
      <Child2 ref={this.setCallbackRef('funcRef')}>这是函数组件</Child2>
    </>
  )
}

import React from 'react'
class Parent extends React.Component {
  componentDidMount() {
    // 所有字符串 Ref 将会被添加到组件实例的 refs 对象上。
    console.log(this.refs.domRef) // 指向 div 节点
    console.log(this.refs.classRef) // 指向 Child1 组件实例
    console.log(this.refs.funcRef) // undefined
  }
  render = () => (
    <>
      <div ref="domRef">这是DOM节点</div>
      <Child1 ref="classRef">这是类组件</Child1>
      <Child2 ref="funcRef">这是函数组件</Child2>
    </>
  )
}

class Comp extends React.Component {
  constructor(props) {
    this.xxxRef = React.createRef()
  }
  // 或者
  // xxxRef = React.createRef()
}

import React from 'react'
function Comp() {
  const domRef = React.createRef()
  const [num, setNum] = useState(0)
  const focus = () => domRef.current.focus()
  const update = () => setNum(num + 1)
  return (
    <>
      <input ref={domRef} />
      <button onClick={focus}>聚焦</button>
      <button onClick={update}>点击触发更新 {num}</button>
    </>
  )
}

import React from 'react'
function Comp() {
  const domRef = createRef()
  const [num, setNum] = useState(0)
  useEffect(() => {
    setNum(1) // 触发一个更新
    setTimeout(() => {
      domRef.current.focus() // 这里能正常聚焦吗？
    }, 3000)
  }, [])
  return <input ref={domRef} />
}

var a = 'global'
function foo() {
  var a = 'local'
  function bar() {
    console.log(a) // 无论 bar 何时何地调用，总会打印 local
    // 注意，词法作用域与 this 是两回事，别混淆了。
  }
}
// 当执行函数 foo() ，会创建函数执行上下文（可看作是一个对象，包含了 { AO, Scope, this } 三个属性）：
// 
// * AO ：它会记住当前函数内声明的变量（含形参）、函数、 arguments （非箭头函数）等。
// * Scope ：它是基于当前函数 foo 的 [[scope]] 属性 + 当前执行上下文的 AO 对象组成的，这个就是常说的作用域链。
// * this ：它跟函数如何调用有关（但跟闭包没关系，不展开讲述）
// 
// 有一点很重要，就是函数被定义时，其内部属性 [[scope]] 就会记录当前的 Scope 。比如当 bar() 被调用，要查找变量 a ，它先从 bar 执行上下文中的 Scope 查找，发现当前 AO 对象没有，于是往上一层 Scope 中查找并成功找到变量 a ，值为 local ，就停止查找了。
// 
// 回到这个 Comp 例子，它本身只是一个函数而已。每当执行一次 Comp() 函数，会创建一个全新的执行上下文， AO 会记录变量 domRef （当然 num 、 setNum 它也会记录的），
// ...
// 由于词法作用域与函数如何调用没关系，所以你不用管 useEffect 、 useEffect 内部的函数、及其回调函数是如何调用的。你只要清楚内部各种函数没有定义一个名为 domRef 的变量即可。
// ...
// 然后执行到 setTimeout 这行代码，会在 useEffect 回调函数内创建一个匿名的箭头函数，尽管我们没有办法引用它，但 AO 也会记住的。由于 Comp 之后的每个执行上下文中都没有 domRef 变量，所以最终执行匿名箭头函数，寻找变量 domRef 时，总会往作用域链上找到 Comp.[[scope]] ，并从其 AO 对象上找到了 domRef 变量，值为 { current: null } 。

import React from 'react'
class Parent extends React.Component {
  parentRef1 = React.createRef()
  parentRef2 = React.createRef()
  componentDidMount() {
    // 以下这两种方式都可以获取到子组件的 input 节点
    console.log(this.parentRef1.current)
    console.log(this.parentRef2.current)
  }
  render = () => (
    <>
      <div>这是父组件</div>
      {/* 原始方法：使用特殊的属性名来传递 */}
      <Child forwardRef={this.parentRef1}>这是子组件</Child>
      {/* ForwardRef 方法：可以将 Ref 对象直接传入 ref 属性，可以是类组件或函数组件  */}
      <NewChild ref={this.parentRef2}>这是子组件</NewChild>
    </>
  )
}
function Child(props) {
  return (
    <>
      <div>{props.children}</div>
      <input ref={props.forwardRef} placeholder="子组件的input" />
    </>
  )
}
// 第二个参数 ref 只在使用 React.forwardRef 定义组件时存在，函数组件或类组件不接收 ref 参数。
const NewChild = React.forwardRef((props, ref) => (
  <Child {...props} forwardRef={ref} />
))

import React from 'react'
class Parent extends React.Component {
  parentRef = React.createRef()
  componentDidMount() {
    // 将会获取到 Child 组件
    console.log(this.parentRef.current)
  }
  render = () => (
    <>
      <div>这是父组件</div>
      <NewChild ref={this.parentRef}>这是子组件</NewChild>
    </>
  )
}
class Child extends React.Component {
  render = () => (
    <>
      <div>{this.props.children}</div>
      <input ref={this.props.forwardRef} placeholder="子组件的input" />
    </>
  )
}
function HOCWrapper(Comp) {
  // 这里的高阶组件啥也没做，就单纯做了个转发罢了
  // 为了举例而举例...
  class WrapperComponent extends React.Component {
    render() {
      const { forwardRef, ...others } = this.props
      return <Comp {...others} ref={forwardRef} />
    }
  }
  // 如果这里不做转发，将来对 Comp 作用的 Ref 对象，将指向 WrapperComponent 组件实例
  return React.forwardRef((props, ref) => <WrapperComponent {...props} forwardRef={ref} />)
}
const NewChild = HOCWrapper(Child)