【react】react hooks是什么

react hooks是什么

相关文章

react hooks是什么

一、react hooks是什么

React Hooks 是 React 16.8 版本引入的新特性，它是一组函数，可以让您在函数式组件中使用 React 特性。使用 Hooks，您可以在不编写类组件的情况下，使用状态、生命周期方法、上下文等 React 功能。

在 React 之前，要在组件中使用状态或其他 React 特性，通常需要创建一个类组件，并继承自 React.Component，然后在类组件中使用 state 属性来管理状态，以及使用生命周期方法来处理副作用。这种方式在处理一些简单组件时可能会显得过于繁琐。

React Hooks 解决了这个问题，它提供了一种在函数组件中使用 React 特性的方式，从而使得函数组件具有了类组件的能力，同时保持了函数组件的简洁和可读性。

二、Hook 解决了什么问题?

共享状态逻辑

在类组件中，状态逻辑通常被封装在构造函数中，这导致了在不同生命周期函数中分散的状态逻辑。Hooks 允许您在函数组件中复用状态逻辑，通过使用 useState 来管理组件的状态。

示例

当状态逻辑被封装在构造函数中时，在类组件中，您可能会在不同的生命周期方法中分散状态逻辑。例如，在构造函数中初始化状态，在 componentDidMount 中进行数据获取，在 componentDidUpdate 中进行状态更新或副作用处理等。以下是一个示例，展示了这种情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { Component } from 'react';

class UserProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      loading: true
    };
  }

  componentDidMount() {
    this.fetchUser();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.fetchUser();
    }
  }

  fetchUser() {
    const { userId } = this.props;
    // Simulating fetching user data from an API
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(user => {
        this.setState({ user, loading: false });
      });
  }

  render() {
    const { user, loading } = this.state;

    if (loading) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        <h1>User Profile</h1>
        <p>Name: {user.name}</p>
        <p>Email: {user.email}</p>
        {/* Render user profile */}
      </div>
    );
  }
}

export default UserProfile;

使用 Hooks 可以优化上述示例，将状态逻辑提取出来并集中管理，使代码更清晰、更易于理解。下面是一个使用 Hooks 优化的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React, { useState, useEffect } from 'react';

function useUserProfile(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching user data:', error);
        setLoading(false);
      }
    };

    fetchUser();

    return () => {
      // Cleanup function if needed
    };
  }, [userId]);

  return { user, loading };
}

function UserProfile({ userId }) {
  const { user, loading } = useUserProfile(userId);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      {/* Render user profile */}
    </div>
  );
}

export default UserProfile;

简化代码结构

使用 Hooks 可以更清晰、更紧凑地表达组件，避免了类组件中的样板代码，如构造函数、生命周期方法等，从而提高了代码的可读性和维护性。

提供了更多特性

除了状态管理和副作用处理外，Hooks 还提供了其他功能，如 useContext 用于访问 React 上下文、useReducer 用于复杂状态逻辑的处理、useCallback 和 useMemo 用于性能优化等。

三、hooks的规则

  • 只能在函数组件或自定义 Hook 中使用：Hooks 只能在函数组件或自定义 Hook 中使用，不能在类组件中使用。

  • Hook 调用顺序必须一致：在函数组件中，Hook 的调用顺序必须保持稳定。这意味着每次渲染时，Hook 的调用顺序必须相同。

  • 只能在最顶层使用 Hook：不要在循环、条件语句或嵌套函数中调用 Hook，确保 Hook 在组件内的每次渲染之间保持一致。

  • 自定义 Hook 名称必须以 “use” 开头：自定义 Hook 的名称必须以 “use” 开头，这是 React 在编译时确定一个函数是否是 Hook 的方式之一。

四、常用hooks

  • useState: 用于在函数组件中添加状态。

    1
    const [state, setState] = useState(initialState);

  • useEffect: 用于在组件渲染完成后执行副作用操作（比如数据获取、订阅、手动修改 DOM 等）。

    1
    2
    3
    4
    5
    6
    useEffect(() => {
        // Effect code
        return () => {
            // Clean-up code
        };
    }, [dependencies]);

  • useContext: 用于在函数组件中访问 React 上下文。

    1
    const value = useContext(MyContext);

  • useReducer: 用于管理复杂的状态逻辑。

    1
    const [state, dispatch] = useReducer(reducer, initialState);

  • useCallback: 用于缓存回调函数，以防止函数在每次渲染时重新创建。

    1
    2
    3
    const memoizedCallback = useCallback(() => {
        // Callback logic
    }, [dependencies]);

  • useMemo: 用于缓存计算结果，以防止在每次渲染时重新计算。

    1
    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  • useRef: 用于在函数组件中持久化保存变量，且不触发重新渲染。

    1
    const refContainer = useRef(initialValue);

  • useImperativeHandle: 用于在使用 ref 时，自定义暴露给父组件的实例值。

    1
    2
    3
    useImperativeHandle(ref, () => ({
        // Exposed instance values or methods
    }), [dependencies]);

  • useLayoutEffect: 类似于 useEffect，但是会在所有的 DOM 变更之后同步调用 effect。

    1
    2
    3
    4
    5
    6
    useLayoutEffect(() => {
        // Effect code
        return () => {
            // Clean-up code
        };
    }, [dependencies]);

  • useDebugValue: 用于在 React 开发者工具中显示自定义 hook 的标签。

    1
    useDebugValue(value);
喜欢这篇文章？打赏一下支持一下作者吧！
react
#react
【react】react hooks是什么
https://www.cccccl.com/20240307/react/react hooks是什么/
作者
Jeffrey
发布于
2024年3月7日
许可协议