这次主要讲的是react-router-dom的Route三个参数(component、render、children)的比较
先从需求说起:需要把最外层的方法(或者参数)带入到路由控制的组件中去。
component
原项目中直接import一个组件,放入这个参数中
//index.js
import A from './xx';
<Route component = { A }/>
这样想传入变量或者方法就没有办法实现,然后找到了地址1中提到的component,上面写到可以传入一个inline function,刚好同时看到了地址2的内容,正好验证了上面说的,修改后代码
const data = {key : 'value'};
<Route component = { props => {
const obj = Object.assign({},{data : data},props); //第二个obj是我希望传入进去的参数
return <A {...obj}/>
}}
接着就在组件A中的this.props看到了data参数,也得到了我们想要的结果。打印this.props
但是就有点郁闷,这个方法的 props 变量是从哪里来的,为什么可以传入方法呢?接着我在定义obj上面添加了一个debugger,运行到断点,在调用栈中发现了下面的代码
姑且可以看出传入了Route给的props(history、match等)和上下文。然后就没有继续往上追溯...
问题又来了:
如果这个时候index.js文件有一个state,当state改变(通过this.setState方法)使得index重新render,这个时候你就会发现,每次render对于组件A来说都是一次全新的渲染和调用(可以在A的contructor方法中打上log),这个又是为什么呢?让我们一起看看地址1里面的一段话
尖头指(的不太清楚)的地方有提到:如果为组件提供一个内联函数,那么每个渲染都会创建一个新的组件。这导致现有组件卸载和新组件安装而不仅仅是更新现有组件。当使用内联函数用于内联渲染时,使用 render 或 children
所以我初略的总结:如果上面不是我们希望的,那么有两种方式解决:
1.使用上面提到的 render 或者 children
2.把state控制的部分单独拧出来独立成一个组件,避免index组件的再次render,当然这个肯定是不好的,那么我们就看看上面提到的 render 和 children 吧
render
修改上面component的例子
<Route render = { props =>{
return <A data={data} {...props}/ >
}}
在所谓的A组件中打印this.props和component是一样的。
同时改变index中的state也不会使得重新create一个崭新的A组件。pe 非
children
看描述感觉最大的作用是:允许您根据路由是否匹配来动态调整UI。
暂时没有这方面的需求...