自定义hook函数

自定义Hook

作用:提取封装一些公共的处理逻辑
用法:创建一个函数，名字需要是useXxx ，后期就可以在组件中调用这个方法!

案例1：

usestate会导致直接替换，这个位置我们使用自定义钩子函数来进行封装一个方法来支持部分更新！！！

以下是 usePartialState 自定义 Hook 的正确代码示例：

import { useState } from 'react';

function usePartialState(initialValue) {
  const [state, setState] = useState(initialValue);

  const setPartial = (partialState) => {
    setState({
    ...state,
    ...setPartial
    });
  };

  return [state, setPartial];
}

export default usePartialState;

在这个代码中，我们首先导入了 useState Hook，然后定义了一个名为 usePartialState 的自定义 Hook，它接收一个 initialValue 参数作为初始状态。在 usePartialState 中，我们使用 useState Hook 来定义状态 state，并且返回状态 state 和更新函数 setPartial。

在 setPartial 函数中，我们使用 Object.assign 方法来将当前状态 prevState 和传入的部分状态 partialState 进行合并，从而实现部分状态的更新。

最后，我们导出 usePartialState 函数，供其他组件使用。

在组件中，我们可以像下面这样使用 usePartialState：

import usePartialState from './usePartialState';

function Demo() {
  const [state, setPartial] = usePartialState({
    supNum: 10,
    oppNum: 5,
  });

  const handle = (type) => {
    if (type === 'sup') {
      setPartial({ supNum: state.supNum + 1 });
    } else if (type === 'opp') {
      setPartial({ oppNum: state.oppNum + 1 });
    }
  };

  return (
    <div className="vote-box">
      <div className="main">
        <p>支持人数: {state.supNum} 人</p>
        <p>反对人数: {state.oppNum} 人</p>
      </div>
      <div className="footer">
        <button onClick={() => handle('sup')}>支持</button>
        <button onClick={() => handle('opp')}>反对</button>
      </div>
    </div>
  );
}

export default Demo;

在这个示例代码中，我们使用 usePartialState Hook 来定义名为 Demo 的组件中的状态，并且使用返回的状态和更新函数来管理状态。在组件中，我们还定义了一个名为 handle 的处理函数，用于根据指定的类型更新状态。最后，在组件渲染时，我们使用状态来展示当前的支持和反对人数，并且使用处理函数来更新状态。

案例2：

自定义 Hook 中实现了一个 useDidMount 自定义 Hook，用来在组件第一次渲染完毕后设置文档标题。

在这个 Hook 中，我们使用了 useEffect Hook，同时指定了空的依赖数组 []。这意味着只有在组件第一次渲染时，useEffect 才会执行，从而设置文档标题。

下面是一个完整的 useDidMount Hook 代码示例：

import { useEffect } from 'react';

const useDidMount = (title) => {
  useEffect(() => {
    document.title = title || 'React系统课';
  }, []);
};

export default useDidMount;

在这个代码中，我们首先导入 useEffect Hook，然后定义了一个名为 useDidMount 的自定义 Hook。这个 Hook 接收一个可选的 title 参数，默认为 'React系统课'。

在 useDidMount Hook 中，我们使用 useEffect Hook，并且指定了空的依赖数组 []。这意味着只有在组件第一次渲染时，useEffect 才会执行，从而设置文档标题。

这个 useDidMount Hook 可以在其他组件中被使用，以实现在组件第一次渲染完毕后，统一干点事情的需求。例如，在你的组件中，你可以像下面这样使用 useDidMount Hook：

import useDidMount from './useDidMount';

function App() {  
  useDidMount('我的React应用');
  
  return (
    <div>这里是我的React应用</div>
  );
}

export default App;

在这个示例代码中，我们在组件中使用了 useDidMount Hook，并且在组件第一次渲染完毕后，设置了文档标题为 '我的React应用'。这样，无论我们有多少个组件需要设置文档标题，在使用 useDidMount Hook 后，都可以统一在组件第一次渲染完毕后处理。

---

使用ues开头和普通函数命名有什么区别呢 ？？

React 对 use 开头的自定义 Hook 有特殊的处理，具体来说，使用自定义 Hook 需要遵循以下规则：

1. 自定义 Hook 名称必须以 use 开头。这是 React 的一个约定，以此来区分普通函数和自定义 Hook，确保在使用 Hook 时，开发者可以一眼看出这是一个 Hook。

2. 通过自定义 Hook 调用其他 Hook。在自定义 Hook 中，可以调用其他 Hook（例如 useState、useEffect 等），实现共享和组合逻辑。

3. 可以在自定义 Hook 中返回其他 Hook 的返回值。自定义 Hook 可以返回任何值，包括其他 Hook 的返回值。

通过遵循这些规则，我们可以有效地利用自定义 Hook 来实现代码复用和逻辑封装，从而提高代码的可维护性和可重用性。

---