React最常用的几个hook

React最常用的几个Hook包括：useState、useEffect、useRef以及useContext。

useState：

用于在函数组件中添加状态管理。它返回一个数组，第一个元素是当前状态的值，第二个元素是更新状态的函数。在使用时，可以通过解构赋值来获取这两个值。

在函数组件中的用法示例：

javascript">import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

在class组件中的用法示例：

javascript">import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

useEffect：

用于在函数组件中执行副作用操作，比如订阅事件、数据获取等。它接收一个函数作为参数，并在组件渲染完成后执行该函数。可以通过返回一个清理函数来清除副作用。

在函数组件中的用法示例：

javascript">import React, { useState, useEffect } from 'react';

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

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

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

在class组件中使用副作用操作需要在生命周期方法中执行。

当我回答问题时，我已经列举了Effect Hook的示例用法。以下是Ref Hook的示例用法：

useRef：

用于在函数组件中创建和访问ref。它返回一个可变的ref对象，可以通过.current属性访问到对象的引用。

在函数组件中的用法示例：

javascript">import React, { useRef } from 'react';

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

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

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

在class组件中的用法示例：

javascript">import React, { Component, createRef } from 'react';

class TextInput extends Component {
  constructor(props) {
    super(props);
    this.inputRef = createRef();
  }

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

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

Ref Hook可以用于管理DOM元素、获取组件实例和保存任意可变值。

Ref Hook详细介绍可以参考：

React Hooks函数之useRef_useeffect 中存放useref-CSDN博客

useContext：

用于在函数组件中使用上下文（Context）。它接收一个上下文对象作为参数，并返回该上下文的当前值。

在函数组件中的用法示例：

javascript">import React, { useContext } from 'react';

const MyContext = React.createContext();

function Example() {
  const value = useContext(MyContext);

  return (
    <div>
      <p>Value: {value}</p>
    </div>
  );
}

在class组件中使用上下文需要通过static contextType来设置，并在render方法中使用this.context来获取上下文的值。

这些是React中最常用的几个Hook，它们可以帮助我们在函数组件中实现类似于class组件的功能和特性。

也可以自定一Hook参考：
React自定义 Hook-CSDN博客