认识 React Hooks 之三

今天是探索 Hooks 基础观念的最後一天，要学习的是 useImperativeHandle、useLayoutEffect 、如何打造自己的 Hook 与使用 Hook 时需要注意的几个规则。

而打造自己的 Hook 的部分只会了解观念，运用的部分则不在今天的范围之内。

学习 React Hooks 基础观念的探索之旅也在今天的篇幅会暂时告一段落，接着就要靠着实务经验来挖掘更多深层的观念。

那事不宜迟，赶紧今天的学习吧！

useImperativeHandle

在前几天的篇幅有介绍到如果需要像是 focus 在 input 元素之类的需求，我们可以透过 useRef 的方式达成。

但如果今天这个 input 元素是额外再封装成一个 component 的话，而父 component 也想要对於这个被额外封装成 component 的 input 元素可以执行像是 focus 的需求的话，那这时候就还需要用到 useImperativeHandle 这个 Hook

这里让我们看看这个测试范例:

相关测试范例，点击前往。

首先我们先如同之前使用 useRef 的方式一样设定

import React, { useRef } from "react";
import "./styles.css";
import BaseInput from "./components/BaseInput";

export default function App() {
  const inputRef = useRef(null);
  const foucsBaseInput = () => {
    inputRef.current.focus();
  };
  return (
    <div className="App">
      <h1 onClick={foucsBaseInput}>useImperativeHandel Demo: 请点击这段文字</h1>
      <BaseInput ref={inputRef} />
    </div>
  );
}

BaseInput 元件封装的是一个简单的 input 元素，当点击 h1 的文字内容时，会 focus 在这个 BaseInput 元件上。

接着我们看看 BaseInput 元件的设定:

import React, { useRef, useImperativeHandle, forwardRef } from "react";

const BaseInput = (props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return (
    <input
      type="text"
      placeholder="type text here..."
      ref={inputRef}
      {...props}
    />
  );
};

export default forwardRef(BaseInput);

forwardRef 用来建立一个新的 React component 并将 ref 属性转交到底下的另外一个 component。

而这里我们透过 export default forwardRef(BaseInput) 将 ref 属性转交给 input 元素。

接着透过 useImperativeHandle hook 在使用 ref 属性时可以向父 component 暴露自定义的 instance 的值。

而这里则是暴露了 focus 这个方法。

useLayoutEffect

使用方式与 useEffect 一样，只是差别在触发的时间点是在所有 DOM 改变之後才会同步调用。

但这个方式会阻碍浏览器的更新，所以在使用上应该先以 useEffect 为主，如果有问题才使用 useLayoutEffect。

打造自己的 Hook

除了 React 提供的 Hooks 之外，我们也可以打造自订的 Hooks，乍听之下可能觉得很抽象，但其实本质就像我们在撰写 Javascript function 一样，当我们有多个 function 中有共同逻辑时，这时候我们会将共同逻辑的部分抽成一个新的 function。

而打造自己的 Hook 也是基於这个概念下撰写，只是如果是自定义的 Hook 会是以 use 为开头命名的 function，并且在这个 function 中可以呼叫其他的 Hooks。

虽然有了基本的概念，但这部分的运用则留在於实务开发时再来体会了。

使用 Hook 时需要注意的几个规则

最後要看的是在使用 Hook 时需要知道的一些规则：

1. 不要在回圈、条件式或是巢状的 function 内呼叫 Hook，确保在 component render 时 Hook 都可以是照着正确的顺序呼叫。
2. 只在 React Function 中呼叫 Hook，例如像是 React function component 或者自定义的 Hook

铁人赛文章与程序码同步发布於:

1. 个人部落格
2. Github

资源

• useImperativeHandle
• useLayoutEffect