react自定义hook如何实现

react自定义hook的实现非常简单。你只需要将常规的函数和逻辑包装在一个名称以 use 开头的函数里面，就可以将其作为自定义 hook 使用。例如，下面是一个 useEffect 自定义 hook 的示例代码：

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

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

  useEffect(() => {
    console.log(`my value is: ${myValue}`);
    console.log(`count is: ${count}`);
  }, [count, myValue]);

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

  function handleMinus() {
    setCount(count - 1);
  }

  return {
    count,
    handlePlus,
    handleMinus,
  };
}

在这里，我们创建了一个名为 useCustomHook 的函数。该函数接受一个名为 myValue 的参数。我们在 useCustomHook 函数中使用 useState 和 useEffect。我们返回一个对象，该对象包含 count 值以及处理加法和减法的函数。

接下来，您可以将 useCustomHook 导入包含您的 react 程序的文件，并使用对它调用以前定义的函数来调用它。例如：

import React from 'react';
import { useCustomHook } from './useCustomHook';

function App() {
  const { count, handlePlus, handleMinus } = useCustomHook('my value');

  return (
    <div>
      <p>Count is: {count}</p>
      <button onClick={handlePlus}>Plus</button>
      <button onClick={handleMinus}>Minus</button>
    </div>
  );
}

export default App;

在这里，我们导入 useCustomHook，然后从调用它的返回对象中提取 count、处理加法和减法的函数。

这就是一个简单的自定义 hook 的范例。你可以创建任意数量的自定义 hook，从而封装 React 组件中的常见逻辑和代码。