Javascript 反应挂钩渲染两次

我定义了一个场景：我们有一个使用父级道具和自身状态的组件

下面有两个组件DC和JOKER以及我的步骤：

单击DC的按钮

DC设置计数

小丑将与旧状态一起呈现

运行useffect和setCount

小丑又出现了

我想问为什么小丑渲染两次（第3步和第5步），而第一次渲染会浪费性能我只是不想要第3步如果类内组件我可以使用componentShouldUpdate来避免它。但胡克也有同样的东西？

我的代码在下面，或者打开这个网站

import React，{PureComponent，useState，useffect，}来自'React'；
功能小丑（道具）{
const[count，setCount]=useState（props.count）；
useffect（（）=>{
console.log（'I am JOKER's useffect-->'，props.count）；
设置计数（道具计数）；
}，[props.count]）；
log（“我是小丑的渲染-->”，count）；
返回(
小丑：你点击了{count}次

);
}
函数DC（）{
const[count，setCount]=useState（0）；
返回(
您单击了{count}次

{
console.log（'\n'）；
设置计数（计数+1）；
}}>
点击我
);
}
ReactDOM.render（，document.querySelector（“#app”））

我不确定我是否理解你的问题，但还是这样

当

组件更改状态时，它会将新状态值

count

传递给组件小丑。此时，组件将重新加载，以考虑第一次更改

然后将效果绑定到

props.count

更改

  useEffect(() => {
    console.log('I am JOKER\'s useEffect--->', props.count);
    setCount(props.count); 
  }, [props.count]);// <-- This one

---

如果我们只想做同样的事情，类似的组件应该更新，我们可以使用useMemo

函数DC（）{
const[count，setCount]=useState（0）；
const[sum，setSum]=useState（0）；
const memoizedJOKER=usemo（（）=>，[count]）；
返回(
{
//设置计数（计数+1）；
设定值（总和+1）；
console.log（'---单击--'）；
console.log（'\n'）；
}}>
点击我
DC:您单击了{count}次

现在是{sum}次

{回忆小丑}
);
}

单击该按钮时，JOKER不会再次渲染

这是StrictMode的一个故意特征。这种情况只发生在 开发，并有助于发现意外的副作用 渲染阶段。我们只对带有挂钩的组件执行此操作，因为 更可能在错误的地方意外产生副作用。 --

---

因为您正在使用

setCount（props.count）更新JOKER本地状态删除不会重新渲染的行。关于它的更多内容@ReyanshMishra我关心的是第3步。我知道当我在JOKER中设置计数时，JOKER将再次呈现。如果是类内组件，我可以使用componentShouldUpdate来避免它。现在hooks有了相同的东西或api？
useffect
被设置为在第一次渲染之后运行，这样开发者就可以在效果运行之前在屏幕上渲染一些东西，从而提高用户感知的性能指标。组件的性能不等于它运行了多少次渲染。@StephenKingsley虽然有这样的计划，但他们没有这样做，因为如果您忘记在监视的字段中添加一个字段，或者如果您使用的是带有private state.Woo的复合钩子调用，则会导致许多混乱行为。这就是我的观点！如果DC的状态更改，JOKER将启动渲染。你认为这是一个不必要的渲染吗？@StephenKingsley React中组件的生命周期是以一种它将进行初始渲染的方式进行的。如果您想一想，如果装载时它至少不运行一次，它将如何运行任何代码？如果您知道类似于C#的内容，请考虑初始运行的类中的构造函数。看到功能组件基本上是内联逻辑和特定于某个逻辑单元的视图是有意义的。“弄清楚要做什么，然后展示出来”。您可以在react here@Dannis中阅读更多关于生命周期的内容。这与组件生命周期无关。钩子不是类组件，它没有任何生命周期。我关心的是点击按钮后，小丑会先渲染，然后使用效果，然后再渲染。我知道钩子的顺序，只是我不想第一次渲染。我很清楚这一点，但让我用另一种方式问你。如果不运行代码所在的功能范围，您将如何运行代码useEffect？这是不可能的。它本身不是一个“渲染”，它只是一个函数。不能同时运行和不运行函数体。这不是函数的工作方式。如果你不想要实际的呈现（DOM部分），那么你可以用一个变量来控制它，但是你不能阻止代码实际运行。如果我们使用类组件，应该有shouldComponentUpdate和pureComponent。但是现在我们在Hooks中看到了什么？我在这里失去了理智，答案是“这是一个特性，不是一个bug”。不管怎样，+1，谢谢！
I am JOKER's  render--> 1 // Initial render where Joker receives props from DC
index.js:27 I am JOKER's useEffect---> 2 // The hook runs because props.count changed
index.js:27 I am JOKER's  render--> 2 // Joker rerenders because its state updated.