反应 {useState, useEffect)。 React 使用单个“useEffect”渲染的频率如何，这会在回调中触发“setState”？答案

【问题标题】：React {useState, useEffect). How often React renders with single "useEffect", which triggers a 'setState' in a callback?反应 {useState, useEffect)。 React 使用单个“useEffect”渲染的频率如何，这会在回调中触发“setState”？
【发布时间】：2020-09-10 05:35:20
【问题描述】：

在这里，我期望 3 倍渲染。

从初始装载开始。
来自唯一的“useEffect”
来自 axios-callback 附带的“setValue(data)”。

为什么只有 2 个渲染？

const Main = () => {
 const [value, setValue] = useState("");

 useEffect( () => {
    fetch()
  }, []);

const fetch = () => {
  axios.get(url)
  .then(data => {
    setValue(data)
  });
};

console.log("before render");  // 2x "before render"

return (...);
};

ReactDOM.render(<Main />, document.getElementById("root"));

【问题讨论】：

标签： reactjs use-effect use-state

【解决方案1】：

useEffect 不会触发重新渲染，它只是调用提供给效果的回调。只有状态修改会导致重新渲染。

【讨论】：

@Viktor_W 谢谢。艰难我还有一个问题，你可能会帮助我：为什么我会得到 3 个渲染，当： - 我删除了 'useEffect' 中的 '[ ]' - 而且我的 axios-response 总是相同的（--> 没有变化在状态的内容中）。
不确定。一种理论：Axios 返回一个对象，包含状态码和类似的东西，对吧？说 res1 和 res2 是同一个 axios 请求的响应。然后，res1 == res2 将始终为 false，因为它们是不同的对象。所以当 React 比较这个时，它认为你已经分配了一个新的值。但是res1.data == res2.data 是真的。但是，这不应该在 3 次渲染时停止，它应该无限地重新渲染

【解决方案2】：

只会发生 2 次渲染 -

1- From the initial mount.
2- From the 'setValue(data)', which comes with the axios-callback.

像 setValue 和类似的钩子不会立即重新渲染您的组件。他们可能会批量更新或将更新推迟到以后。所以你在之后只得到一个重新渲染最新的 setValue 调用。

useEffect 在被告知之前不会触发重新渲染。

【讨论】：

简单快捷。谢谢。艰难我还有一个问题，你可能会帮助我：为什么我会得到 3 个渲染，当： - 我删除了 'useEffect' 中的 '[ ]' - 并且我的 axios-response 总是相同的（--> 没有变化在状态的内容中）。
@coasterrel useEffect 将在组件渲染时运行，这可能比您想象的要多。一些知识链接 1 - andreasreiterer.at/react-useeffect-hook-loop 和 2- css-tricks.com/run-useeffect-only-once`