Question

据我了解，当需要重新渲染或有任何状态更新时，整个React功能组件都会重新运行，那么如何正确管理这些功能中的状态？是否重要的一点是，不要让每次运行该函数时都不想重新创建的事件处理程序之类的成员都清空？

编写优化的功能组件是否有某种最佳实践？

Answer 1

就我而言，您想知道如何管理或改善您的反应表现吗？好吧，很正确，当此组件或父组件（如果有）中的任何状态发生变化时，react中的每个组件都会重新渲染，因此，有一个工具（Chrome扩展程序）可帮助您找出执行操作React developer tool时重新渲染应用程序的哪一部分请让我知道这是否不是您想要的

Answer 2

您可能正在寻找“便笺”。

React.memo（...）是React v16.6中引入的新功能。有用与React.PureComponent类似，它有助于控制功能组件重新渲染。 React.memo（...）用于功能组件 React.PureComponent是用来对组件进行分类的。我们如何使用 React.memo（…）？

这很简单。假设我们有一个功能组件，如下所示：

const Funcomponent = ()=> {
    return (
        <div>
            Hiya!! I am a Funtional component
        </div>
    )
}

我们只是将FuncComponent作为参数传递给React.memo函数：

const Funcomponent = ()=> {
    return (
        <div>
            Hiya!! I am a Funtional component
        </div>
    )
}
const MemodFuncComponent = React.memo(FunComponent)

React.memo返回了一个纯净的组件MemodFuncComponent。该组件是我们将在JSX标记中呈现的组件。每当组件中的props和state发生变化时，React将检查prev state和props以及下一个props和state是否相等（如果不相等），则功能组件将重新渲染；如果它们相等，则功能组件将不会重新渲染。

对于第二个问题，是的。您应该避免在render函数内部定义函数，或者对于功能组件，请避免在函数内部进行定义，否则将导致不必要的后果调用这些函数，可能会导致不良行为，并导致在每次重新渲染组件时都将其创建。

为事件处理程序添加嵌入式回调函数也是如此。它们应在render function之外定义。

编写优化的React功能组件

2 个答案: