react-router-dom中＜Route/＞的三种使用方式

有三种书写方式

1. <Route path="/home" component = { Home }/>
2. <Route path="/home" render = { () => {
          return <Home/>
      } }/>
3.<Route path="/home">
		<Home/>
  </Route>

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

一、方式1

<Route exact path="/" component={(routeProps) => <MyHome {...routeProps} />}></Route>

这种方式会造成每次App组件重新render时候MyHome组件都会重新执行一次初始化生命周期，而不是执行update，，但是它能够传递入参作为MyHome的props,可以访问路由属性，但是需要在函数指定入参，然后标记传递到子组件

二、方式2

<Route exact path="/" component={MyHome}></Route>

这种方式在App组件render方法再执行时，不会造成MyHome组件重新渲染，只是update,缺点：不能从父组件传递props到子组件，可以在子组件访问路由属性

三、方式3

<Route exact path="/">
	<MyHome />
</Route>

这种方式每次（第一次除外）App执行render不会造成MyHome重新执行一次初始化生命周期，只会执行update的生命钩子，可以从父组件传递props到子组件，但是这个方式有一个缺点，子组件不能在props访问路由属性

四、方式4

<Route
	exact
	path="/"
	render={(routeProps) => <MyHome {...routeProps} />}
></Route>

这种方式App的非第一次执行render方法，不会造成子组件重新执行constructor等生命周期初始化方法，只会执行update，可以传递props到子组件，可以在子组件取得路由props（只需在传递时指明