React Hooks 使用详解及实际项目中遇到的坑

最新推荐文章于 2024-08-09 18:12:42 发布

置顶

「已注销」

最新推荐文章于 2024-08-09 18:12:42 发布

阅读量3.1k

点赞数 4

分类专栏： react 文章标签： react hooks javascript reactjs 前端

本文链接：https://blog.csdn.net/junkaicool/article/details/106048846

版权

本文详细介绍了React Hooks的使用，包括useState、useEffect、useMemo、useCallback、useReducer、useContext、useLayoutEffect、useRef及自定义Hooks。通过实例展示了它们在实际项目中的应用，同时指出了直接修改数组对象、闭包问题等常见陷阱及其解决方案。

摘要由CSDN通过智能技术生成

React Hooks 是 React 在16.8版本中更新的新特性，在 React 中一直提倡使用函数组件，老版本中函数组件没有组件实例，没有 state，没有生命周期函数，导致很多情况不得不使用类组件，但是 Hooks 出来后我们可以在不使用类组件的情况下使用state及其他React特性！

一. useState

1. useState基本使用

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

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

这是官方的一个基本使用示例，import引入useState函数
调用函数时传入初始化的值
函数返回一个数组：一个为初始化的state，一个为更新state的函数
最后在其他地方使用state，或者调用更新state的函数
注意：更新state的函数会直接替换state，而不是像以前setState会合并新老state

2. 使用push，pop，splice等直接更改数组对象的坑

因为useState的更新函数会直接替换老的state，所以我们在对对象或者数组的state做增删的时候不能像以前直接对数组使用push，pop，splice等直接改变数组的方法

错误示例：

import React, { useState } from "react";

function Comment() {
  const [counts, setCounts] = useState([1, 2]);
  const handleAdd = () => {
    const randomCount = Math.round(Math.random()*100)
    // 在此地方我们使用push增加一个随机数，程序报错
    setCounts(counts.push(randomCount))
  }
  return (
    <div>
      {counts.map((count) => (
        <div key={count}>{count}</div>
      ))}
      <button onClick={handleAdd}>增加</button>
    </div>
  );
}

export default Comment;

正确的方法应该是使用数组解构生成一个新数组，在数组后面加上我们新增的随机数达成数组新增项，使用filter数组过滤方法来实现我们删除其中项的操作。

数组新增项：

import React, { useState } from "react";

function Comment() {
  const [counts, setCounts] = useState([1, 2]);
  const handleAdd = () => {
    const randomCount = Math.round(Math.random()*100)
    // 在此我们用数组结构生成新数组，并在后面加上我们要新增的随机数
    setCounts([
      ...counts,
      randomCount
    ])
  }
  return (
    <div>
      {counts.map((count) => (
        <div key={count}>{count}</div>
      ))}
      <button onClick={handleAdd}>增加</button>
    </div>
  );
}

export default Comment;

删除其中项

import React, { useState } from "react";

function Comment() {
  const [counts, setCounts] = useState([1, 2, 3, 4]);
  const handleDel = () => {
    // 使用数组filter方法，过滤删除其中不需要的项
    setCounts(counts.filter((count, index) => index !== counts.length - 1))
  }
  return (
    <div>
      {counts.map((count) => (
        <div key={count}>{count}</div>
      ))}
      <button onClick={handleD