React router 的 Route 中 component 和 render 属性理解

  • Route 标签的三个互斥属性 render、component、children
  • Route 就是用来匹配路由的，并且对匹配到的路由就显示，所以会有可能两个以上的路由会匹配到，所以需要 Switch 标签包围，Switch 可以帮助只渲染匹配到的第一个路由。
  • 一般情况下，Route 推荐使用 children 元素方式配置路由，但是除此之外还有另外三种配置方法。
  1. compnent (属性或者方法)：
  2. render(方法)
  3. children（方法）：children 是只要配置了该属性，其里面返回的函数都会渲染，无论路径是否匹配。它能接受所有的路由属性，若不匹配 match 会为 null
  • children 的优先级会比其他两个要高
  • 内联的 component 方法当父组件的 render 方法每次（非第一次）执行时（比如 setState 造成）都会使得 component 方法返回的组件再次重新执行初始化生命周期函数，而 render 属性的方法就不会，它在父组件再次执行 render 时只会触发组件的 update 生命钩子
  1. 每次路由切换都触发路由对应的组件重新渲染，无论是 component 属性还是 render 属性
  2. 当用 component 属性，值为匿名函数时，父组件的每次重新 render（无论有没有 props 传递给子组件）都会造成子组件重新 render（每次 render 都会执行 constructor）
  3. 当用 component 属性时，值为 react 元素时，父组件的每次重新 render 都不会造成子组件每次都执行 constructor
  4. 当用 render 属性时，值为匿名函数时，父组件的每次重新 render 都不会造成子组件每次都执行 constructor
  5. 当用 render 属性时，值不可以为 react 元素，只能是函数