What is the difference between react registered routing table component and render?

HMGDCR598 2021-02-23 16:11:55
difference react registered routing table


1) Routing component file

import React,{ Component } from "react";
export default class Main extends Component {
constructor(props) {
super(props);
console.log("Main Execute constructor !!!!");
}
getUserId = ()=> {
let {
match: {
params:{id}
}
} = this.props
return id
}
componentDidMount() {
let userId = this.getUserId()
console.log(' Mount complete ===',userId)
}
componentDidUpdate() {
let userId = this.getUserId()
console.log(' Update complete ===',userId)
}
render() {
console.log('render')
let userId = this.getUserId()
return (
<div>
<div> page {userId} data </div>
</div>
)
}
}
 Copy code 

2)App Component files

import React,{ Component } from "react";
import { Link,Route,Switch,Redirect } from "react-router-dom";
import "./App.css";
import Main from "./components/Main";
export default class App extends Component {
state = {count:0}
handleRender = ()=> {
console.log(' will render Parent component ')
this.setState({
count: this.state + 1
})
}
render(){
console.log('App perform render...')
return (
<div className="app">
app....
<div>
<button onClick={this.handleRender}> Execute the parent component render</button>
</div>
<Link to="/mylist/userA"> Show users A</Link>
<Link to="/mylist/userB"> Show users B</Link>
{/* component direct 》 Register routing table */}
<Route path="/mylist/:id" component={Main}/>
{/* component 》 The callback function registers the routing table */}
{/* <Route path="/mylist/:id" component={(props)=>{
return(
// <Main key={props.match.params.id} {...props}/>
<Main {...props}/>
)
}}/> */}
{/* <Route path="/mylist/:id" render={(props)=>{
return(
// <Main key={props.match.params.id} {...props}/>
<Main {...props}/>
)
}}/> */}
<Redirect to="/mylist/userA"/>
</div>
)
}
}
 Copy code 

result :

  • (1) component Register the routing table directly :

    <Route path="/mylist/:id" component={Main}/>
     Copy code 
    • When you click route switch , Trigger only 【 Update of components 】, There is no trigger component 【 Mount complete 】, You can tell that it triggered 【 Update of components

    • In this way App Components render When the method is executed again , Not cause Main Component re render , It's just update, shortcoming : Cannot pass from parent component props To subcomponents , Routing properties can be accessed in subcomponents .

  • (2)component Use return Component to register the routing table :

    • Case one , The routing component does not use properties key

       <Route path="/mylist/:id" component={(props)=>{
      return(
      <Main {...props}/>
      )
      }}/>
       Copy code 
      • When you click route switch , Trigger only 【 Update of components 】, There is no trigger component 【 Mount complete 】, You can tell that it triggered 【 Update of components 】,props The parameter is the routing information of the routing component

      • This way, every time App Component re render When Main Components will perform an initialization lifecycle again , Not execution update,, But it can pass in parameters as Main Of props, You can access the routing properties , But you need to specify the input parameter in the function , The tag is then passed to the subcomponent

    • The second case , The routing component uses properties key

      <Route path="/mylist/:id" component={(props)=>{
      return(
      <Main key={props.match.params.id} {...props}/>
      )
      }}/>
       Copy code 
      • When you click route switch , Trigger only 【 Mount complete 】, There is no trigger component 【 Update of components 】, You can tell that it triggered 【 Mounting of components 】,props The parameter is the routing information of the routing component

      • When App Components render When triggered , Results and no attributes key It's the same

    • The third case , The routing component does not take any parameters

      Define a routing component Test

      import React,{ Component } from "react";
      export default class Test extends Component {
      constructor(props) {
      super(props);
      console.log("Test Execute constructor !!!!");
      }
      componentDidMount() {
      console.log('Test》 Mount complete ')
      }
      componentDidUpdate(precProp) {
      console.log('Test》 Update complete ')
      }
      render() {
      return (
      <div>
      <div>Test Components </div>
      </div>
      )
      }
      }
       Copy code 

      App The core code of the component file is as follows :

       <Route path="/mylist/:id" component={(props)=>{
      return(
      <Test/>
      )
      }}/>
       Copy code 
      • When you click route switch , Trigger only 【 Update of components 】, There is no trigger component 【 Mount complete 】, You can tell that it triggered 【 Update of components 】,props The parameter is the routing information of the routing component

      • When App Components render When triggered , Results and no attributes key It's the same

  • (3)Route Write the routing component directly in the tag Test

     <Route path="/mylist/:id">
    <Test/>
    </Route>
     Copy code 
    • Click route , Don't trigger hook functions
    • This way every time ( Except for the first time )App perform render Not cause Main Rerun the initialization lifecycle , Only execute update The hook of life , You can pass... From the parent component props To subcomponents , But there is one drawback to this approach , Subcomponents cannot be in props Access routing properties
  • (4)render Method

    <Route path="/mylist/:id" render={(props)=>{
    return(
    // <Main key={props.match.params.id} {...props}/>
    <Main {...props}/>
    )
    }}/>
     Copy code 
    • The routing component does not have key attribute :

      • When you click route switch , Trigger only 【 Update of components 】, There is no trigger component 【 Mount complete 】, You can tell that it triggered 【 Update of components 】,props The parameter is the routing information of the routing component

      • This way every time ( Except for the first time )App perform render Not cause Main Rerun the initialization lifecycle , Only execute update The hook of life , You can pass... From the parent component props To subcomponents , But there is one drawback to this approach , Subcomponents cannot be in props Access routing properties

    • Routing component belt key attribute :

      • When you click route switch , Trigger 【 Mount complete 】【 The constructor of the routing component 】, There is no trigger component 【 Update of components 】, You can tell that it triggered 【 Mount complete 】,props The parameter is the routing information of the routing component
    • When App Components render When triggered , Results and no attributes key It's the same

