React Hooks 库使用教程

2024-09-18 08:08:11作者：滕妙奇

项目介绍

react-hooks-lib 是一个开源的 React Hooks 库，旨在提供一组高质量、可靠的 React Hooks，帮助开发者更高效地构建 React 应用。该库包含了大量从实际业务场景中提炼出的高级 Hooks，支持服务器端渲染（SSR），并且对函数进行了特殊处理，避免了闭包问题。

项目快速启动

安装

首先，你需要在你的项目中安装 react-hooks-lib。你可以使用 npm、yarn 或 pnpm 进行安装：

npm install --save react-hooks-lib
# 或者
yarn add react-hooks-lib
# 或者
pnpm add react-hooks-lib

使用示例

以下是一个简单的使用示例，展示了如何使用 useRequest Hook：

import React from 'react';
import { useRequest } from 'react-hooks-lib';

const MyComponent = () => {
  const { data, loading, error } = useRequest('https://api.example.com/data');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

应用案例和最佳实践

案例1：使用 `useState` 和 `useEffect` 管理组件状态

在实际开发中，我们经常需要管理组件的状态。以下是一个使用 useState 和 useEffect 的示例：

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

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

案例2：使用 `useContext` 进行全局状态管理

在大型应用中，全局状态管理是必不可少的。以下是一个使用 useContext 的示例：

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const useTheme = () => useContext(ThemeContext);

const ThemeSwitcher = () => {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
};

const App = () => (
  <ThemeProvider>
    <ThemeSwitcher />
  </ThemeProvider>
);

export default App;