什么是反应钩子 - TypeScript

反应钩子是用于在组件的生命周期内执行特定操作的函数。它们是 React 中的重要概念，有助于将行为添加到组件中。在 TypeScript 中，反应钩子可以帮助我们减少许多常见的错误，并使我们的代码更加健壮和可维护。

常见的反应钩子

useState

useState 钩子可以让我们在组件中存储状态。它接受一个初始值并返回一个数组，其中第一个元素是当前状态的值，第二个元素是更新状态值的方法。

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>
    );
}

useEffect

useEffect 钩子可以让我们在组件渲染后执行副作用，例如发起网络请求或订阅事件。它接受一个函数和一个可选的数组参数，该数组指定了应该发生更改以重新运行函数的依赖关系。

import React, { useState, useEffect } from 'react';
 
function Counter() {
    const [count, setCount] = useState(0);
 
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);
 
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

useContext

useContext 钩子可以让我们使用 React 的上下文。它接受一个上下文对象（通过 createContext 函数创建）并返回该上下文的当前值。

import React, { useContext } from 'react';
 
const MyContext = React.createContext('default');
 
function MyComponent() {
    const value = useContext(MyContext);
 
    return <div>My value is: {value}</div>;
}

useRef

useRef 钩子可以让我们在组件之间存储引用。它返回一个对象，该对象具有一个名为 current 的属性，该属性可以存储任何值。

import React, { useRef } from 'react';
 
function TextInput() {
    const inputRef = useRef(null);
 
    function handleClick() {
        inputRef.current.focus();
    }
 
    return (
        <div>
            <input type="text" ref={inputRef} />
            <button onClick={handleClick}>Focus input</button>
        </div>
    );
}

结论

在 TypeScript 中，反应钩子是一种强大的工具，可以帮助我们创建更健壮、可维护的组件。我们可以使用 useState、useEffect、useContext、useRef 等反应钩子，在组件的生命周期内执行不同的操作。希望这篇文章能够对您有所帮助！