【React Hooks详解】由浅入深从理解到自己封装一个Hook

React Hooks是React 16.8版本引入的一个革命性特性，它允许你在不编写类组件的情况下使用state和其他React特性。这一创新不仅简化了组件逻辑，还使得代码更加可重用和易于理解。

本文将由浅入深探讨React Hooks的使用，并指导你如何自定义Hooks，以进一步提升开发效率和代码质量。

React Hook 初探

1. Hook 的诞生背景

在Hook出现之前，React应用主要依赖于类组件来管理状态和生命周期方法。然而，随着应用复杂度的增加，类组件的维护变得日益困难，尤其是当多个组件需要共享状态或逻辑时。React团队因此推出了Hooks，旨在解决状态管理、生命周期函数分散、逻辑复用等问题。

2. Hook 的规则

使用Hooks需遵循两条基本规则：

• 只在函数组件或自定义Hook中调用Hook。不要在常规的JavaScript函数中调用它们。
• 在React函数组件的最顶层调用Hook。不要在循环、条件判断或者嵌套函数中调用Hook。

3. 为什么需要 Hook

我们从两个最常用的Hook来看它的作用：

• useState: 这是React提供的最基本的状态Hook。它返回一对值：当前状态和一个用来更新状态的函数。React使用内部的调度机制来确保状态更新是异步的，这有助于性能优化，比如批量更新。

  下面这个示例为：按下按钮后批量更新count
  
  代码如下：

  import { useState } from 'react';
  
  export default function MyApp() {
    const [count, setCount] = useState(0);
  
    function handleClick() {
      setCount(count + 1);
    }
  
    return (
      <div>
        <h1>任意按钮按下将同步更新计数器</h1>
        <MyButton count={count} onClick={handleClick} />
        <MyButton count={count} onClick={handleClick} />
      </div>
    );
  }
  
  function MyButton({ count, onClick }) {
    return (
      <button onClick={onClick}>
        按下 {count} 次
      </button>
    );
  }
  

运行效果：

• useEffect: 用于处理副作用，如数据获取、订阅或者手动修改DOM等。它接受两个参数：一个是执行副作用的函数，另一个是一个依赖数组，用来决定何时重新执行副作用。React会在组件渲染后且浏览器完成绘制之前执行这些副作用。

代码如下：

import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    // 卸载组件时将清除计时器
    return () => clearInterval(intervalId);
  }, []);

  return <h1>{count}</h1>;
}

运行效果：

4. Hook 的实现机制

React通过维护一个“Hook调用栈”来跟踪每个Hook的调用顺序和状态。每次组件渲染时，React都会遍历这个调用栈，确保每次调用Hook的顺序保持一致，从而正确地恢复每个Hook的内部状态。这是为什么不能在条件语句或循环中调用Hook的原因——这会打破调用顺序的一致性。

自定义Hook

自定义Hook是分享可复用逻辑的一种方式。它就是一个普通的JavaScript函数，但其名称以use开头，表明它是用来和其他Hook一起使用的。

如何创建自定义Hook

假设我们要创建一个自定义Hook来管理复杂的表单状态，包括验证和提交处理。

import { useState } from 'react';

// 自定义Hook: useForm
function useForm(initialValues, validate) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  // 处理输入变化
  function handleChange(e) {
    const { name, value } = e.target;
    setValues(prev => ({ ...prev, [name]: value }));
  }

  // 验证表单
  function validateForm() {
    const validationErrors = validate(values);
    setErrors(validationErrors);
    return Object.keys(validationErrors).length === 0;
  }

  // 提交表单的逻辑可以在这里添加...

  return {
    values,
    errors,
    handleChange,
    validateForm
  };
}

export default useForm;

使用自定义Hook

接下来，在需要管理表单的组件中使用上面创建的useForm Hook。

import React, { useState } from 'react';
import useForm from './useForm';

function MyForm() {
  const initialVals = { username: '', email: '' };
  const validate = (values) => {
    let errors = {};
    if (!values.username) errors.username = 'Username is required.';
    if (!values.email) errors.email = 'Email is required.';
    return errors;
  };

  const { values, errors, handleChange, validateForm } = useForm(initialVals, validate);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validateForm()) {
      // 表单验证通过，执行提交操作...
      console.log('Form submitted:', values);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input type="text" name="username" onChange={handleChange} value={values.username} />
        {errors.username && <span>{errors.username}</span>}
      </div>
      <div>
        <label>Email:</label>
        <input type="email" name="email" onChange={handleChange} value={values.email} />
        {errors.email && <span>{errors.email}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

结论

React Hooks提供了一种全新的方式来构建组件，极大地提高了代码的可读性和可维护性。自定义Hook的引入更是将逻辑复用提升到了一个新的高度，使得开发者能够封装和分享任何复杂的逻辑，而不局限于React内置的功能。掌握Hook的原理及其应用，对于现代前端开发至关重要，它能帮助我们构建更加高效、简洁且强大的React应用。

我会将平时做项目过程中的代码实践记录下来，并提取为带注释的代码片段，通过公众号分享项目开发技巧，欢迎关注公众号：卢克代码社