简介：

当2014年Facebook推出React时，给整个业界带来全新的看待网页应用开发的方式，和React一同问世的Flux，也克服传统MVC框架的很多弊病。技术在不断发展，在2015年，Flux的一个变体Redux出现，进一步优化了Flux的功能。

优秀之处：

• 专注视图层：（不处理路由，数据，以及逻辑的处理）

• VirtualDom：只对虚拟dom更新，不对真实dom更新；只对dom进行必要的更新，实现的重绘的最小化；

• jsx语法：

• 高内聚，低耦合

• onClick 不是原生dom中的onclick事件，这里是onClict是通过react的事件委托方式，触发挂在顶层dom节点上的一个事件处理函数（提高了性能）；

• 可以将样式一起写入组件文件中；

• 关于jsx语法的说法：

• 在jsx语法中可以直接写入组件，注意组件为了和普通标签区别，必须第一个字母大写；

• jsx语法是历史的进步还是倒退；（样式，结构，逻辑于一体）

• 活跃的生态圈：（开源项目）

• 组件式开发

• 手动搭建项目：

• npm init

• 安装项目依赖

cnpm install --save-dev babel-core babel-loader babel-preset-stage-2 babel-plugin-transform-react-jsx babel-plugin-transform-runtime babel-preset-es2015 babel-preset-react babel-preset-stage-0 css-loader html-loader html-webpack-plugin react react-dom style-loader url-loader webpack webpack-dev-server

• 配置babelrc文件：

 {

    "presets": [

        "es2015",

        "stage-0",

        "react"

    ],

    "plugins": ["transform-runtime", "transform-react-jsx"]

}

• webpack.config.js的配置文件：

除了如下配置有更改，其他可以完全遵照vue的配置

{

                test: /\.js|.jsx$/,

                use: [

                    "babel-loader",

                ],

                exclude: /node_modules/

            },

• 在vsCode中开发react的配置：

安装jsx插件配置如下：

安装React/Redux/react-router Snippets插件，可以帮助我们快速生成一定的语句；

所有的react组件使用jsx后缀来标识；

• 自动化构建项目：

• 初始化：

全局安装：

npm install –-global create- react- app

初始化项目：

create- react- app myReactApp

启动服务：

cd myReactApp

npm start

• 组件写法：

import React,{Component} from "react"

import ClickCount from "./ClickCount.jsx"

class Main extends Component {

  constructor(props){

    super(props)

  }

  render(){

    return (

      <ul>

        <li><ClickCount name="first" num={1}></ClickCount></li>

        <li><ClickCount name="second" num={10}></ClickCount></li>

        <li><ClickCount name="third" num={7}></ClickCount></li>

      </ul>

    )

  }

}

export default Main

注：对于jsx语法的解析必须引入React，虽然这里不用，但是如果不引入会因无法解析jsx而报错；组件的定义必须遵循首字母大写

• jsx语法使用：

属性：

1、属性值直接为字符串

2、动态解析属性值

const element = （<img src={user.avatarUrl}></img>）;

react的jsx：

const element = (

  <h1 className="greeting">

    Hello, world!

  </h1>

);

用React.createElement()同样可以达到同样的效果；

const element = React.createElement(

  'h1',

  {className: 'greeting'},

  'Hello, world!'

);

• 项目的分解：

npm run eject 进行项目配置文件的弹射；

• react的工作方式：

• 从繁琐的dom处理中解脱出来，响应式，函数式编程思维；输入相同的数据，将产出相同的效果；数据更新，dom同时做出更新；

• Virtual Dom

Dom：结构化文本的抽象表达式；

虚拟dom：对dom树的抽象，不会触及浏览器，只存在于js内存的空间树形结构，每次的数据刷新，render函数的执行都会触发一个新旧虚拟dom 的对比，如果无改变，则不更新，有改变，只更新相应dom结构；

• 元素的渲染

• jsx语法将元素渲染到dom中

• 更新元素渲染：

React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的；更新界面的唯一方法就是重新挂载节点

function tick() {

  const element = (

      <h2>{new Date().toLocaleTimeString()}.</h2>

  );

  ReactDOM.render(

    element,

    document.getElementById('root')

  );

}

setInterval(tick, 1000);

