使用 useState hook 时 React 组件渲染两次

Question

我无法理解为什么我的应用程序反应组件渲染两次，如下面的 gif 所示。

我在返回组件之前插入了一个 console.log 以查看组件渲染了多少次。

每当我删除 useState 挂钩时，我的应用程序就会像我想象的那样只渲染一次。欢迎任何关于为什么会发生这种情况的指导

import React, { useState, useEffect } from 'react';

const ListItem = ({ title, url, author, num_comments, points }) => {
  return (
    <div>
      <span>
        <a href={url} target='_blank' rel='noopener noreferrer'>
          {title}
        </a>{' '}
        by {author}
      </span>
      <br />
      <span>Comments: {num_comments}</span>
      <br />
      <span>Points: {points}</span>
      <hr />
    </div>
  );
};

const List = ({ list }) => {
  return list.map(({ objectID, ...item }) => (
    <ListItem key={objectID} {...item} />
  ));
};

const Search = ({ search, onSearch }) => {
  return (
    <div>
      <label htmlFor='search'>Search: </label>
      <input id='search' type='text' value={search} onChange={onSearch} />
      <p>
        Searching for <strong>{search}</strong>
      </p>
    </div>
  );
};

const App = () => {
  const stories = [
    {
      title: 'React',
      url: 'https://reactjs.org/',
      author: 'Jordan Walke',
      num_comments: 3,
      points: 4,
      objectID: 0,
    },
    {
      title: 'Redux',
      url: 'https://redux.js.org/',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 1,
    },
  ];

  const [search, setSearch] = useState(localStorage.getItem('search') || '');

  useEffect(() => {
    localStorage.setItem('search', search);
  }, [search]);

  const handleSearch = (event) => {
    setSearch(event.target.value);
  };

  console.log('rendered');

  return (
    <div className='App'>
      <h1>My Hacker Stories</h1>
      <Search search={search} onSearch={handleSearch} />
      <hr />
      <List
        list={stories.filter((story) =>
          story.title.toLowerCase().includes(search.toLowerCase())
        )}
      />
    </div>
  );
};

export default App;

Answer 1

甚至我也想知道为什么我的控件会渲染两次。

我的大多数组件中都没有 useEffect 挂钩，并且大多数情况下我只是在用户在输入框中输入数据时设置状态（不可改变）。这种情况也发生在每个具有两个 Why 绑定的组件中。

DevTools： 我在没有安装开发工具的浏览器中尝试了我的应用程序，但仍然存在同样的问题。

React.StrictMode 我认为这是潜在的罪魁祸首。当我从 index.js 中删除此标签时，所有组件都开始正常工作。我还在官方文档中读到，strictMode 检查仅在开发模式下执行，在生产构建中被忽略。

这让我认为我们的代码是正确的，我们可以忽略dev中的重新渲染问题。