react-router中的render、children、component

简介: 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

目录
相关文章
|
14天前
|
前端开发 JavaScript
react的render什么时候渲染?
react的render什么时候渲染?
21 0
|
14天前
|
前端开发
React Component和Purecomponent区别
React Component和Purecomponent区别
24 0
|
9月前
|
前端开发
前端项目实战陆拾壹react-admin+material ui-踩坑-List需要Datagrid中children写法
前端项目实战陆拾壹react-admin+material ui-踩坑-List需要Datagrid中children写法
39 0
|
14天前
|
前端开发
React中render Props模式
React中render Props模式
React中render Props模式
|
14天前
|
前端开发 开发者
React 组件的 children 数据使用
React 组件的 children 数据使用
46 0
|
14天前
|
前端开发 JavaScript
React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
48 0
|
14天前
|
弹性计算 前端开发 JavaScript
前端新趋势?有了Web Component,还用纠结Vue或React?
Web Component 的概念最早在 2011 年被 Google 提出,并在 2018 年 V1 版本开始被主流浏览器所支持(除了 IE)。
|
6月前
|
前端开发 JavaScript 容器
react render的作用
react render的作用
56 0
|
6月前
|
设计模式 前端开发 JavaScript
什么是高阶成分(HOC)?解释 React 中 render() 的目的?
什么是高阶成分(HOC)?解释 React 中 render() 的目的?
|
9月前
|
前端开发 JavaScript
React render 的原理和触发时机
React render 的原理和触发时机
115 0