• 只会更新必要的部分(可以在谷歌开发者工具中进行dom更新的查看)

• 在react的jsx语法中，如果标签没有子元素，可以直接使用闭合标签；

• 在react的组件必须首字母进行大写，否则React.createEelement则无法查找到组件，进行编译；

• jsx支持标签名为表达式；，如果使用动态标签名，则需先将表达式解析赋值给一个变量；

• React组件以及基本语法：

• 组件的设计要素：

高内聚：把逻辑紧密相关的内容放在一个组件中；

低耦合：不同组件之间的依赖关系要尽量弱化；尽量保持每个组件的独立性；

• 组件的生命周期：

• 装载过程：

• Constructor:

初始化state；

绑定成员函数的this环境（bind、：： ）防止以解构的方式进行全局作用域进行调用；

例：this.fn=this.fn.bind(this)或this.fn=::this.fn

• GetInitialState：初始化state值,必须结合React.createClass()使用，使用es6的方式，此函数无效果；

const Test=React.createClass({

  getInitialState:function(){

    return {

      name:"zhangsan"

    }

  },

  getDefaultProps:function(){

    return {

      name:"zhangsan" //这里的zhangsan相当于默认值

    }

  }

})

• GetDefaultProps：初始化props值,必须结合React.createClass()使用，使用es6的方式，此函数无效果，用属性defaultProps代替；

class Test extends Component {

  constructor(props){

super(props)

this.state={data:new Date()}

  }

  render(){

    return (

      <ul>

        <li><ClickCount name="third" num={7}></ClickCount></li>

      </ul>

    )

  }

}

Test.defaultProps={

    name:"moren"

}

• ComponentWillMount：在render函数调用之前进行调用；

• Render：并不做实际的渲染动作，只返回一个jsx描述结构，最后渲染与否由react来决定；必须是个纯函数，不能设计到数据的更变（this.setState）；

render(){

    return (

      <ul>

        <li><ClickCount name="third" num={7}></ClickCount></li>

      </ul>

    )

  }

• ComponentDidMount ：在render函数调用之后进行调用；但不是在render函数调用之后立即调用，而是当所有的dom树挂载并渲染完成后才会调用，这是因为render函数并不进行渲染，而只是返回一个jsx对象，渲染的工作由react库进行，只有当所有的组件的jsx对象组合完毕之后，react通过对比后才会渲染，所有此钩子函数是发生的所有组件的render函数都执行后才会执行；（只能在浏览器端触发）

注：与angular中的link或者post函数有点相似，但是这里不仅指子组件，而是当前组件中的所有组件，包括兄弟组件；提供了dom操作的接口

• 更新过程：

• ComponentWillReceiveProps:传入的props的改变或者组件进行刷新（forceUpdate函数触发组件的刷新）都会触发此函数，但是通过this.setState改变的数据则不会触发此函数，

• ShouldComponentUpdate：react组件的钩子函数两个需要有返回值的钩子函数之一，另一个为render，此钩子函数的返回值为一个bolen值，如果为true时，则prop的改变以及state的改变都会引起组件的刷新，如果为false时，则不再进行渲染；此钩子函数接受两个参数，一个是nextProps，一个是nextState，可以将将要更新的值和此时的做对比，然后返回true和false来进行性能的校优；

• ComponentWillUpdate：跟componentWillMount相似

• Render

• ComponentDidUpdate：跟componentDidMount相似

• 卸载过程：

ComponentWillUnmount:此钩子函数可以在组件卸载前执行，可以进行手动添加dom元素的删除，以及计时器和事件监听的移除；

• React组件的数据

组件内部数据类型：

两种数据结构，prop和state，这两种数据的改变都会引起组件的重新渲染；

• Prop：组件的外部接口，接受外部数据；跟html的属性的书写类似，但是除了接受字符串之外，还可以接受js对象，数字等的；如果组件进行数据反馈给外界，可以通过prop传入组件一个函数；

• Prop的读取：

由class类的constructor函数接受，以及super（）方法调用时的传入；

最后的props为一个对象，键值分别为传入时的属性名；这里比较方便的是使用es6的解构赋值；

• PropTypes的检查：

可以通过增加类的propTypes属性来定义prop规格，在constructor函数中进行如下定义：

Index.propTypes={     //组件全局进行配置

caption:PropTypes.string.isRequired,

initValue:PropTypes.number

}

注意：此属性不会影响组件的渲染，只是做到在开发过程中辅助开发；

• State：由于组件不能改变出入的prop，所以当组件要进行自己的状态纪录时就需要用到state；

• 初始化：state的初始化可以在constructor中，通过this.state进行设置，值必须为一个js对象的格式，通常将prop传入的外部值赋给state，以便后续操作；设置默认值时，可以用 | | 操作符进行；

• 读取和更新state

更新使用this.setState({count:this.state.count++})方法；

读取为：this.state.count这种方式

• Prop和state的对比：

Prop：定义外部接口；赋值在外部环境使用组件时；组件内部不能更改

State:纪录内部状态；赋值在组件内部；在组件内部可以进行更改；

• react中css的样式书写

• 全局引入css文件

此种方式会将css文件在全局引入，也就是说当前样式文件中书写的所有样式，在任何一个组件都可以引用，此种引用方式有可能会造成全局的污染，变量名冲突，又或者说不符合组件式开发的思想；此种方式一般是引入全局的css文件；

import “app.css”

• 局部作用域（css modules的方式）

此种方式采用的是css modules的做法，通过此做法，最后会将css文件中类名和dom中类名形成唯一的hash值，这样就不会造成类名的冲突了，使用场景，一般为组件内部的样式防止全局书写造成的类名污染；

比如如下写法：

app.css:

.title {

  color: red;

}

jsx:

import style from './App.css';

export default () => {

  return (

    <h1 className={style.title}>

      Hello World

    </h1>

  );

};

最后会编译成如下代码：

<h1 class="_3zyde4l1yATCOkgn-DBWEL">

  Hello World

</h1>

._3zyde4l1yATCOkgn-DBWEL {

  color: red;

}

注：在css Modules中还提供了一种css全局作用域的书写方式，也就是说如果通过此种方式注册的css类名不会被替换为hash值，书写方式如下：

css：

:global(.title){

color:red;

}

• 行内样式：

在jsx的dom上直接使用style属性进行样式的设置，样式的值为一个对象，这种方式的书写，可以支持css样式以js对象的方式进行书写，如果不想将组件的内部样式进行作用域隔离使用css modules的方式进行书写，则可以此种方式进行书写，可以直接在render函数中定义样式对象，也可以通过专门外部样式js文件配置样式对象，然后引入到dom进行使用，书写方式如下：

var style={

color:red;

}

<div style={style}>天气真好</div>

注：在书写css属性时，一定要采用驼峰式写法；

• 事件处理

• react中的事件绑定属性采用的是驼峰式写法：

<button onClick={this.clickfn}>点击</button>

• 处理react使用class类定义方法时，无法自动绑定this的弊端：

• 在constructor中使用bind为事件函数绑定this

this.clickfn=this.clickfn.bind(this)

• 在dom中调用函数时，先使用箭头函数绑定this，箭头函数的this是在定义时形成的

<button onClick={()=>this.clickfn()}>点击</button>

• jsx的onClick和html的onclick不同之处

• html的onclick弊端：

注册的事件处理函数都是全局环境，污染了全局环境；

使用onclick的dom元素，如果在dom树中删除时，必须手动的注销事件处理器，否则会造成内容泄露；

• jsx的onClick:

挂载的每一个函数都是在组件内部，而不是全局；

无论多少个onClick都是采用的事件委托的方式，在dom树顶层添加一个事件监听函数，此函数会根据具体组件分配具体的函数；

• 条件判断：

在react的jsx语法中，如果遇到js语句使用{}进行包裹；

• if语句的使用：

render() {

        var element=null

            if(this.state.stateT){

                   element= <div > stateT为true时 < /div>

                }else{

                     element= <div > stateT为false时 < /div>

                }

        return (

            <div>

                <button onClick={this.changeFn}>切换</button>

                {element}

            </div>

        )

    }

• jsx与运算符&&的结合：

render(){

        return (

             <div>

                <button onClick={this.changeFn}>切换</button>

                {this.state.stateT&& <div > stateT为false时 < /div>}

            </div>

        )

    }

• 三目运算符

render(){

        return (

             <div>

                <button onClick={this.changeFn}>切换</button>

                {this.state.stateT?<div>stateT为true时</div>:<div> stateT为false时</div>}

            </div>

        )

}

• 在jsx语法中，render可以返回null，表示不进行任何dom的渲染，但是钩子函数会执行；

• 列表和keys

• 基础用法：（key一般采用数据id，或者数据在数组中的索引）

render() {

        var element=this.state.list.map((i,index)=><li key={index}>{i}</li>)

        return (

            <div>

                <button onClick={this.changeFn}>切换</button>

                {element}

            </div>

        )

}

注：如果后续进行数据的重新排序，则最好不要使用索引当作key值，否则，由于key值和dom的内容同时改变，则会引起全部dom节点的重绘；如果使用的是id，则只会调整dom节点的顺序，不会引起重绘dom树；（可以用上面例子演示，推荐使用id作为标识，而不是index）

• key值只需要在兄弟元素之间唯一就可以，不需要是在全局唯一的

render() {

        var element=this.state.list.map((i,index)=><li key={i}>{i}</li>)

        var element2=this.state.list.map((i,index)=><li key={i}>{i+1}</li>)

        return (

            <div>

                <button onClick={this.changeFn}>切换</button>

                {element}

                {element2}

            </div>

        )

     }

• 在jsx中使用map进行遍历

render() {

        return (

            <ul>

                <button onClick={this.changeFn}>切换</button>

               {this.state.list.map((i)=><li key={i}>{i}</li>)}

            </ul>

        )

    }

• 表单

在vue中，我们知道由于vue的mvvm架构，v与m之间是响应式的，可以实时同步，但是在react中不存在数据的双向数据绑定，只是负责view层的渲染，所以我们在react中取表单中的值时需要一定的方式

• 受控组件（采用react的单向数据流方式实现vue一样的双向数据绑定）

changeFn(event){

        this.setState({

            name:event.target.value

        })

    }

    render() {

        return (

            <div>

                <p>表单</p>

                <label htmlFor="name">name:</label>

                <input type="text" id="name" value={this.state.name} onChange={this.changeFn}/>

                <p>{this.state.name}</p>

            </div>

        )

    }

如果想对从input中获取到的值进行格式化时，则如下操作就可以实现：

this.setState({

            name:event.target.value.toUpperCase()

        })

• textarea标签在react中设置和读取值都采用value的方式

• 在react中的使用select，并实时获取其选择的值：

render() {

        return (

            <div>

                <p>表单</p>

                <label htmlFor="name">name:</label>

                <select value={this.state.name} onChange={this.changeFn}>

                    <option value="one">one</option>

                    <option value="two">two</option>

                    <option value="three">three</option>

                </select>

                <p>{this.state.name}</p>

            </div>

        )

}

• 在react中实现多表单元素值得获取

changeFnAll(event){

        let target=event.target

        let name=target.name

        let value=target.type==="checkbox"?target.checked:target.value

        this.setState({

            [name]:value

        })

    }

    // 实现多表单元素值的获取

    render() {

        return (

            <div>

                <p>表单</p>    

                <input type="checkbox" value={this.state.checkbox} onChange={this.changeFnAll} name="checkbox"/>

                <input type="text" value={this.state.text} onChange={this.changeFnAll}  name="text"/>

                <p>{this.state.checkbox.toString()}</p>

                <p>{this.state.text}</p>

            </div>

        )

    }

• 组件间通讯

• 父组件向子组件传递数据：

• 字符串常量的传递：

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

• 没有给属性传值，它默认为 true

<MyTextBox autocomplete />

不建议如下写法，容易与es6的对象简洁表示法冲突

<MyTextBox autocomplete={true} />

• 使用扩展运算符进行属性的设置

  const props = {firstName: 'Ben', lastName: 'Hector'};

<Greeting {...props} />;

• 子组件向父组件传递数据

只能通过将父组件的一个方法用prop的方式传入子组件，在子组件触发更变时，调用这个传入的方法，然后把子组件更变后的值以参数的形式传入父组件；从而达到父组件和子组件的通信的效果；

• 兄弟组件间的通讯

• 状态提升

