使用 useState hook 时响应组件渲染两次 [英] React component rendering twice when using useState hook

问题描述

我一直无法理解为什么我的 App react 组件渲染了两次，如下面的 gif 所示.

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

每当我移除 useState 钩子时，我的应用程序只会按照我的预期呈现一次.欢迎任何有关为什么会发生这种情况的指导

import React, { useState, useEffect } from 'react';const ListItem = ({ title, url, author, num_comments, points }) =>{返回 (<div><跨度><a href={url} target='_blank' rel='noopener noreferrer'>{标题}</a>{' '}由{作者}</span><br/><span>评论:{num_comments}</span><br/><span>点数:{points}</span><小时/>

);};const List = ({ list }) =>{return list.map(({ objectID, ...item }) => (<ListItem key={objectID} {...item}/>));};const Search = ({ search, onSearch }) =>{返回 (<div><label htmlFor='search'>搜索:</label><input id='search' type='text' value={search} onChange={onSearch}/><p>搜索 <strong>{search}</strong></p>

);};const App = () =>{const 故事 = [{标题:'反应'，url: 'https://reactjs.org/',作者:'乔丹沃克'，num_comments: 3,点数:4，对象 ID: 0,},{title: 'Redux',url: 'https://redux.js.org/',作者:'丹·阿布拉莫夫，安德鲁·克拉克'，num_comments: 2,点数:5，对象ID:1，},];const [search, setSearch] = useState(localStorage.getItem('search') || '');useEffect(() => {localStorage.setItem('search', search);}， [搜索]);const handleSearch = (事件) =>{setSearch(event.target.value);};console.log('渲染');返回 (

<h1>我的黑客故事</h1><Search search={search} onSearch={handleSearch}/><小时/><列表list={stories.filter((story) =>story.title.toLowerCase().includes(search.toLowerCase()))}/>

);};导出默认应用程序；

解决方案

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

<块引用>

意外的重新渲染"实际上并不是由 useEffect 引起的具体来说——更确切地说，这是 DevTools检查"钩子的方式通过单独重新渲染函数组件来获取值.

虽然我知道意外的渲染可能表明存在问题在某些情况下，这个特定的人实际上不应该成为问题几个原因:

渲染不是递归的.(不呈现子组件.)渲染只发生在安装了 DevTools 的用户身上，即使这样——仅影响单个组件(当前在树).渲染没有副作用(例如 DOM 不会更新).

I haven't been able to understand why my App react component is rendering twice, as seen in the gif below.

I inserted a console.log just before returning the component to see how many times my component was rendering.

Whenever I remove the useState hook, my app renders just once as I suppose should be. Any guidance on why this is happening is welcome

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;

解决方案

Check this out : https://github.com/facebook/react-devtools/issues/1297

The "unexpected re-render" isn't actually caused by useEffect specifically– but rather, it's the way DevTools "inspects" hooks values by re-rendering the function component in isolation.

While I understand that unexpected renders can indicate problems in some cases, this particular one shouldn't actually be a problem for several reasons:

The renders aren't recursive. (Child components aren't rendered.) The renders only happen for users with DevTools installed, and even then– only impact a single component (the one currently selected in the tree). The renders don't have side effects (e.g. the DOM won't be updated).

这篇关于使用 useState hook 时响应组件渲染两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！