React常用Hook的用法及实例

React是一种流行的JavaScript库，用于构建用户界面。自从React引入了Hooks以来，函数组件已经成为开发React应用的首选方式。Hooks提供了一种在函数组件中复用状态逻辑的方式，使得代码更加简洁、可读性更高。本文将介绍React中常用的Hooks及其用法，并提供相关示例。

1. useState Hook: useState Hook用于在函数组件中引入状态。它接受一个初始状态，并返回一个包含当前状态值和更新状态值的数组。以下是一个示例：

import React, { useState } from 'react';

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

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

2. useEffect Hook: useEffect Hook用于处理副作用操作，比如订阅、数据获取或DOM操作。它接受一个回调函数和一个依赖数组，只有依赖数组中的值发生变化时，才会执行回调函数。以下是一个示例：

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 在组件挂载后获取数据
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
}

3. useContext Hook: useContext Hook用于在函数组件中使用Context。它接受一个Context对象，并返回当前Context的值。以下是一个示例：

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemeComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div>
      <p>Current theme: {theme}</p>
    </div>
  );
}

4. useRef Hook: useRef Hook用于在函数组件中创建可变的引用。它返回一个可变的ref对象，可以在组件的整个生命周期中保持引用不变。以下是一个示例：

import React, { useRef } from 'react';

function InputComponent() {
  const inputRef = useRef();

  const handleButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
}

通过使用这些常用的Hooks，您可以更好地组织和管理React函数组件中的状态和副作用。它们提供了一种更简洁、可读性更高的方式来开发React应用。