对于没有直接关联关系的两个节点，就如 Child_1 与 Child_2 之间的关系，他们唯一的关联点，就是拥有相同的父组件。参考之前介绍的两种关系的通讯方式，如果我们向由 Child_1 向 Child_2 进行通讯，我们可以先通过 Child_1 向 Parent 组件进行通讯，再由 Parent 向 Child_2 组件进行通讯

• 观察者模式

也就是像angular和vue的事件派发机制，在这里react没有内置的事件派发模式，所以需要手动封装一个事件派发机制；

如下代码：

var watchObj = {

    arrFn: {},

    on(name, fn) {

        if (this.arrFn[name] === undefined) {

            this.arrFn[name] = []

        }

        this.arrFn[name].push(fn)

    },

    emit() {

        let name, args;

        if (arguments.length == 0) {

            return false;

        }

        name = arguments[0]

        args = [].concat(Array.prototype.slice.call(arguments, 1));

        if (this.arrFn[name] !== undefined && this.arrFn[name].length > 0) {

            this.arrFn[name].forEach(function(i) {

                i(...args)

            }, this);

        }

    }

}

export default watchObj

• 组合与继承

在vue中的有一种组件特性叫内容分发，可以在父组件中自定义子组件的dom结构，在react中也提供了这么一种机制

• 包含关系：(在子组件通过this.props.children获取父组件中写在子组件开闭标签间的dom节点)

父组件：

render() {

        return (

            <div>

               <Children>

                <p>相当于vue的内容分发</p>

               </Children>

            </div>

        )

    }

子组件：

render() {

        return (

            <div>

                <p>这里是子组件</p>

               {this.props.children}

            </div>

        )

    }

• 子组件中动态渲染其他组件：(在父组件中将其他组件动态绑定到prop属性上，在子组件中通过相应的属性来获取)

父组件：

render() {

        return (

         var one= <span>这里为true</span>

        var two=<span>这里为false</span>

        return (

            <div>

                <Slot one={one} two={two}></Slot>

            </div>

        )

        )

    }

子组件：

render() {

       return <div>   

      <p>  这里是子组件</p>

        {this.state.state?this.props.one:this.props.two}

    </div>

}

• react-router

 2.0 完全向后兼容 1.0，所有在 1.0 被弃用的 API 都会在控制台以 warn 的形式打印出来，在 3.0 中将会完全移除 1.0 所弃用的东西，现在最新版本是4.2.0版本；但是4.0版本后，有很多方法不再向前兼容（这里讲解的为2.8.1版本）

• 基本用法：

• 首先我们需要导入一些组件...

import { Router, Route, Link } from 'react-router'

• 配置路由信息：

• 使用jsx语法

React.render((

  <Router>

    <Route path="/" component={App}>

      <Route path="about" component={About} />

      <Route path="inbox" component={Inbox} />

    </Route>

  </Router>

), document.body)

• 使用js对象进行配置

const routes = {

  path: '/',

  component: App,

  childRoutes: [

    { path: 'about', component: About },

    { path: 'inbox', component: Inbox },

  ]

}

React.render(<Router routes={routes} />, document.body)

• 获取参数

• 通过动态路由片段

<Route path="messages/:id" component={Message} />

 可以通过如下方式进行获取id：

this.props.params.id

• 通过query字符串

/foo?bar=baz；

this.props.location.query.bar

• 路由的配置规则（Router）

• 路径语法：

• :paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数

• () – 在它内部的内容被认为是可选的

• * – 匹配任意字符（非贪婪的）直到命中下一个字符或者整个 URL 的末尾，并创建一个 splat 参数

如下解释：

// 匹配 /hello/michael 和 /hello/ryan

<Route path="/hello/:name">         

// 匹配 /hello, /hello/michael 和 /hello/ryan

<Route path="/hello(/:name)">   

// 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg  

<Route path="/files/*.*">          

• 常用路由类型：

browserHistory：react推荐使用（采用的是html5的浏览器路由纪录）

hashHistory：默认的（采用的是hash的浏览器路由纪录）

createMemoryHistory

使用browserHistory如下：

import { browserHistory } from 'react-router'

<Router history={browserHistory}>

• 路由的跳转配置（Link）：

需要动态的引入组件：

import { Link} from “react-router“

<Link></Link>

