Reactjs 反应元素的不必要渲染

我刚刚开始学习React，正在开发一个调用quotes API的小应用程序。API有一个端点，它返回一个随机引号。当应用程序最初加载时，它会调用API并显示一个报价，还有一个按钮可以单击以获取新的随机报价（对API的新调用）

我有一个名为App的根组件。此组件将QuoteWrap组件作为子组件。QuoteWrap组件有两个子组件：用于获取新随机报价的按钮和显示报价作者和报价本身的报价组件。这是QuoteWrap组件内部的代码：

export default function QuoteWrap() {
    const { quoteData, isLoading, fireNewCall } = useQuote();

    const handleClick = () => {
        fireNewCall();
    };

    return(
        <>
            <button onClick={handleClick}>Get random quote</button>
            
            { isLoading ? 
                <h2>Loading...</h2>
            :
                <Quote author={quoteData.author} quote={quoteData.quote} />
            }
        </>
    );
}

导出默认函数QuoteWrap（）{
常量{quoteData，isLoading，fireNewCall}=useQuote（）；
常量handleClick=（）=>{
fireNewCall（）；
};
返回(
获取随机报价
{孤岛加载？
加载。。。
:
}
);
}

useQuote（）是一个自定义钩子，用于管理对API的调用，并返回3个值：1-数据，2-如果调用正在进行，3-调用API的函数

显然，每次单击按钮时，整个QuoteWrap组件都会重新呈现（正如quoteData和isLoading更改一样）。但实际上，按钮不需要重新渲染，因为它从不更改

所以我想：好吧，我可以把按钮移到应用程序组件上。但是我无法访问useQuote钩子中的fireNewCall函数

如何防止按钮被重新渲染？在这种情况下，这很重要吗？还是我太沉迷于反应再现了

---

谢谢

我想你可能对React-re渲染太着迷了。应重新呈现该按钮，因为在某些情况下，

handleClick

应在

fireNewCall

更改时更改。即使如此，

handleClick

也不会更改。无需考虑元素重新渲染。

我认为您可能过于沉迷于React重新渲染。应重新呈现该按钮，因为在某些情况下，

handleClick

应在

fireNewCall

更改时更改。即使如此，

handleClick

也不会更改。无需考虑元素重新渲染。

每当handleClick函数更改时，即每次渲染QuoteWrap时，组件都会重新渲染

解决方案是useCallback挂钩。useCallback将在每次呈现QuoteWrap时将相同的函数返回到handleClick，只要依赖项没有更改

您可以这样使用它：

const handleClick=useCallback（（）=>{
fireNewCall（）；
}，[fireNewCall]）；

---

fireNewCall是依赖项，因此只要useQuote返回稳定的fireNewCall函数，则您的按钮将不会重新渲染，因为handleClick属性没有更改。

您的组件将在每次handleClick函数更改时（即每次渲染QuoteWrap时）重新渲染

解决方案是useCallback挂钩。useCallback将在每次呈现QuoteWrap时将相同的函数返回到handleClick，只要依赖项没有更改

您可以这样使用它：

const handleClick=useCallback（（）=>{
fireNewCall（）；
}，[fireNewCall]）；

---

fireNewCall是依赖项，因此只要useQuote返回一个稳定的fireNewCall函数，那么您的按钮就不会重新渲染，因为handleClick属性没有更改。

与Benjamin和Viet所说的差不多-在您的原始代码中，每次渲染时都会为handleClick分配一个新函数。您可以使用

React.useCallback

来维护原始函数引用，并且仅当依赖项数组中的某些内容发生更改时才更新它-在这种情况下，只需将

fireNewCall

放入依赖项数组中即可

---

但正如越南所说，不要过于沉迷于它。使用

React.useCallback

甚至可能会降低代码的速度。查看Kent C.Dodds post了解更多信息。

与Benjamin和Vieta所说的差不多-在您的原始代码中，每个渲染上都为handleClick指定了一个新函数。您可以使用

React.useCallback

来维护原始函数引用，并且仅当依赖项数组中的某些内容发生更改时才更新它-在这种情况下，只需将

fireNewCall

放入依赖项数组中即可

---

但正如越南所说，不要过于沉迷于它。使用

React.useCallback

甚至可能会降低代码的速度。查看肯特·C·多德的帖子，了解更多信息。

我认为你太沉迷于重新渲染了。React非常有效，没有必要做过多的事情，不要为按钮重新渲染而烦恼。对于无意义地重新渲染的较大版面块，您可以使用react memo功能-我认为您过于沉迷于重新渲染。React非常有效，没有必要做过多的事情，不要为按钮重新渲染而烦恼。对于无意义地重新呈现的较大版面块，可以使用react memo函数-Hi！谢谢你的回答。但即使使用useCallback，QuoteWrap不会在每次quoteData和/或isLoading更改时重新渲染吗？我的意思是，你无法避免按钮被重新按下，是吗？我已经看到，并不是所有回答我问题的人都说不要担心重新渲染，所以我不会。只是想把基本概念弄清楚。。。基本上，我最初的问题是，是否有更好的方法来组织事物，或者它是否很好，只是忘记了按钮重新渲染。谢谢@Marcos很难说没有看到useQuote（）的代码。但我假设useQuote（）中可能有一个useffect（）钩子，这将导致重新渲染。但是，quoteData和isLoading都是在渲染时提供给QuoteWrap的，所以简言之，不，q