基本反应问题。为啥在 React 文档的这个例子中需要 useEffect ？

Posted 2023-03-17

【中文标题】基本反应问题。为啥在 React 文档的这个例子中需要 useEffect ？

【英文标题】：Basic React question. why is useEffect needed in this example from the React documentation?基本反应问题。为什么在 React 文档的这个例子中需要 useEffect ？

【发布时间】：2022-01-10 19:20:21

【问题描述】：

react文档中给出了这个例子来描述useEffect的使用。

import React,  useState, useEffect  from 'react';

function Example() 
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => 
    // Update the document title using the browser API
    document.title = `You clicked $count times`;
  );

  return (
    <div>
      <p>You clicked count times</p>
      <button onClick=() => setCount(count + 1)>
        Click me
      </button>
    </div>
  );

如果不使用下面的 useEffect 就不能重写吗？ 为什么首选useEffect？

import React,  useState, useEffect  from 'react';

function Example() 
  const [count, setCount] = useState(0);

  const handleChange = () => 
      setCount(count + 1);
      document.title = `You clicked $count times`;
  

  return (
    <div>
      <p>You clicked count times</p>
      <button onClick=handleChange>
        Click me
      </button>
    </div>
  );

【参考方案1】：

这里有两个问题：

在当前渲染中调用状态设置器 won't reassign the stateful const 变量 - 您需要等到 next 渲染才能更新 count，所以

const handleChange = () => 
    setCount(count + 1);
    document.title = `You clicked $count times`;

行不通。单击后，您的第二个 sn-p 将生成 You clicked 0 times。

即使有可能，当有多个地方可以调用状态设置器时，在每个地方之后放置应该发生的事情并不是很容易维护 - 最好能够放置该代码之后只在一个地方运行。

【讨论】：

很好的答案，谢谢。我完全理解你的第二个要点。对于第一个，“

@SamArcher 你可以想到setState 函数as being async。如果count 在设置文档标题之前发生了更新，那是偶然的（不能保证）。如果您需要在与setState 调用相同的范围内使用更新后的值，则应使用与state 值不同的变量。