[译] 为何 React 18 中 useEffect 会运行两次?
云前端
共 1000字,需浏览 2分钟
· 2022-06-07
原文:https://flaviocopes.com/react-useeffect-two-times/
在 2022 年 3 月发布的 React 18 的发布公告中,数量可观的新特性扑面而来。而对 useEffect()
的默认行为的改变,可能就此被淹没了。
如果你的应用在更新到 React 18 之后行为迥异,或许正是因为 useEffect()
默认变为被运行 2 次了。
虽然这种情况只发生在 development mode 中,但无疑每位开发者都会遇到。
另一个限制条件是 只在 strict mode 发生,但这同样是用 create-react-app
或 Next.js 所构建应用的默认选项。
事情就是这么个事情,所以不用紧张是不是代码出了什么问题 -- React 的现状如此。
唯一避免这种行为的方法就是 禁用 strict mode;鉴于严格模式的重要性,这毕竟是个你能修复这种改变引入的任何问题之前临时的变通之策。
在 Next.js 中,可以在 next.config.js
文件里增加这个选项:
reactStrictMode: false
在 create-react-app
创建的应用里,可以把 index.js
文件里的 StrictMode 高阶组件去除:
比如从这样:
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
StrictMode>
);
改为:
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<App />
);
评论
人工智能周刊#18:微软发布手机端大模型、Llama 3 中文模型列表、苹果开源新项目、
主打尊重隐私的搜索引擎 duckduckgo,也推出了 ai chat 服务,可以使用 chatgpt 或者 claude机器学习周刊:关注 Python、机器学习、深度学习、大模型等硬核技术本期目录:1、Qwen1.5-110B:Qwen1.5 系列的首个千亿参数开源模型2、苹果开源
机器学习算法与Python实战
0
Python加速运行技巧
Python 是一种脚本语言,相比 C/C++ 这样的编译语言,在效率和性能方面存在一些不足。但是,有很多时候,Python 的效率并没有想象中的那么夸张。本文对一些 Python 代码加速运行的技巧进行整理。 0. 代码优化原则 本文会介绍不少的 Python 代码加速运行的技巧。在深入代码优化细
机器学习算法与Python实战
0
Vite 4.3 为何性能爆表?
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群Vite 4.3 相比 Vite 4.2 取得了惊人的性能提升,下面和大家分享一下 Vite 4.3 性能大幅提升的幕后技术细节,深度阅读,全程高能
程序员成长指北
0
李彦宏:开源大模型不如闭源,后者会持续领先;周鸿祎:“开源不如闭源” 的言论是胡说八道
架构师大咖
架构师大咖,打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖,每日推送。
公众号该公众号已被封禁0、李彦宏:开源大模型不如闭源,后者会持续领先当今
源码共读
0
【Python】Python加速运行技巧
Python 是一种脚本语言,相比 C/C++ 这样的编译语言,在效率和性能方面存在一些不足。但是,有很多时候,Python 的效率并没有想象中的那么夸张。本文对一些 Python 代码加速运行的技巧进行整理。 0. 代码优化原则 本文会介绍不少的 Python 代码加速运行的技巧。在深入代码优化细
机器学习初学者
0
React正在杀死Angular吗?
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群作者 |Hassan Trabelsi
策划 & 翻译 |张卫滨这是一个老生常谈的争论(在技术时代,这是在所难免的):Angular 对战 React。这就像“先有鸡还是先有蛋”的难题,不过这个问题是针对 Web 开发
前端Q
0
分享几个前端中好玩且有用的开源工具,总有一个适合你!
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群正所谓差生文具多,作为前端的我们,拥有几个合适的工具和网站可以很有效的提高我们的工具效率,还会有一些很有趣的网站可以在我们敲 bug 累了的时候供我们娱乐,接下来我就和大嘎分析一下我在用的一些工具和网站。聚合API该网站提供了大量的
前端Q
0
图解 transformer 中的自注意力机制
↓推荐关注↓本文将将介绍注意力的概念从何而来,它是如何工作的以及它的简单的实现。注意力机制在整个注意力过程中,模型会学习了三个权重:查询、键和值。查询、键和值的思想来源于信息检索系统。所以我们先理解数据库查询的思想。假设有一个数据库,里面有所有一些作家和他们的书籍信息。现在我想读一些Rabindra
Python学习与数据挖掘
0