react18【系列实用教程】useState —— 声明响应式变量(2024最新版)含useState 的异步更新机制,更新的合并,函数传参获取更新值,不同版本异步更新差异,更新对象和数组

简介: react18【系列实用教程】useState —— 声明响应式变量(2024最新版)含useState 的异步更新机制,更新的合并,函数传参获取更新值,不同版本异步更新差异,更新对象和数组

类似 vue 的 data 选项

功能

向组件添加响应式变量,当响应式变量变化时,组件的视图UI也会跟着变化【数据驱动视图】

语法

  • 参数为变量的初始值
  • 返回值为一个只有两个元素的数组,第一项元素为传入的参数,第二项元素是一个setter 函数

useState 的异步更新机制

通过 setter 函数更新响应式变量的过程是异步的

import { useState } from "react";

export default function Father() {
  const [count, setcount] = useState(10);

  function increase() {
    setcount(count + 1);

    console.log("count的值为:", count);
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={increase}>+</button>
    </div>
  );
}

点击按钮后的执行结果

count的值为: 10

可见在用 setter 函数更新响应式变量后,无法立马获取到其最新的值!

useState 的异步更新机制:

调用 setter 函数更新响应式变量后,React 不会立即更新响应式变量的值,而是将更新请求放入一个队列中。在本次事件循环结束时,React 会批量处理队列中的所有响应式变量更新,并触发重新渲染。

为什么要异步更新而不是同步更新 ?

1. 可显著提高性能

React 可以在一次渲染过程中合并和批处理多个状态更新,减少不必要的重复计算和渲染操作。

2. 避免死循环

若采用同步更新,则每次更新状态会触发重新渲染,而重新渲染又可能触发新一轮的状态更新,形成死循环。

连续的更新会被合并!

import { useState } from "react";

export default function Father() {
  const [count, setcount] = useState(10);

  function increase() {
    setcount(count + 2);
    setcount(count + 1);
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={increase}>+</button>
    </div>
  );
}

点击按钮后,页面显示的 count 值为 11

正如异步更新机制的描述,多个状态更新会被合并,仅最后一次更新生效!

怎样“及时”获取到更新后的值?

import { useState } from "react";

export default function Father() {
  const [count, setcount] = useState(10);

  function increase() {
    setcount(count + 1);

    setcount((count) => {
      console.log("setcount传入的参数count的值为:", count);
      return count + 1;
    });
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={increase}>+</button>
    </div>
  );
}

点击按钮后的执行结果

setcount传入的参数count的值为: 11
 

此时页面的 count 的值为 12

可见,通过函数传参的方式,可以让 setter 函数获取到更新后的变量值。

同时,也从形式上避免了连续的更新合并,但实质上,函数传参的方式会创建新的更新请求队列,从而避开了同一更新请求队列中的合并。

不同版本 react 的异步更新差异

react <= 17 时,在组件生命周期或React合成事件中,setState是异步; 在setTimeout或者原生dom事件(如 addEventListener ) 中,setState是同步。

从 react18 开始,所有的 setState 都是异步的

注意事项

  1. useState 传入的初始值,只在组件挂载(render)时执行有效,在组件re-render (更新渲染) 时不会执行!
  2. useState 返回的响应式变量的值,只能通过一起返回的 setter 函数改变!

src/page/Index/Father.jsx

import { useState } from "react";
import Child from "./Child.jsx";

export default function Father() {
  const [userInfo, setUserInfo] = useState({
    name: "朝阳",
  });

  function changeName() {
    setUserInfo({
      name: "张三",
    });
  }

  return (
    <div style={{ border: "1px solid", padding: "10px" }}>
      <h1>父组件</h1>
      <p>名称为:{userInfo.name}</p>
      <button onClick={changeName}>改名称</button>
      <Child userInfo={userInfo} />
    </div>
  );
}

src/page/Index/Child.jsx

import { useState } from "react";

function Child({ userInfo }) {
  const [name] = useState(userInfo.name);

  return (
    <div style={{ border: "1px solid", padding: "10px", margin: "10px" }}>
      <h1>子组件</h1>
      <p>父组件传入的名称为:{userInfo.name}</p>
      <p>子组件中 useState 返回的名称为:{name}</p>
    </div>
  );
}

export default Child;

使用范例 – 响应式变量

import { useState } from "react";
const Demo = () => {
  const [count, setCount] = useState(0);
  function addOne() {
    setCount(count + 1);
  }
  return <button onClick={addOne}>{count}</button>;
};

export default Demo;
  • 声明了响应式变量 count ,初始值为 0
  • 通过 [] 进行了数组的解构赋值,将 0 赋值给了 count ,可响应式改变 count 值的 setter 函数赋值给了
  • 通过 setCount 可修改 count 的值 (setCount 可以自定义为其他名称,如 updateCount , 但推荐统一 set 开头)
  • setCount 的语法是将 count 的新值作为参数传入
  • setCount 的作用是触发视图根据 count 的新值重新渲染

使用范例 – 响应式对象

  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleFirstNameChange(e) {
     // 修改属性值
     setPerson({
      ...person,
      firstName: e.target.value
    });
  }

修改嵌套的属性值

  const [person, setPerson] = useState({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
    }
  });

  function handleNameChange(e) {
    setPerson({
      ...person,
      name: e.target.value
    });
  }

  function handleTitleChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        title: e.target.value
      }
    });
  }
npm install use-immer
 
import { useImmer } from 'use-immer';
 
  const [person, updatePerson] = useImmer({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
    }
  });

  function handleNameChange(e) {
    updatePerson(draft => {
      draft.name = e.target.value;
    });
  }

  function handleTitleChange(e) {
    updatePerson(draft => {
      draft.artwork.title = e.target.value;
    });
  }

使用范例 – 响应式数组

  const [fruitList, setFruitList] = useState([]);

  function changeHandler(e) {
    let newValue = e.target.value;

    if (fruitList.includes(newValue)) {
      // 数组删除元素
      setFruitList(fruitList.filter((item) => item !== newValue));
    } else {
      // 数组新增元素
      setFruitList([...fruitList, newValue]);
    }
  }

目录
打赏
0
0
0
0
63
分享
相关文章
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
117 8
在React框架中,如何使用对象来管理组件的状态
在React中,组件状态通过`state`对象管理,利用`setState`方法更新状态。状态变化触发组件重新渲染,实现UI动态更新。对象结构清晰,便于复杂状态管理。
|
3月前
|
深入探索React Hooks:从useState到useEffect
深入探索React Hooks:从useState到useEffect
43 3
React 教程
10月更文挑战第6天
70 3
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
97 3
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
58 3
|
5月前
|
React中函数式Hooks之useState的使用
本文介绍了React中函数式组件的Hooks——`useState`的使用方法。`useState`允许在函数式组件中使用状态,它返回一个数组,其中包含当前状态的值和更新该状态的函数。文章通过示例代码展示了如何声明状态变量和更新状态变量,包括对数值和对象状态的更新。此外,还展示了如何通过点击按钮触发状态更新,实现交互功能。
51 1
React读取properties配置文件转化为json对象并使用在url地址中
本文介绍了如何在React项目中读取properties配置文件,将其内容转化为JSON对象,并在请求URL地址时使用这些配置。文章详细说明了异步读取文件、处理字符串转换为JSON对象的过程,并提供了一个封装函数,用于在发起请求前动态生成配置化的URL地址。
128 1
React useState 和 useRef 的区别
本文介绍了 React 中 `useState` 和 `useRef` 这两个重要 Hook 的区别和使用场景。`useState` 用于管理状态并在状态变化时重新渲染组件,适用于表单输入、显示/隐藏组件、动态样式等场景。`useRef` 则用于在渲染之间保持可变值而不触发重新渲染,适用于访问 DOM 元素、存储定时器 ID 等场景。文章还提供了具体的代码示例,帮助读者更好地理解和应用这两个 Hook。
94 0