React.js中Hooks API如何使用

在React.js中，Hooks API是一种允许您在不编写类组件的情况下使用state和其他React特性的方法。Hooks API于2019年3月发布，它引入了一些新的内置函数，如useState、useEffect、useContext等，这些函数使您能够更简洁地表达组件的逻辑。

以下是如何使用Hooks API的一些基本示例：

1. useState

useState是一个让函数组件具有state的方法。它接受一个初始值作为参数，并返回一个包含两个元素的数组：当前状态和一个更新状态的函数。

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

useEffect是一个处理副作用（如数据获取、订阅或手动更改DOM）的方法。它接受两个参数：一个包含副作用逻辑的函数和一个可选的依赖数组。

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

3. useContext

useContext允许您在组件中访问React上下文（如主题、用户信息等），而无需使用Consumer组件。

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

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

  return <button className={theme}>I am styled by theme context!</button>;
}

4. useRef

useRef用于访问和操作DOM元素。它返回一个可变的ref对象，其.current属性被初始化为传入的参数（初始值）。返回的对象在组件的整个生命周期内保持不变。

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

这些只是Hooks API的一部分功能。您可以根据需要使用其他内置Hooks（如useReducer、useMemo、useCallback等）以及创建自定义Hooks来封装和重用组件逻辑。