React新API——HOOK

原创已于 2023-11-27 14:32:28 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HOOK

于 2019-08-12 18:58:35 首次发布

面试专栏收录该内容

113 篇文章

订阅专栏

本文深入讲解React Hooks的使用，包括useState和useEffect等内置Hooks，以及如何创建自定义Hooks。展示了函数组件如何通过Hooks管理状态和副作用，提供代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

V16.8版本出现的HOOK的出现是为了使代码更加容易理解，而且并不打算废弃class的写法，且class会一直向后兼容。

定义react组件有两种方式：

函数式（无状态组件）
es6形式的extends React.Component定义的组件（有状态）

HOOK的出现使得在函数内也可以操作状态state以及拥有生命周期函数。HOOK不能在class组件中使用。

1. react内置HOOK

useState
一个函数组件中可以多次调用该函数。
返回值：返回一对值：当前状态和一个让你更新它的函数。下面是一个简单的示例。

import React, { useState } from 'react';
function Example() {
  // 声明一个叫 “count” 的 state 变量，0是初始值。
  const [count, setCount] = useState(0); 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect：主要用来执行一些“副作用”，比如操作DOM或者是发送请求获取数据
它在第一次渲染之后和每次更新之后都会执行。

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

需要清除的事件则返回一个函数

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

2. 自定义HOOK

类似函数，以use开头是为了更好地区分HOOK和普通函数

import React, { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });
 return isOnline;
}
//使用自定义的HOOK
const isOnline = useFriendStatus(props.friend.id);