react 学习(六) 函数组件实例及类组件生命周期

本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们只分享了类组件中获取实例的方式没提函数式组件。那是因为函数组件是一个函数，执行完之后就会被销毁，所以正常我们不能直接获取函数组件的实例的。

那要是想使用的话怎么办呢？我们先看下正常给函数组件绑定 ref，会是什么效果：

function Fn(props) {
  return <h1>function</h1>;
}

costructor() {
  this.f = React.createRef()
}
render() {
  return (
    <div>
      <Fn ref={this.f} />
    </div>
  )
}

查看浏览器我们看到会打印如下的异常警告：这是告诉我们如果想函数组件使用 ref 的话需要使用 forwardRef 方法进行包裹。

function Fn(props, ref) {
  // 这里是获取的实例 dom
  return <h1 ref={ref}>function</h1>;
}
const Forward = React.forwardRef(Fn);

// 这样就可以获取到实例
<Forward ref={this.f} />

我们打印下返回的 Forward&