React JS 中的状态变量如何在不在 UI 上使用的情况下工作答案

【问题标题】：How state Varibales in React JS works without using it on UIReact JS 中的状态变量如何在不在 UI 上使用的情况下工作
【发布时间】：2023-02-09 16:05:10
【问题描述】：

为什么当我点击“Click me”按钮两次以上时，我的 React 功能组件只渲染 2 次，如果我使用了一个状态变量并且对该组件内部的状态变量进行了更改，“但没有使用该状态变量用户界面内的任何地方”？

代码：

const Header = () => {

  const [title, setTitle] = useState("My Title");
  console.log('rendered');

  return (
    <>
      <button onClick={e => {
        setTitle("Title My");
      }}>Click me</button>
    </>
  );
};

export default Header;

【问题讨论】：

在 UI 中使用它们并不重要。它只改变了 2 次，因为将状态设置为相同的值不会重新渲染组件

标签： javascript reactjs state

【解决方案1】：

在这种情况下，组件只渲染两次，因为 React 针对性能进行了优化，并且它只会在状态或道具发生变化时重新渲染组件。

如果您希望每次单击按钮时组件都重新呈现，则必须使用不同的值设置状态，而不是始终相同（在您的情况下为Title my）

【讨论】：

【解决方案2】：

我怀疑 React 没有看到任何重新渲染的理由，因为状态没有改变；该值与上次相同。但是如果你想重新渲染，你可以使用下面的代码强制渲染。

import { useState } from 'react'

function useForceUpdate(){
  const [value, setValue] = useState(0); 
  return () => setValue(value => value + 1); 
}

const Header = () => {
  const forceUpdate = useForceUpdate();
  const [title, setTitle] = useState("My Title");
  console.log('rendered');

  return (
    <>
      <button onClick={e => {
        setTitle("Title My");
        forceUpdate();
      }}>Click me</button>
    </>
  );
};

export default Header;

【讨论】：