Route三参比较

这次主要讲的是react-router-dom的Route三个参数（component、render、children）的比较

上地址：地址1、地址2

先从需求说起：需要把最外层的方法（或者参数）带入到路由控制的组件中去。

component

原项目中直接import一个组件，放入这个参数中

//index.js

import A from './xx';

这样想传入变量或者方法就没有办法实现，然后找到了地址1中提到的component，上面写到可以传入一个inline function，刚好同时看到了地址2的内容，正好验证了上面说的，修改后代码

const data = {key : 'value'};

{

       const obj = Object.assign({},{data : data},props);   //第二个obj是我希望传入进去的参数

        return 

}}

接着就在组件A中的this.props看到了data参数，也得到了我们想要的结果。打印this.props

component

但是就有点郁闷，这个方法的 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的例子

{

    return

}}

在所谓的A组件中打印this.props和component是一样的。

同时改变index中的state也不会使得重新create一个崭新的A组件。pe 非

children

看描述感觉最大的作用是：允许您根据路由是否匹配来动态调整UI。

暂时没有这方面的需求...

我是小陆，我爱这个世界