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 元素，只能是函數

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。