React-Router 介绍及使用

React-Router 40 版本之前安装

React-Router 40 版本之后安装

在React-Router 40 开始，官方提供一个基础的路由 react-router 。

目前使用的版本

获取path的参数

Route里面 component 和 render 这两个属性的使用：

<Link /> 里面的 to 属性是一个对象， 比如：传递一个基本的 location 对象也可以在后面加上传递其他的对象, 这些对象值都可以通过 props 获取这里面的参数

<NavLink> 是 <Link> 的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有：

Switch 意义：

这个 to 属性也可以是一个对象

<Redirect /> 里面的 from 属性：

例如：

如果我访问 >

子组件 获取 thispropstest 是 undefined

layout 里需 clone 两级，因为第一级是 Switch ，然后才是 Route 。

遍历组件需要一个前提，就是你的组件都是通过map渲染出来的。

1、你有一个专门存储当前页面下组件各个配置参数的数据结构，通常是一个数组；

var components = [

{coms_1},

{coms_2},

{coms_3},

]

2、定义一个function用来渲染你的组件，在函数内部写一个map将组件的数据结构传入函数，用switch判断组件的类型，然后每个类型渲染对应的组件，也就是你贴出来的那些组件代码，把参数传入组件。

yourComponents(components) {

var coms = componentsmap((result) => {

switch (resulttype) {

case "type1":

return <Com1 ref={resultid} {others} />

}

})

thiscoms = coms

return coms

}

3、需要注意的一点是这些组件需要传入一个组件id，因为你后面要map这些组件。

4、调用方式通过thisrefscomId。

引用传递（Ref forwading）是一种通过组件向子组件自动传递 引用ref 的技术。对于应用者的大多数组件来说没什么作用。但是对于有些重复使用的组件，可能有用。例如某些input组件，需要控制其focus，本来是可以使用ref来控制，但是因为该input已被包裹在组件中，这时就需要使用Ref forward来透过组件获得该input的引用。

核心方法是ReactforwardRef,该方法接受一个有额外ref参数的react组件函数，不调用该方法，普通的组件函数是不会获得该参数的。

如果子组件中用到了该方法，那么对应的高阶组件中也需要使用ReactforwardRef方法

Refs 使用场景

1react是一个用于构建用户UI的JS库。

2若要使用react创建项目，需全局安装：npm(cnpm) i -g create-react-app。

3react里面的交JSX，即javascript + xml。

4JSX里面的插入变量，需用{}，里面只支持表达式，不支持语句，例如（if else 则不能插入）

5创建一个react项目，命令：create-react-app 项目名。

6使用react，需在文件找中引入react(核心包)， react-dom(浏览器使用)。

7react-dom包含了一个render方法，用于渲染JSX。

1const Xabc = () => { return (<h1>hello world </h1>) } 在render中用帕斯卡命名方式引入，例:<Xabc/>   快捷键：rfc

2class Xabc extends ReactComponent { render() { return (<div>你好</div>) }  快捷键：rcc

3在react里面的JSX里，若是空元素，则推荐使用自闭合。

4每一个组件的最外层只有一个根元素，在react 16 之后，新增了一个Fragment组件，用于如果您不想生成一层新的空DOM，可使用Fragment，在react中引入{Fragment}

5thispropschildren 是一种特殊的props，表示组件的子元素，相当于Vue里面的solt

6如果是函数的方式创建的组件，想获取到props，需在函数的参数里面通过一个形参去获取。

7父组件向子组件传参，直接在子组件调用的地方写属性，除字符串以外，都用{}

1用class创建的组件，也叫类组件，只有类组件才有state,若是用箭头函数创建的组件，也叫无状态组件（stateless component）

2react里面的循环用数组的map实现。

3创建state,一种是：直接在class里面：state= {}

4第二种是constrcutor () {

        super();

thisstate = {}

}

1在react里面，修改state必须在thissetState里面去修改，否则不会反应到render()里面

2setState是异步的，若想获取最新的状态，需在setState中再传入一个回调函数，setState(val,[callback])，只有第二个参数才能获取到最新状态，第一个参数可以是一个对象，也可以是一个function，这个function的第一个参数是上一次的state的状态，必须return一个对象。

3对于react的方法

    1用箭头函数，this则指向react

    2在DOM上调用时，用bind(this)改this指向

    3不推荐在render里面改指向，可以在constrcutor里面用bind改this。

深度拷贝与浅度拷贝的区别主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的 *** 作不会影响原始对象。

5lodash

_cloneDeep()

例如对一个input框进行聚焦事件

1引入{createRef}

2对需要的DOM 元素进行 *** 作

3创建

4执行（注意要加 current）

拷贝参考文档：>

以上就是关于React-Router 介绍及使用全部的内容，包括:React-Router 介绍及使用、react如何得到children,解析和渲染的时机、React丨Umi this.props.children传参数等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！