reactjs - 只需添加 useState 钩子语句导致组件重新渲染
问题描述
我创建了一个基本的create-react-app并添加了以下语句
const [stateA, setStateA] = useState(false);
我已经在我的组件中放置了一个 console.log。完整的组件代码是
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
const [stateA, setStateA] = useState(false);
console.log("rendered");
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
它显示“渲染”两次。任何人都可以说出为什么会这样吗?
解决方案
如果您注意到index.js
(create-react-app
现在React.StrictMode
默认使用)文件,您可能有一个名为的包装器React.StrictMode
,它负责这个额外的重新渲染。包装器将调用render
,constructor
和其他生命周期方法来检测副作用。所以这是意料之中的。
您可以在此处阅读更多信息:https ://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects
希望这可以帮助!
推荐阅读
- spring-integration - http:outbound-gateway 跟随重定向
- json - ADF V2 - 使用动态内容和变量的 Web POST 方法
- javascript - 如何在eval中使用动态字符串
- java - 如何在 JsonRPC 参数的函数中切换表?
- linux - 在 GDB gcore 创建的核心转储中包含共享库的只读段
- java - 引起:java.lang.ClassNotFoundException:com.jfoenix.controls.JFXButton
- javascript - Number.Nan 在这个函数中是如何工作的?
- elasticsearch - Elasticsearch 存储桶聚合返回错误的 doc_count
- ios - UICollectionView 不在 UITableViewCell 内滚动
- python - 字符串中已有“{}”时的Python字符串格式化