react-router 的参数render、component、children

component 最常用，只有匹配 location 才会加载 component 对应的 React组件。props更新，会重新加载组件
render 路由匹配函数就会调用。
children 不管路由是否匹配都会渲染对应组件。props更新，不会重新加载组件

优先级：children>component>render

// props更新，不会重新加载组价
<Route path="/c2" component={RouteTestChild2}></Route>
// props更新，会重新加载组价
<Route path="/c2" component={()=>{return <RouteTestChild2></RouteTestChild2>}}></Route>
// props更新，不会重新加载组价
<Route path="/c1/:name" render={()=>{ return <RouteTestChild1 num={this.state.num}></RouteTestChild1>}}></Route>
// props更新，不会重新加载组价
<Route path="/c3/:name" children={()=>{ return <RouteTestChild3 num={this.state.num}></RouteTestChild3>}}></Route>

React 核心渲染代码

 return (
          <RouterContext.Provider value={props}>
              {match // 是否与地址匹配
                ? children // 1.优先判断children是否存在
                  ? typeof children === 'function' // 存在情况下判断children是否是个函数
                    ? children(props)
                    : children
                  : component // 2.判断是否是一个component,
                  ? React.createElement(component.props) // 是, 创建一个元素
                  : render // 3. 判断是否是render属性; render传入是一个函数
                  ? render(props) // 执行render
                  : null // 否, 输出是空的
               
                : children // 不匹配,判断是否是有children
                ? typeof children === 'function' // 判断children是否是个函数
                  ? children(props) // 执行函数
                  : children // 组件直接渲染
                : null}
            </RouterContext.Provider>
          )