我可以避免在路由更改时重新渲染父路由处理程序组件吗？

Question

我是 react / redux 的新手，我希望按照这 3 条规则创建模态视图：

谁是 url 受抚养人
谁是通用的
优化了谁

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

示例：我在“/namespaces”处有一个名称空间视图，它打印所有名称空间，当我打开“/namespaces/edit”时，它打开模态视图名称空间正在重新渲染。如何不重新呈现命名空间列表？

在路由器下方

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

命名空间列表组件

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 ! 然后当我单击 link 返回到父 url /templates，又打印了rendered !。

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

Answer 1

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

只有当您的应用程序开始遇到真正的性能问题时，您才应该开始担心 render() 方法调用，这对于导航等一次性问题来说不太可能。例如，您可能想要优化具有大量输入的动画或表单组件。

如果你有这个问题（不是更早！），你可以查看 Advanced Performance optimizations, measuring wasted renders with ReactPerf, and learn about common performance anti-patterns.

的 React 指南

不要让这无缘无故地使您的代码复杂化。只有当你遇到真正的问题时才进行优化，而且不要太早。 React 对于大多数用户开箱即用的需求来说非常快，render() 方法被经常调用是非常好的。

我可以避免在路由更改时重新渲染父路由处理程序组件吗？

Can I avoid re-rendering parent route handler component when the route changes?

javascript

reactjs

react-router