react之useState详解

最新推荐文章于 2025-06-18 09:37:04 发布

欧阳呀

最新推荐文章于 2025-06-18 09:37:04 发布

阅读量900

点赞数 6

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_35942348/article/details/137887619

在这里插入图片描述

1. 为什么要用useState？

它是React 16.8 的新特性，我们在React里面一般都是用Class去写组件，但是有时候会发现不用它更方便，但是问题来了：不用Class的时候，数据的状态改变如何存储呢？
如果你用 var，let，const 等等，你会发现：值虽然改变了，但是页面并没有重新渲染，也就是说，这些关键字定义的值并不是响应式的。
这个时候，就轮到 useState 上场了，它允许我们定义状态变量，并且能保证在页面上能重新渲染，数据是响应式的。

2. 基本语法

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

state => 存储的状态值
setState => 用来修改状态的函数
initialState => 首次渲染的初始值
比如 useState 返回一个数组，长度为 2

// 通常使用的定义方法
const [key, setKey] = useState(0);
// 但是怕大家不好理解，所以也可以拆开，如下:
const keyArr = useState(0);
const key = keyArr[0];
const setKey = keyArr[1];

3. 实践案例

const initData = [
  {
    imgSrc: '',
    contentStr: '第一条评论',
  },
  {
    imgSrc: '',
    contentStr: '第二条评论',
  },
  {
    imgSrc: '',
    contentStr: '第三条评论',
  },
];
import { useState, useEffect } from "react";
// useEffect  用于监听数据变化，不要也可以的
const BuyComment = () => {
  // 带入初始值
  const [dataList, setDataList] = useState(initData);
  // 重点在这里
  // 往数组里添加数据
  const addRule = () => {
    let obj = {
      imgSrc: [],
      contentStr: '新的评论',
    };
    // 有深拷贝的必要，防止数据出问题
    const addItems = JSON.parse(JSON.stringify(dataList));
    addItems.push(obj);
    // 在这里完成值的修改
    setDataList(addItems);
  };
   return (
	<div>
	  {dataList.map((item, i) => {
        return (
          <div className={styles.mianBorder} key={i}>
              {item.contentStr}
          </div>
        );
      })}
       <div className={styles.addDiv}>
          <span className={styles.addCom} onClick={addRule}>
            + 添加评论
          </span>
        </div>
	</div>
   )
};
// 用于监听数据变化的
useEffect(() => {
  console.log(dataList);
}, [dataList]);
export default BuyComment;

做完以上的步骤，点击 添加评论 就会发现数据同步更改了。

4. useState 的惰性初始化

useState 初始值是支持惰性初始化的，所以我们可以传递一个函数给它。
这个函数会在组件第一次渲染的时候执行，当然，后续的渲染就不会执行了。
之所以有这个特性，是为了优化性能。因为有时候我们会遇到非常庞大的数据处理，可能还要进行深拷贝，这些操作还是很耗性能的，如果每次组件渲染的时候都会执行，那代价是很大的，但又不是必须的，所以 useState 的优点就体现出来了：只执行一次，大大的减少了操作的性能和代价。

// 假设这里数据量非常大：jsonObj，我们需要对它进行解析，计算等等操作
const jsonObj = "{...}"; // 可能是一个很大的js 对象 或者json字符串

function DemoComponent() {
  const [data, setData] = useState(() => {
  	console.log("执行了")
  	// 这种深拷贝是很耗性能的，所以我们在这里先把数据处理好，并且只处理一次
    return JSON.parse(JSON.stringify(jsonObj ));
  });
}