React组件重复渲染问题：ToDo应用中组件console.log打印两次

我正在用React构建一个简易ToDo应用，首页展示dummy_data.js中的JSON格式笔记列表。但遇到一个问题：NotesList组件里的console.log会打印两次，ListItem组件中打印props时也会出现同样的重复输出，需要找出原因。

相关代码 #

App.js

import React from 'react';
import NotesList from './pages/NotesListPage';
import Note from './pages/NotePage';
import Header from './components/Header';
import {
    BrowserRouter as Router,
    Routes,
    Route
} from 'react-router-dom';

function App(){
    return(
        <div>
            <Router>
                <Header />
                <Routes>
                    <Route path='/' element={<NotesList />} />
                    <Route path='/note/:id' element={<Note />} />
                </Routes>
            </Router>
        </div>
    );
}

export default App;

NotesListPage.js

import notes from '../assets/dummy_data';
import ListItem from '../components/ListItem';

function NotesList(){
    console.log('am i running twice?')
    return(
        <div>
            {
                notes.map((note, index) =>(
                    <div key={index}>
                        <ListItem note={note} />  
                        <br/>
                    </div>
                ))
            }
        </div>
    );
}
export default NotesList;

ListItem.js

import {Link} from 'react-router-dom';

function ListItem(props){
    //console.log(props)
    return(
        <Link to={`/note/${props.note.id}`}>
            <i>{props.note.body}</i>
        </Link>
    )
}

export default ListItem;

dummy_data.js

let notes = [
    {
        "id": 1,
        "body": "Todays Agenda\n\n- Walk Dog\n- Feed fish\n- Play basketball\n- Eat a salad",
        "updated": "2021-07-14T13:49:02.078653Z",
        "created": "2021-07-13T21:54:16.235392Z"
    },
    {
        "id": 2,
        "body": "Bob from bar down the \n\n- Take out trash\n- Eat food",
        "updated": "2021-07-13T20:43:18.550058Z",
        "created": "2021-07-13T00:17:13.289897Z"
    },
    {
        "id": 3,
        "body": "Wash car",
        "updated": "2021-07-13T19:46:12.187306Z",
        "created": "2021-07-13T00:16:22.399841Z"
    }
]

export default notes;

原因分析 #

• React 18 StrictMode 机制：这是最常见的原因。在React 18的开发环境中，StrictMode会自动重复调用组件的渲染函数、useEffect等生命周期方法（包括函数组件的顶层代码），目的是检测组件中是否存在不安全的副作用（比如未清理的定时器、重复订阅等）。你可以检查项目的index.js文件，通常create-react-app生成的项目会默认用<React.StrictMode>包裹<App />。
• 仅开发环境触发：这种重复渲染是开发环境的专属特性，生产环境打包后不会出现该现象，不会影响线上用户体验。
• 验证方式：如果想临时确认，可以暂时移除index.js中的<React.StrictMode>标签，此时组件的console.log会只打印一次。但不建议长期移除，因为StrictMode能帮你提前发现潜在的代码问题。

内容的提问来源于stack exchange，提问作者d0ppL3G