版权声明
本文为[HMGDCR598]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223155148639M.html

  1. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  2. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  3. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  4. 前端面试常考题:JS垃圾回收机制
  5. Frequently asked questions in front end interview: JS garbage collection mechanism
  6. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  7. Java之HTTP网络编程(一):TCP/SSL网页下载
  8. HTTP network programming in Java (1): TCP / SSL web page download
  9. Java之HTTP网络编程(一):TCP/SSL网页下载
  10. HTTP network programming in Java (1): TCP / SSL web page download
  11. 使用vite搭建vue项目
  12. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  13. 在 vue 中通过 express 连接数据库
  14. Using vite to build Vue project
  15. Display PDF file in component: Vue pdf
  16. Connecting database through express in Vue
  17. 2021届秋招哈啰出行前端面经(一面)
  18. vue使用sdk进行七牛云上传
  19. Javascript性能优化【内联缓存】 V8引擎特性
  20. Small true wireless smart headset evaluation: put intelligence into the ear
  21. The front end experience of the 2021 autumn recruitment
  22. Vue uses SDK to upload Qi Niu cloud
  23. 深入理解 Web 协议 (三):HTTP 2
  24. dhtmlxGantt如何重新排序任务
  25. JavaScript performance optimization [inline cache] V8 engine features
  26. 深入理解 Web 协议 (三):HTTP 2
  27. Deep understanding of Web protocol (3): http 2
  28. 深入理解 Web 协议 (三):HTTP 2
  29. How dhtmlxgantt reorders tasks
  30. 深入理解 Web 协议 (三):HTTP 2
  31. JavaScriptBOM操作
  32. JavaScriptBOM操作
  33. Deep understanding of Web protocol (3): http 2
  34. Deep understanding of Web protocol (3): http 2
  35. dhtmlxGantt甘特图重新排序任视频教程
  36. vue实现七牛云上传图片功能
  37. vue.js环境配置步骤及npm run dev报错解决方案
  38. Deep understanding of Web protocol (3): http 2
  39. JavaScript BOM operation
  40. JavaScript BOM operation
  41. Dhtmlxgantt reordering video tutorial
  42. Vue to achieve seven cattle cloud upload image function
  43. vue.js Environment configuration steps and NPM run dev error reporting solution
  44. 什么是HTTPS以及如何实施HTTPS?
  45. vue使用sdk进行七牛上传
  46. JavaScript 邮箱验证 - 正则验证
  47. Codeless development platform cloud watch sets off a "new revolution" in enterprise Digitalization
  48. Codeless development of cloud watch for enterprise digital solution
  49. What is HTTPS and how to implement it?
  50. Vue uses SDK to upload seven cows
  51. JavaScript mailbox verification - regular verification
  52. JavaScriptBOM操作
  53. JavaScript BOM operation
  54. How to create a new NPM package and publish it to the NPM community
  55. vue --tinymce 解决上传图片的方法
  56. Vue development
  57. A simple solution for vite to batch introduce SVG symbol
  58. Building 3D rendering engine from scratch with JS (2)
  59. Vue -- tinymece solution to upload pictures
  60. Common configuration of nginx