React useState导致双重渲染 [英] React useState cause double rendering

问题描述

考虑规范的 useState 示例:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  console.log(count);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

单击按钮会使每个状态打印两次.这是为什么呢?

Clicking the button makes each state print twice. Why is that?

推荐答案

把 console.log 放到一个没有依赖关系的 useEffect 钩子里，你会发现它不是t 实际上渲染了两次.

Put the console.log in an useEffect hook without dependencies and you'll see it isn't actually rendering twice.

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

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  });
  
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

这是一个很好的组件生命周期图，它列出了基于类的生命周期函数，但渲染/提交阶段是相同的.

Here's a good diagram of the component lifecycle, it lists the class-based lifecycle functions, but the render/commit phases are the same.

需要注意的重要一点是组件可以渲染".没有实际提交(即您在屏幕上看到的常规渲染).单独的 console.log 就是其中的一部分.效果在提交"中运行.阶段.

The import thing to note is that the component can be "rendered" without actually being committed (i.e. the conventional render you see to the screen). The console.log alone is part of that. The effects run after in the "commit" phase.

useEffect

... 传递给 useEffect 的函数将运行在渲染提交到屏幕之后....

... The function passed to useEffect will run after the render is committed to the screen. ...

默认情况下，效果会在每次完成渲染后运行，...

By default, effects run after every completed render, ...

反应严格模式

检测意外副作用

严格模式无法自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们.这是通过有意双重调用以下函数来完成的:

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• 类组件constructor、render和shouldComponentUpdate方法
• 类组件静态getDerivedStateFromProps方法
• 函数组件体
• 状态更新函数(setState 的第一个参数)
• 传递给 useState、useMemo 或 useReducer
的函数

• Class component constructor, render, and shouldComponentUpdate methods
• Class component static getDerivedStateFromProps method
• Function component bodies
• State updater functions (the first argument to setState)
• Functions passed to useState, useMemo, or useReducer

这仅适用于开发模式.

这篇关于React useState导致双重渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！