react-router中的render、children、component

前言

在新发布的react-router 5.0中，route组件有三个支持组建渲染的属性，那我们到底该如何使用他们呢，今天就让我们详细的了解一下~

render

render属性能使你便捷的渲染内联组件或是嵌套组件，你可以给这个属性传入一个函数，当路由的路径匹配时调用。同时，render属性也会接受所有由route传入的所有参数

//内联方式
  <Route path="path" render={() => <div>这是内联组件写法</div>} />
  //嵌套组合方式
  <Route path="path" render={ props => (
    <ParentComp>
      <Comp {...props} />
    </ParentComp>
  ) />

children

children属性是这三个属性中比较特殊的一个，它的值为一个函数，当Route有children属性时，不管当前的路径是否与Route匹配，该函数都会执行，同时，children属性也会接受所有由route传入的所有参数。

<Route path="path" children={ props => (
    <div className={props.match? "active": ''}>
      <Link to="path" />
    </div>
  ) />

component

当你使用component属性时，router会通过你赋给该属性的值，使用React.createElement方法去创建一个新的React元素，这意味着如果你给component属性赋的值是一个内联函数，那他每次渲染都会创建一个新的组件，这会导致每次渲染都会伴随新组件的挂载和旧组件的卸载，而不是只是对已存在组件的更新操作。

所以当你要使用内联函数进行组件渲染时，使用render或children属性会更合适些。

const Comp = props => <div>{props.match.params.name}</div>
  
  <Route path="path" component={Comp} />

注意

在使用Route的这三个属性渲染组件时还有一点值得注意，就是当这三个属性同时存在时的优先级问题，正常情况下我们基本上使用其中一个属性就可以了，但当他们同时存在时，优先渲染component的值，其次是render属性的值，而children属性的值优先级最低，为了避免 不必要的错误，尽量每个Route中只是用他们三个中的其中一个。

component > render > children

文章参考

https://blog.csdn.net/weixin_44809405/article/details/91393342?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param