react自定义hook

自定义hook的作用

自定义hook可以将一些逻辑封装成一个函数，然后在不同的组件中复用。

自定义hook的写法

自定义hook的写法如下：

import { useState } from'react';

function useCustomHook() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return { count, handleClick };
}

export default useCustomHook;

自定义hook的函数名必须以use开头，并且必须返回一个对象。

在组件中使用自定义hook，需要先导入该hook：

import useCustomHook from './useCustomHook';

function App() {
  const { count, handleClick } = useCustomHook();

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

自定义hook可以封装一些常用的逻辑，如获取当前时间、获取用户信息等。

自定义hook的注意事项

1. 自定义hook的函数名必须以use开头；
2. 自定义hook必须返回一个对象；
3. 自定义hook可以封装一些常用的逻辑，如获取当前时间、获取用户信息等；
4. 自定义hook可以与其他hook组合使用，如useState、useEffect等。