属性：

to: 值为字符串，例:”/list” (路由跳转的路径)；

query:值为对象，例：{name:1} (这里相当于/list?name=1,这种路由的书写方式)；

state：值为对象，可以通过this.location.state获取到当前的值；

activeClassName：当某个 route 是激活状态时，<Link> 可以接收传入的 className。失活状态下是默认的 class。写法如下：activeClassName="current"

activeStyle：当某个 route 是激活状态时，可以将样式添加到链接元素上；写法如下：activeStyle={{color: 'red'}}

onClick(e)：自定义点击事件的处理方法。如处理 <a> 标签一样 - 调用 e.preventDefault() 来防止过度的点击，同时 e.stopPropagation() 可以阻止冒泡的事件

• 默认路由的设置：

jsx:

<IndexRoute component={ Index }/>

js对象：

const routes = {

  path: '/',

  component: App,

  indexRoute:{

    component:Index

  },

  childRoutes: [

    { path: 'list', component: List },

  ]

}

在嵌套路由中使用{this.props.children}来渲染动态路由，这里相当于vue-router中的router-view

• 路由对应组件的渲染

• 单一组件的渲染：（this.props.children）

路由：

            <Route path='center' component={Center}>

                <Route path="left" component={Left}></Route>

            </Route>

组件：（Center）

render(){

        return (

          <div>

            <p>这里是中心也</p>

            {this.props.children}

          </div>

        )

   }

• 多组件的渲染

路由：

            <Route path='center' component={Center}>

               <Route path="left" components={{left:Left,right:Right}}></Route>

            </Route>

组件：

render(){

const { left, right } = this.props

        return (

          <div>

            <p>这里是中心也</p>

            {left}-{right}

          </div>

        )

   }

• 异步组件（组件的懒加载）

• 单组件路由的定义：（getComponent()方法使用）

注：这里采用的是webpack的require.ensure()进行的组件懒加载，接受三个参数，第一个参数为加载当前模块时的依赖，第二个参数为加载的当前的模块的回掉函数，第三个参数为加载完毕后模块的名称；

这里的getComponent函数第一个参数为当前路由的信息，第二个参数为一个回调函数，这里的回掉函数遵循node.js的回掉函数风格(回调函数的第一个参数为错误的捕捉，一般无错误，所以一般默认填入null，第二个参数为异步装载成功的组件；)

<Route path="list" getComponent={(location, cb) => {

            require.ensure([],(require)=>{

               cb(null, require('./components/routerPage/list.jsx').default)

            },'List')

          }} />

• 多组件路由的定义：（getComponents方法）

