唉,我是专门来写 bug 的吧

一句话总结: StrictMode 下,不要在 useState、useRef 等初始值的构造函数/回调函数里修改 state

起因是,我需要写这样一个代码

  1. 有一个通过单例模式创建的对象;
  2. 这个单例对象初始化完成以后,需要刷新页面状态;

正常的前端,大概会把对象初始化的逻辑写在 useEffect 或者 useEffectLayout

可是,今天的我脑洞清奇,因为我想让早点初始化完成,所以我把对象的初始化写在了 useState 的初始值里,这样执行的时机会在 useEffect 或者 useEffectLayout 之前

js 复制代码
import React, { useState } from 'react';

class Onething {
  constructor(props) {
    console.log('*******constructor');
    props.init();
  }

  static instance;

  static getInstance(props) {
    console.log('*******getInstance');
    if (!this.instance) {
      this.instance = new Onething(props);
    }
    return this.instance;
  }
}

const Example = () => {
  const init = () => {
    setText('完成');
  }
  const [text, setText] = useState('初始');
  const [thing] = useState(Onething.getInstance({ init }));

  console.log('******render', text);

  return <div>{text}</div>;
}

我心里,这个代码的执行顺序是这样的:

  1. 将 text 初始化为 "初始";
  2. 执行 Onething 的构造函数,将 text 修改为 "完成";

会先初始化 text 为 "初始",再执行 Onething 的构造函数,构造函数里将 text 变成 "完成",所以最后界面会展示"完成"。

结果!这个代码!!没有照我的预期运行!!!单例对象初始化完成后,界面依然显示"初始"!!!!

打开控制台,组件函数在 StrictMode 下执行了两遍,

  1. 将 text 初始化为 "初始";
  2. 执行 Onething 的构造函数,将 text 修改为 "完成";
  3. StrictMode 下第二次执行组件函数,再次将 text 初始化为 "初始";

由于 Onething 是单例模式,第二次执行时没有执行构造函数、再修改 text 值,所以 text 值又变成了 "初始";

唉,唉,唉

我是专门来写 bug 的吧

相关推荐
举个栗子dhy4 小时前
第四章、路由配置
前端·javascript·react.js
im_AMBER4 小时前
React 03
前端·笔记·学习·react.js·前端框架·react
.生产的驴7 小时前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
@PHARAOH17 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
举个栗子dhy21 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
前端·javascript·react.js
举个栗子dhy1 天前
第一章、React + TypeScript + Webpack项目构建
前端·javascript·react.js
半生过往1 天前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
天蓝色的鱼鱼1 天前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
Dontla1 天前
React useCallback介绍(用来缓存函数的引用,避免每次渲染都重新创建函数)主要用于性能优化
react.js·缓存·性能优化
AI智能研究院2 天前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js