这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

在对React Hook有了基本了解后，我们接下来学习如何自定义Hook。有时候我们会想要在组件之间重用一些状态逻辑，使用自定义 Hook 可以让你在不增加组件的情况下达到同样的目的。

自定义Hook

自定义Hook要点

• Hook是函数
• 命名以 "use" 开头
• 内部可调用其他Hook函数

自定义Hook案例（一）

实现一个需求，在组件挂载完成之后，向服务器端发送请求，获取一篇文章的信息，并将文章的信息显示在页面中。

import React, { useState, useEffect } from 'react';
import axios from 'axios'

function useGetPost() {
  const [post, setPost] = useState({});
  useEffect(() => {
    axios.get('data.json')
      .then(res => setPost(res.data))
  }, [])
  return [post, setPost];
}

export default function App() {
  const [post, setPost] = useGetPost();
  return (
    <div>
      <h1>{post.title}</h1>
      <div>{post.body}</div>
    </div>
  )
}

假设向服务器获取文章是多个组件需要做的事情，那么这个逻辑就是共享逻辑，可以写在自定义Hook中。这上面的代码中，我们定义了useGetPost Hook函数，用于获取服务端数据。自定义Hook的返回值没有要求，在实例中是返回了一个数组。接下来我们在App函数中调用了自定义Hook函数，并成功获取了服务端数据。通过自定义Hook，我们实现了组件与组件之间逻辑共享的目的。

自定义Hook案例（二）

在创建表单时，我们通常会将状态数据和表单项进行绑定，来达到数据同步的目的。在一个表单中 通常会有多个表单项，每一个表单项都需要添加value属性和onChange属性。由于每一个表单项都 需要添加这两个属性，这个操作就属于共享逻辑。

import React, { useState, useEffect } from 'react';

function useUpdateInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  return {
    value,
    onChange: event => setValue(event.target.value)
  }
}

export default function App() {
  const usernameInput = useUpdateInput('');
  const passwordInput = useUpdateInput('');
  const submitForm = event => {
    event.preventDefault();
    console.log(usernameInput.value);
    console.log(passwordInput.value);
  }
  return (
    <form onSubmit={submitForm}>
      <input type="text" name="username" {...usernameInput} />
      <input type="password" name="password" {...passwordInput} />
      <input type="submit"/>
    </form>
  )
}

在上面的代码中，我们将添加value和onChange属性封装成自定义Hook，并返回一个对象。在App函数中，我们调用了useUpdateInputHook函数，通过解构的方式在input标签上使用。当我们多次调用同一个钩子函数时，钩子函数返回的状态是不共享的。

总结

• 自定义 Hook是标准的封装和共享逻辑的方式
• 自定义 Hook是一个函数,其名称以use开头
• 自定义 Hook其实就是逻辑和内置 Hook的组合