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

• Route 標(biāo)簽的三個互斥屬性 render、component、children
• Route 就是用來匹配路由的，并且對匹配到的路由就顯示，所以會有可能兩個以上的路由會匹配到，所以需要 Switch 標(biāo)簽包圍，Switch 可以幫助只渲染匹配到的第一個路由。
• 一般情況下，Route 推薦使用 children 元素方式配置路由，但是除此之外還有另外三種配置方法。

1. compnent (屬性或者方法)：
2. render(方法)
3. children（方法）：children 是只要配置了該屬性，其里面返回的函數(shù)都會渲染，無論路徑是否匹配。它能接受所有的路由屬性，若不匹配 match 會為 null

• children 的優(yōu)先級會比其他兩個要高
• 內(nèi)聯(lián)的 component 方法當(dāng)父組件的 render 方法每次（非第一次）執(zhí)行時（比如 setState 造成）都會使得 component 方法返回的組件再次重新執(zhí)行初始化生命周期函數(shù)，而 render 屬性的方法就不會，它在父組件再次執(zhí)行 render 時只會觸發(fā)組件的 update 生命鉤子

1. 每次路由切換都觸發(fā)路由對應(yīng)的組件重新渲染，無論是 component 屬性還是 render 屬性
2. 當(dāng)用 component 屬性，值為匿名函數(shù)時，父組件的每次重新 render（無論有沒有 props 傳遞給子組件）都會造成子組件重新 render（每次 render 都會執(zhí)行 constructor）
3. 當(dāng)用 component 屬性時，值為 react 元素時，父組件的每次重新 render 都不會造成子組件每次都執(zhí)行 constructor
4. 當(dāng)用 render 屬性時，值為匿名函數(shù)時，父組件的每次重新 render 都不會造成子組件每次都執(zhí)行 constructor
5. 當(dāng)用 render 屬性時，值不可以為 react 元素，只能是函數(shù)

總結(jié)

以上是生活随笔為你收集整理的React router 的 Route 中 component 和 render 属性理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。