当你第一次购买路由器或者需要重新设置Wi-Fi网络时，设置过程可能会让你感到有些困惑。不过不用担心，只需按照简单的步骤操作，你就可以快速设置好网络连接并开始畅游互联网

本文内容目录一览：

• 1、React中路由操作、页面跳转
• 2、react多个路由共用同一个组件模块，切换路由跳转页面不刷新问题
• 3、react-router什么是根路由
• 4、react-router、react-redux、antd（Layout）
• 5、react router hashhistory render执行2次怎么解决
• 6、react和vue的实现原理有什么不同？

React中路由操作、页面跳转

一般适用于，点击按钮或其他组件进行页面跳转，具体使用方式如下：

react-router-redux 中包含以下几个函数，一般会结合redux使用：

具体使用时通过发送disppatch来进行页面跳转：

一般在完成某种操作，需要返回上一个页面时使用。

首先定义路由为 :

点击事件跳转到新页面 打开一个新的tab：

在新的页面获取路径上的参数：

获取路径参数 :

或者

......未完 待更

react多个路由共用同一个组件模块，切换路由跳转页面不刷新问题

问题背景

工作项目中两个页面模块基本业务流程和交互都差不多，因此决定用共用同一套组件，通过设置不同的路由，跳转到同一个模块，在模块内部通过路由的参数作区分，现在面临两个问题：

1）不同路由跳转后，组件只会重新渲染（render），而不会整个组件重新构建，即不会重走constructor等生命周期函数

2）共用reducer，需要解决数据相互解耦合，独立问题

路由问题原因和解决方案

react组件是根据diff算法来决定是否更新组件，不同路由跳转，如果组件props没有变化，则认为是同一个组件内部的状态更新，不会重建组件，需要每次跳转需要赋予组件不同的props，在路由组件最上层加上key：

const mapStateToProps = (state, props) = ({

otherData: fun(state),

key: props.location.state.from, // 将路由参数中的from赋予key,或者props.location.state.pathname

});

export default connect(mapStateToProps)(MyComponent);

不同mapStateToProps绑定函数时的组件注入key的写法：

export default (props)=User {...props} key={props.location.state.from} /

将路由参数from赋予给组件props的key，当不同路由跳转时，组件有了不同的key，因此实现了组件的构建更新

diff算法

diff算法是react的核心思想。当你添加了一个key之后，因为react在重新渲染时，会比较组件是否发生了变更，diff算法包括组件diff,element diff，还有dom树diff。有了key作为标识，react能很快的计算出是否需要重新渲染，如果没有添加key，默认就重新渲染。

react-router什么是根路由

react实现路由可以直接使用react-router。 ReactRouter是由Ryan Florence开发的应用于ReactJS的路由组件，它通过定义ReactJS组件Routes及相关子组件来实现页面路由的映射、参数的解析和传递。 以下是例子： var ReactRouter = require('react-router'); var Routes = ReactRouter.Routes; var Route = ReactRouter.Route;//定义整个页面的路由结构 var routes = ( Routes location="hash" Route path="/" handler={App} Route path="books" name="bookList" handler={Books}/ Route path="movies" name="movieList" handler={Movies}/ /Route /Routes );

react-router、react-redux、antd（Layout）

文档中的简介：React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

在我看来（我是做iOS开发的），这就像是 iOS 里面呢的 UITabbarController 和 UINavigattionController 的结合一样，控制着各个 ViewController 的跳转；不同的是react-router可以控制Route所在的位置，而iOS已经固定状态栏、导航栏、tabbar位置、高度，只能控制其隐藏和显示。

文档中介绍：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

我的理解是：此组件是对 model 或 viewModel 进行管理，解放我们对 setState 的操作；同时实在管理的时候可以进行一些中间件（applyMiddleware）操作，如：loggerMiddleware 等。

一个很丰富的UI组件库。题目中提到的 Layout 是我在开发过程中用到的布局样式。

如果单独只用这些组件中的某一个，根据文档都可以做得很好。但是三者一结合使用，就有一些问题了。

我的做法是将 Route 放到 Content 里面，共用 header ，类似于 iOS 里面的 tabbar 一样。在 header 里面添加 Link 标签，控制其切换、跳转。

此时会有一个问题，登录界面，并不要 header 的显示。于似乎，在经过多次尝试（可能并不是最优的），我在 index.js 的外层加了一个 Switch，将 index 放到 Route 里面。此处用 Window 命名是根据 iOS 开发里面的层级命名的，并不是js里面的window。

在需要跳转登录界面的时候，this.props.history.replace("login")

跳转下级路由的时候，this.props.history.push("detial")

这就导致 react-router 的跳转出现了一些问题。this.props.history 为 undefine 。这样的话，就不能跳转了啊。

尝试零：是不是在mapStateToProps方法里面把 history 给传丢了？补充一下，结果并不能解决。

尝试一：在跳转的时候，window.location.href("llogin")，这样是可以实现的，但是每次页面都会刷新，react-router的意义何在？

最终，在 react-router-dom 里面提供了 withRouter，将 withRouter 放到 connect 外面就好了。

另外每个页面可能都需要一个 Provider，但是整个项目只能有一个 Router，所以并不能像 redux 文档 里面那样些写。而应该将 Router 放到 Provider外面（我是这么写的，而且可以用没警报。但不确定是百分之百有道理的）。

react router hashhistory render执行2次怎么解决

先写一个简单App页面，其实就是简单修改了react-router的官方例子中的animations例子，修改了两个地方:

1.路由方式由browserHistory修改为hashHistory

2.在Page1组件中打印console.log('render page1');

直接上代码：

