Question

我是react / redux中的noobies，我希望按照以下3条规则创建模态视图：

谁是网址依赖
谁是通用的
谁被优化

网址依赖的原因是它没有优化，它重新渲染了父级。

示例：我在'/ namespaces'有一个视图命名空间视图，它打印所有命名空间，当我打开打开模态视图的'/ namespaces / edit'时，命名空间是重新呈现的。如何不重新呈现命名空间列表？

路由器

下方

<Route path="namespaces" component={NamespaceList}>
   <Route path="edit" component={NamespaceEdit}/>
   <Route path="create" component={NamespaceCreate}/>
</Route>

NamespacesList 组件

function NamespacesList({ push, children }) {
  console.log("rendered !")
  return (
    <div>
      NamespacesList
      <p>
        <Link to="/namespaces/create">Create</Link>
        <br />
        <Link to="/namespaces/edit">Edit</Link>
      </p>
      {children}
    </div>
  )
}

NamespacesCreate 组件（打印在模态内）

const NamespacesCreate = function() {
  return (
    <Modal>
      NamespacesCreate
      <p>
        <Link to="/namespaces">Back to namespaces list ?</Link>
      </p>
    </Modal>
  )
}

用例：我在/templates/create（命名空间列表在模式的后面绘图，在控制台rendered !中打印然后当我点击链接以回到父网址/templates时，{再次打印{1}}。

所以有一种方法可以“优化”它而不是重新呈现namespaceList，或者我需要在它之间做出选择，或者我错了吗？

Answer 1

不要担心调用组件的render()方法的次数。在React中渲染非常便宜，如果内容没有改变，它实际上不会触及DOM。

当您开始在应用中遇到真正的性能问题时，您应该开始担心render()方法调用，这对于导航这样的一次性事情来说是不太可能的。例如，您可能希望优化动画或构建具有大量输入的组件。

如果您遇到此问题（不是更早！），您可以查看针对Advanced Performance优化，measuring wasted renders with ReactPerf和learn about common performance anti-patterns的React指南。

不要让这个问题变得复杂无缘无故。只有在遇到真正的问题时才会优化，并且不久之后。 React对于大多数用户的开箱即用非常快，并且经常调用render()方法非常好。

我可以避免在路线发生变化时重新渲染父路线处理程序组件吗？

1 个答案: