使用useState钩子时对组件渲染进行两次反应

Question

我无法理解为什么我的AppReact组件呈现两次，如下面的gif所示。

我插入了一个控制台。在返回组件之前记录日志，查看组件渲染的次数。

每当我移除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

您的setSearch正在更新输入框的vue，然后当搜索更改时，使用效果再次更新它。

移除useffect

然后

const handleSearch = (event) => {
    setSearch(event.target.value);
    localStorage.setItem('search', event.target.value)
  }

下面是一个沙盒链接：https://codesandbox.io/s/dawn-night-h2xiz?file=/src/App.js

它确实不能解决问题，但将来可能会避免一些问题。

双渲染只应在开发模式下进行，而不应在生产模式下进行。见丹·阿布拉莫夫的回复：https://github.com/facebook/react/issues/15074

Answer 2

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

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

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

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

这使我认为我们的代码是正确的，我们可以忽略dev中的重新呈现问题。

Answer 3

看看这个：https://github.com/facebook/react-devtools/issues/1297

“意外的重新呈现”实际上并不是由useEffect引起的，而是DevTools通过单独重新呈现函数组件来“检查”挂钩值的方式。

虽然我知道意外的渲染在某些情况下可能表明问题，但这种特殊的渲染实际上不应该是问题，原因有几个：

渲染不是递归的。（不渲染子组件。）渲染只发生在安装了DevTools的用户身上，即使如此，也只会影响单个组件（树中当前选定的组件）。渲染没有副作用（例如DOM不会被更新）。