然后现在点击Page1链接,会发现render page1 被打印了两次，说明，Page1组件被渲染了两次，假如Page1组件比较复杂的话，岂不是很影响性能；

为了仔细研究为什么会render两次，下面把Page1组件稍微改造一下如下,记录两次render的时候Page1的props：

再次点击Page1链接，打印出来了，两次的props；唯一的区别就在this.props.location.action的值，第一次位PUSH,第二次为POP

查阅了很多的文章和资料，想弄明白PUSH和POP的区别和联系,有一篇文章讲解的react-router内部原理，可以看一下深入理解react-router路由系统,可以参考一下，里面说

action, // location 类型，在点击 Link 时为 PUSH，浏览器前进后退时为 POP，调用 replaceState 方法时为 REPLACE

我在react-router的github issues上提出了这个问题，官方直接说这是3.x版本的BUG,react-router4.x的版本已经修复了这个问题，也不再深究为什么会出现这个问题，直接说目前的解决方案：

在容器组件的shouldComponentUpdate方法中添加一行代码：return (this.props.router.location.action === 'PUSH');

再次点击page1链接，只会渲染一次，修改之后完整的代码如下：

react和vue的实现原理有什么不同？

Vue和React两个JavaScript框架都是当下比较受欢迎的，他们两者之间的区别有哪些，各自的优缺点是什么，本文将为你呈现。

正如我们之前提到的，WordPress 的核心团队正争论着为应该将哪款（前端框架）加入现在的架构之中。目前看来，暂时脱颖而出的是React与Vue.js，社区中的很多成员正权衡着这两款框架的利弊。

那到底哪款框架会胜出，哪款框架又会沦为昔日的prototype.js.呢？让我们一起看看吧。

我已经写出了两个几乎一样的web应用，一个是基于Vue，另一个则基于React，可以方便你在看这篇文章的时候查找相关代码。

React sample app

Vue sample app

简单介绍

除非你最近一直不关注前端的发展，不然你肯定听说过由Facebook创建的JavaScript UI框架——React。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular 1等框架不同，它的诞生改变了JavaScript的世界。其中最大的变化是React推广了Virtual DOM（我们稍后探究）并创造了新的语法——JSX，JSX允许开发者在JavaScript中书写HTML（译者注：即HTML in JavaScript）。WAT?

Vue致力解决的问题与React一致，但却提供了另外一套解决方案。Vue使用模板系统而不是JSX，使其对现有应用的升级更加容易。这是因为模板用的就是普通的HTML，通过Vue来整合现有的系统是比较容易的，不需要整体重构。同时Vue声称它更容易学习，我最近才接触Vue，能证明所言非虚。关于Vue还需要说的是，Vue主要是由一位开发者进行维护的，而不像React一样由如Facebook这类大公司维护。

相似之处

React与Vue存在很多相似之处，例如他们都是JavaScript的UI框架，专注于创造前端的富应用。不同于早期的JavaScript框架“功能齐全”，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。

Virtual DOM

啊哈，人们经常说Virtual DOM是什么呢？

t019804d4b5dfd6da0b

Vue.js(2.0版本)与React的其中最大一个相似之处，就是他们都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字的意思：虚拟DOM，DOM树的虚拟表现。它的诞生是基于这么一个概念：改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。

Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。

例子如下，我们可以看看下面这个列表在HTML中的代码是如何写的：

ul class="list"

liitem 1/li

liitem 2/li

/ul

而在JavaScript中，我们可以用对象简单地创造一个针对上面例子的映射：

{

type: 'ul',

props: {'class': 'list'},

children: [

{ type: 'li', props: {}, children: ['item 1'] },

{ type: 'li', props: {}, children: ['item 2'] }

]

}

真实的Virtual DOM会比上面的例子更复杂，但它本质上是一个嵌套着数组的原生对象。

当新一项被加进去这个JavaScript对象时，一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。计算差异的算法是高性能框架的秘密所在，React和Vue在实现上有点不同。

Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

而对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化。

小结：如果你的应用中，交互复杂，需要处理大量的UI变化，那么使用Virtual DOM是一个好主意。如果你更新元素并不频繁，那么Virtual DOM并不一定适用，性能很可能还不如直接操控DOM。

组件化

React与Vue都鼓励组件化应用。这本质上说，是建议你将你的应用分拆成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系。关于组件化的例子可以在这篇文章的中间部分被找到:

你可以认为组件就是用户界面中的一小块。如果让我来设计Facebook的UI界面，那么聊天窗口会是一个组件，评论会是另一个组件，不断更新的好友列表也会作为一个组件。

在Vue中，如果你遵守一定的规则，你可以使用单文件组件.

//PastaItem.vue

template

li class="pasta-dish list-unstyled"

div class="row"

div class="col-md-3"

img :src="this.item.image" :alt="this.item.name" /

/div

div class="col-md-9 text-left"

h3{{this.item.name}}/h3

p

{{this.item.desc}}

/p

button v-on:click="addToOrderNew" class="btn btn-primary"Add to order/button mark{{this.orders}}/mark

/div

/div

/li

/template

script

export default {

name: 'pasta-item',

props: ['item'],

data: function(){

return{

orders: 0

}

},

methods: {

addToOrderNew: function(y){

this.orders += 1;

this.$emit('order');

}

}

}

/script

style src="./Pasta.css"/style

正如上面你看到的例子中，HTML, JavaScript和CSS都写在一个文件之中。你不再需要在.vue组件文件中引入CSS，虽然这也是可以的。

总的来说，配置路由器和Wi-Fi是一个简单而重要的过程。希望这篇文章能够为你提供足够的指导和帮助，使你能够轻松地配置你的路由器和Wi-Fi，并保护你的网络安全。