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

Question

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

• 谁是 url 依赖者
• 谁是通用的
• 优化了谁

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

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

在路由器下

<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 ! 打印然后当我点击链接返回到父 url /templates, rendered ! 再次打印。

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

Answer 1

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

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

如果以及何时您遇到此问题(不是更早!)，您可以查看 React 指南 Advanced Performance优化，measuring wasted renders with ReactPerf , 和 learn about common performance anti-patterns .

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