react hooks介绍以及常用hooks列举

最新推荐文章于 2023-10-13 14:08:37 发布

EQ思凡

最新推荐文章于 2023-10-13 14:08:37 发布

阅读量454

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_44182543/article/details/129724891

版权

当你在使用React构建应用程序时，React Hooks是一种非常强大的功能，它可以使你更容易地处理组件状态和生命周期。它们允许你将逻辑与React组件分离，从而使代码更清晰、更可维护。
React Hooks是React16.8版本中引入的，可以让你在函数组件中使用状态和其他React功能。在此之前，React组件必须是类组件才能使用这些功能。

下面是一些React Hooks的常用例子：

useState
useState是React Hooks中最常用的一个。它可以用于在函数组件中添加状态。这个状态可以在组件的整个生命周期中跟踪，并且每当状态更新时，组件将重新呈现。使用useState需要导入React库。

import React, { useState } from 'react';

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

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

上面的例子中，我们使用useState来创建一个名为count的状态变量，它的默认值是0。我们还使用setCount函数来更新状态。

useEffect
useEffect是另一个常用的React Hook。它可以让你在函数组件中处理副作用。副作用是指对组件外部状态的修改，如数据获取、订阅事件等。使用useEffect需要导入React库。

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

function Example() {
  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>
  );
}

上面的例子中，我们使用useEffect来设置文档标题，以显示用户单击按钮的次数。useEffect接受两个参数：一个副作用函数和一个依赖数组。当依赖数组中的任何值发生变化时，副作用函数将被调用。

useContext
useContext可以让你在函数组件中访问React上下文。上下文是React组件树中共享的数据。使用useContext需要导入React库。

import React, { useContext } from 'react';

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

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

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