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

Route 标签的三个互斥属性 render、component、children
Route 就是用来匹配路由的，并且对匹配到的路由就显示，所以会有可能两个以上的路由会匹配到，所以需要 Switch 标签包围，Switch 可以帮助只渲染匹配到的第一个路由。
一般情况下，Route 推荐使用 children 元素方式配置路由，但是除此之外还有另外三种配置方法。

compnent (属性或者方法)：
render(方法)
children（方法）：children 是只要配置了该属性，其里面返回的函数都会渲染，无论路径是否匹配。它能接受所有的路由属性，若不匹配 match 会为 null

children 的优先级会比其他两个要高
内联的 component 方法当父组件的 render 方法每次（非第一次）执行时（比如 setState 造成）都会使得 component 方法返回的组件再次重新执行初始化生命周期函数，而 render 属性的方法就不会，它在父组件再次执行 render 时只会触发组件的 update 生命钩子

每次路由切换都触发路由对应的组件重新渲染，无论是 component 属性还是 render 属性
当用 component 属性，值为匿名函数时，父组件的每次重新 render（无论有没有 props 传递给子组件）都会造成子组件重新 render（每次 render 都会执行 constructor）
当用 component 属性时，值为 react 元素时，父组件的每次重新 render 都不会造成子组件每次都执行 constructor
当用 render 属性时，值为匿名函数时，父组件的每次重新 render 都不会造成子组件每次都执行 constructor
当用 render 属性时，值不可以为 react 元素，只能是函数

React router 的 Route 中 component 和 render 属性理解相关推荐

html根据文档定位,html文档中的location对象属性理解及常见的用法
关于location对象的简单理解: 1.location对象中涵盖了当前页面(本页面)或者更直接的说,是当前加载的这个html文档的url信息 2.location对象作为window对象的一个属性 ...
CSS中transform：skew属性理解
transform中通常用skew来对盒子进行倾斜.如下代码: #div{transform: skewY(10deg);} //对Y方向进行倾斜10度,意思是保留Y方向,将盒子沿着X方向进行倾斜. ...
对于Spring中事务的readonly属性理解
spring中readOnly的定义,并不是不能在事务中进行修改等DML操作,它只是一个"暗示",提示数据库驱动程序和数据库系统,这个事务并不包含更改数据的操作,那么JDBC驱动程 ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
React Router教程–如何使用代码示例渲染，重定向，切换，链接等
If you have just started with React, you are probably still wrapping your head around the whole Sing ...
关于React Router v4的虚张声势指南
In this article, we'll cover the important things you can quickly learn to be informed and confident ...
使用React Router v4的嵌套路由
React Router v4 introduced a new declarative, component based approach to routing. With that approac ...
react router 4
React Router V4 也走了react的路,咳,一切都成组件.例如Route.Link.Switch等都是组件. react-router和react-router-dom是react ro ...
react router
目录前言核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包一.React-Router v1 1.一些概念 ...

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

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

React router 的 Route 中 component 和 render 属性理解相关推荐

最新文章

热门文章