<Route path="center" getComponents={(location, cb) => {

            require.ensure([],function(require){

               cb(null, {center:require('./components/routerPage/center.jsx').default,list:require('./components/routerPage/center.jsx').default})

            },'Center')

• 用js对象的方式配置路由组件的懒加载

const routes = {

  path: '/',

  getComponent(nextState, cb) {

    require.ensure([], (require) => {

      cb(null, require('./components/app.jsx').default)

    }, 'App')

  },

  indexRoute:{

    getComponent(nextState, cb) {

      require.ensure([], (require) => {

        cb(null, require('./components/index.jsx').default)

      }, 'Index')

    },

  },

  childRoutes: [

    // require("./routes/listR.js").default

     {

        path: 'list',

        getComponent(nextState, cb) {

            require.ensure([], (require) => {

                cb(null, require('./components/routerPage/list.jsx').default)

            }, 'List')

        }

    }

  ]

}

• Route的钩子函数：（Route组件上书写）

onEnter(nextState, replaceState, callback?)

当 route 即将进入时调用。它提供了下一个路由的 state，一个函数重定向到另一个路径。this 会触发钩子去创建 route 实例。

当 callback 作为函数的第三个参数传入时，这个钩子将是异步执行的，并且跳转会阻塞直到 callback 被调用。

onLeave()

当 route 即将离开时调用

• 路由注入到组件的props上的属性和参数：

• history：路由的前端历史纪录和路由跳转方法

go():

goBack():

goForward():

push():

replace()

• location:当前路由的参数信息

state:通过在link上的state属性设置的对象值

action:当前路由的纪录形式

pathname：当前hash路由

query：通过路由的传参，路径？后的路径，或者是query属性传递的

• params：通过动态路由传递的值

• routeParams:（小心有坑）

this.props.params 是直接在组件中指定 route 的一个子集。例如，如果 route 的路径是 users/:userId 而 URL 是 /users/123/portfolios/345，那么 this.props.routeParams 会是 {userId: '123'}，并且 this.props.params 会是 {userId: '123', portfolioId: 345}。

• route:当前路由的配置信息

• routes:当前路由所包含的所有路由片段

• 在路由跳转前阻止路由的跳转：

在组件内部如下引入：

import { withRouter } from 'react-router'

组件抛出时：

export default withRouter(List)

组件回调函数的注册：

componentDidMount(){

         this.props.router.setRouteLeaveHook(

             this.props.route,

             this.routerWillLeave)

    }

    routerWillLeave(nextLocation) {

      // 返回 false 会继续停留当前页面，

      // 否则，返回一个字符串，会显示给用户，让其自己决定

        return '确认要离开？';

    }

• 数据的请求

在constructor和componentDidUpdate中（在进入路由或者进入路由的相应组件内部进行数据请求）；

withRouter进入目标路由或组件前，进行数据的请求；

• PropTypes类型检查

在react的15.5版本后，React.PropTypes已经废弃了，需要单独引入prop-types库进行验证

import PropTypes from 'prop-types'

class Children extends Component {

    constructor(props) {

        super(props)

    }

   render() {

        return (

            <div>

                <p>这里是子组件</p>

               {this.props.name}

            </div>

        )

    }

}

Children.propTypes={

    name:PropTypes.string

}

prop-types库可以校验的类型如下：

import PropTypes from 'prop-types';

MyComponent.propTypes = {

  // 你可以将属性声明为以下 JS 原生类型

  optionalArray: PropTypes.array,

  optionalBool: PropTypes.bool,

  optionalFunc: PropTypes.func,

  optionalNumber: PropTypes.number,

  optionalObject: PropTypes.object,

  optionalString: PropTypes.string,

  optionalSymbol: PropTypes.symbol,

  // 任何可被渲染的元素（包括数字、字符串、子元素或数组）。

  optionalNode: PropTypes.node,

  // 一个 React 元素

  optionalElement: PropTypes.element,

  // 你也可以声明属性为某个类的实例，这里使用 JS 的

  // instanceof 操作符实现。

  optionalMessage: PropTypes.instanceOf(Message),

  // 你也可以限制你的属性值是某个特定值之一

  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 限制它为列举类型之一的对象

  optionalUnion: PropTypes.oneOfType([

    PropTypes.string,

    PropTypes.number,

    PropTypes.instanceOf(Message)

  ]),

  // 一个指定元素类型的数组

  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 一个指定类型的对象

  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 一个指定属性及其类型的对象

  optionalObjectWithShape: PropTypes.shape({

    color: PropTypes.string,

    fontSize: PropTypes.number

  }),

  // 你也可以在任何 PropTypes 属性后面加上 `isRequired`

  // 后缀，这样如果这个属性父组件没有提供时，会打印警告信息

  requiredFunc: PropTypes.func.isRequired,

  // 任意类型的数据

  requiredAny: PropTypes.any.isRequired,

  // 你也可以指定一个自定义验证器。它应该在验证失败时返回

  // 一个 Error 对象而不是 `console.warn` 或抛出异常。

  // 不过在 `oneOfType` 中它不起作用。

  customProp: function(props, propName, componentName) {

    if (!/matchme/.test(props[propName])) {

      return new Error(

        'Invalid prop `' + propName + '` supplied to' +

        ' `' + componentName + '`. Validation failed.'

      );

    }

  },

  // 不过你可以提供一个自定义的 `arrayOf` 或 `objectOf`

  // 验证器，它应该在验证失败时返回一个 Error 对象。 它被用

  // 于验证数组或对象的每个值。验证器前两个参数的第一个是数组

  // 或对象本身，第二个是它们对应的键。

  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {

    if (!/matchme/.test(propValue[key])) {

      return new Error(

        'Invalid prop `' + propFullName + '` supplied to' +

        ' `' + componentName + '`. Validation failed.'

      );

    }

  })

};