【揭秘React Hooks】常用钩子函数全解析，轻松掌握状态管理与副作用处理

引言

React Hooks 是 React 16.8 版本引入的一项重要特点，它容许在函数组件中利用状况（state）跟其他 React 特点，而不须要利用类组件。Hooks 使得函数组件可能拥有类组件的一些特点，如状况管理跟生命周期方法。本文将深刻剖析 React 中常用的多少个 Hooks 函数，帮助读者轻松控制状况管理与反感化处理。

useState：状况管理的基本

useState 是 React 最常用的 Hook，它容许你在函数组件中增加跟管理外部状况。

import React, { useState } from 'react';

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

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

关键点：

• useState 接收一个初始值，并前去一个包含以后状况跟更新状况的函数的数组。
• 数组的第一个元素是状况的值，第二个元素是用于更新状况的函数。

useEffect：处理反感化

useEffect 用于在函数组件中履行反感化操纵，如数据获取、订阅或手动变动 DOM。

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

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

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

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

关键点：

• useEffect 接收一个回调函数，该函数会在组件衬着后履行。
• 可选的第二个参数是一个依附数组，当依附数组中的值产生变更时，回调函数会重新履行。

useContext：拜访 React 高低文

useContext 容许在函数组件中拜访 React 高低文（context）东西。

import React, { useContext } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const theme = useContext(MyContext);
  return <div>{theme}</div>;
}

关键点：

• useContext 接收一个 context 东西。
• 前去以后 context 的值。

useRef：获取 DOM 元素的引用

useRef 用于获取 DOM 元素的引用，或保存可变值。

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

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

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

关键点：

• useRef 前去一个可变的 ref 东西。
• 该东西的 .current 属性被初始化为转达的参数（初始值）。

总结

React Hooks 为函数组件带来了富强的功能，使得状况管理跟反感化处理变得愈加简单。经由过程利用 useState、useEffect、useContext 跟 useRef 等常用 Hooks，开辟者可能轻松构建复杂的 React 利用顺序。盼望本文能帮助读者更好地懂得跟利用 React Hooks。