这里写目录标题

一级目录

二级目录

三级目录

1. React基础

0. React是什么？

React是一个声明式、高效且灵活的用于构建用户界面的JavaScript库。

React是Facebook开发的一款JS库，FaceBook认为MVC无法满足他们的扩展需求。

特点：

不使用模板
react不是一个MVVM框架
响应式编程
轻量级的JS库
单向数据流。没有实现数据的双向绑定。数据 --》视图–》事件 --》数据

原理：

虚拟DOM -->React把dom抽象成一个JS对象，通过这个JS对象来操作
- 虚拟DOM只对界面上真正发生变化的部分进行实际的DOM操作。
- 逐层次的来进行节点比较 --> 对同一层节点的所有子节点进行比较。
diff算法：保证页面更新的时候，第一时间更新虚拟DOM

React开发环境：

react.js 核心文件
react-dom.js 渲染页面中的DOM，当前文件依赖于react核心组件
babel.js ES6转换成ES5， JSX语法转换成JavaScript 现今浏览器进行代码的兼容

下载：

react核心包 npm i react --save
react-dom npm i react-dom --save
babel npm i babel-standalone --save

0.1JSX语法：

JSX语法=JavaScript + xml,扩展了JavaScript
优点：
- 执行效率更快，编译为JavaScript代码时进行优化
- 它是类型安全的，编译过程中就能及时的发现错误
- 在使用JSX的时候编写模板会更加简单快速（不要和VUE比）。

注意：

JSX必须要有根节点
正常的普通HTML元素要小写。如果是大写，默认认为是组件。

JSX表达式：{}，这里面可以嵌套HTML标签

由HTML元素构成
中间如果需要插入变量用{}
{}中间可以使用表达式
{}中间表达式可以使用JSX对象。
属性和html内容都是用{}来插入内容

1. React组件

let h1 = <h1>Hello, World!!!!!!</h1>;

使用JSX的写法，可以创建JS元素对象。但是其只能有一个父节点。

例如，这下面是错误的写法。

let h1 = <h1>Hello, World!!!!!!</h1><span>hhhhhh</span>;

1.0. 从外部传入数据

在index.js中我们为App标签添加属性name

ReactDOM.render(<App name="当前点击次数"/>, document.getElementById('root'));

然后修改App.js中的render函数

<span>{this.props.name}</span>

一个组件接收一些参数，我们把这些参数叫做props，然后通过render方法返回需要展示在屏幕上的视图的层次结构。

在JSX中可以任意使用JavaScript表达式，只需要用一个大括号把表达式扩起来。每一个React元素事实上是一个JavaScript对象，所以在我们的程序中可以把它保存在变量中或者作为参数传递。

每个组件都是封装好的，并且可以单独运行，这样我们就可以通过组合简单的组件来构建复杂的UI界面。

1.1. React函数式组件

//1. index.html中
<div id="time"></div>

//2. 在index.js中编写如下代码
function Clock(props) {
    return (
        <div>
            <h1>现在的时间是：{props.date.toLocaleString()}</h1>
        </div>
    )
}

function run() {
    ReactDOM.render(<Clock date={new Date()}/>,
        document.getElementById('time'));
}

//每一秒调用一次run()方法
setInterval(run, 1000);

1.2. 类组件定义（React.Component）

React.Component是react的一个抽象基类，单独引用它毫无意义，我们通常用其来实现子类，实现子类的时候必须要实现其render函数。

render函数的使用是返回组件的内容，而渲染的过程是由react框架来完成的，在return()中只能有一个顶级的标签元素

组件中的数据来源有两种，内部声明和外部传入，分别用state和prop进行区别和表示，在es6组件中，可以通过constructor构造函数中接收外部传来的prop和声明内部使用的状态数据。

//1.index.js中引入App，然后使用JSX语法渲染
import ReactDOM from 'react-dom';
import App from './App';
let app = <App name="当前点击次数"/>;
ReactDOM.render(app, document.getElementById('root'));

//2. 自定义App类组件
import React from 'react';
import './App.css';
import 'element-theme-default';
import { Button } from 'element-react';

class App extends React.Component {
    //通过constructor构造函数中接收外部传来的prop和声明内部使用的状态数据
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }

    increment = () => {
        this.setState({count:this.state.count + 1})
    }

    decrement = () => {
        this.setState({count:this.state.count - 1})
    }

    render() {

        return (
            <div className={"box"}>
                
                <Button type='primary' onClick={this.increment}>+</Button>
                <Button type='primary' onClick={this.decrement}>-</Button>
                <span>{this.props.name}</span>
                <span>{this.state.count}</span>
            </div>
        )
    }
}

export default App

1.3 React组件总结

函数式组件与类组件的区别和使用

函数式组件比较简单，一般用于静态没有交互事件内容的组件页面。
类组件，一般又称为动态组件，一般会有交互或者数据修改的操作。

复合组件：里面既可以有函数式组件又可以有类组件。

2. 设置CSS样式的三种方法

2.1. 定义一个CSS文件然后引入

//1. 生命CSS样式文件
.box{
  margin-left: 50px;
  margin-top: 50px;
}
.box *{
  margin:auto 5px;
}

//2. 在App.js中引入
import './App.css';

//3. 给div组件设置className
<div className={"box"}>
</div>

2.2. 直接在render()方法中定义CSS风格

const 修饰类的成员变量，表示成员常量，不能被修改。

render(){

    //设计CSS风格，方法二，
    const style={
        marginLeft:'50px',
        marginTop:'50px'
    }
    const item = {
        margin:'auto 5px'
    }

  return (
      <div className={"box"} style={style}>
        <button style={item}>+</button>
          <br/>
        <button style={item}>-</button>
        <span style={item}>当前点击次数</span>
        <span style={item}>{this.state.count}</span>
      </div>
  )
}

2.3. 直接使用HTML对象声明样式，但是要使用camelCase驼峰式命名法。

render(){
return (

        <div style={{marginLeft:'50px',marginTop:'50px'}}>
            <button style={{margin:'auto 5px'}}>+</button>
            <button style={{margin:'auto 5px'}}>-</button>
            <span style={{margin:'auto 5px'}}>当前点击次数</span>
            <span style={{margin:'auto 5px'}}>{this.state.count}</span>
        </div>

)
}

注：style属性中的内容使用了两层大括号，其中外层的大括号是React表达式，内层的大括号是JavaScript对象

3. React渲染

3.1. React列表渲染

将列表内容拼装成数组放置到模板中，将数据拼装成数组的JSX对象。

使用数组的map方法，对每一项数据按照JSX的形式进行加工，最终得到1个每一项都是JSX对象的数组，然后再将数组渲染到模板中。

0）最简单的for循环形式

constructor(props) {
        super(props);
        this.state = {
            triggerTypeArray: ["原始文件触发", "定向业务触发", "流转工具触发", "研报图标识别", "处理机生成", "第三方工具触发"]
        }
    }
//for循环
        let listTriggerType=[];
        for(let i= 0; i < this.state.triggerTypeArray.length; i ++){
            let item = (
                <Option value={this.state.triggerTypeArray[i]}>{this.state.triggerTypeArray[i]}</Option>
            )
            listTriggerType.push(item);
        }

key值需要放置到每一项中。

1）静态使用

class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {
                    title: "第一节 X",
                    content: "事件内容"
                },
                {
                    title: "第二节 XXX",
                    content: "数据传递内容"
                }
            ]
        }
    }

    render() {
        //for循环，输出列表
        let listArr = this.state.list.map((item, index) =>{
            return (
                <li key={index}>
                    <h3>{index} : {item.title}</h3>
                    <p>{item.content}</p>
                </li>
            )
        })
        return (
            <div>
                {listArr}
            </div>
        )
    }
}

ReactDOM.render(<Welcome></Welcome>, document.getElementById("root"));

2）动态使用，封装list组件

//封装的一个ListItem类插件
class ListItem extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            //关键点击事件，传递多个参数需要使用事件传递函数
            <li onClick={(event)=>{this.click(
                this.props.index+1, this.props.data.title, event)}}>
                <h3>{this.props.index+1} : {this.props.data.title}</h3>
                <p>{this.props.data.content}</p>
            </li>
        )
    }
    click = (index, title,event) =>{
        alert(index + "/ "+ title)
    }
}

class Welcome extends React.Component {
    //通过constructor构造函数中接收外部传来的prop和声明内部使用的状态数据
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {
                    title: "第一节 X",
                    content: "事件内容"
                },
                {
                    title: "第二节 XXX",
                    content: "数据传递内容"
                },
                {
                    title: "第三节 XXX",
                    content: "条件渲染内容"
                },
            ]
        }
    }

    render() {
        //for循环，输出列表
        let listArr = this.state.list.map((item, index) =>{
            return (
                //必须要绑定一个唯一key,否则会报错
               <ListItem key={index} data={item} index={index}></ListItem>
            )
        })
        return (
            <div>
                <ul>
                {listArr}
                </ul>
            </div>
        )
    }
}

ReactDOM.render(<Welcome></Welcome>, document.getElementById("root"));

4. React生命周期和 State

State相当于Vue的data，但是使用方式不一致。尽量将需要改变的变量都放到state中

通过this.setState方法修改完数据后，并不会立即修改DOM里面的内容，React会在这个函数内容所有设置状态

改变后，统一对比虚拟DOM对象，然后再进行统一修改，全量修改提升性能。VUE是增量修改。

class App extends React.Component {
    //通过constructor构造函数中接收外部传来的prop和声明内部使用的状态数据
    constructor(props) {
        super(props);
        //相当于Vue的Data,想要改变state必须要使用setState()方法
        this.state = {
            count: 0
        }
    }

    increment = () => {
        this.setState({count:this.state.count + 1})
    }

    render() {
        return (
            <div className={"box"}>
                <Button type='primary' onClick={this.increment}>+</Button>
                <span>{this.state.count}</span>
            </div>
        )
    }
}
export default App

4.1 生命周期的三个状态：

Mounting：将组件插入到DOM中

Updating：将数据更新到DOM中

Unmounting：将组件移出DOM

4.2. 生命周期中的钩子函数（方法，事件）

ComponentWillMount：组件将要渲染

*ComponentDidMount：组件渲染完毕

ComponentWillReceiveProps：组件将要接受Props数据

*ShouldComponentUpdate：在组件接收到新的state或者props时，判断是否要更新，返回布尔值

CompontWillUpdate：组件将要更新

*ComponentDidUpdate：组件已经更新

*ComponentWillUnmount：组件将要卸载

4.3. 点击事件

react中的点击事件为onClick，与html中的onclick有一些区别

事件函数绑定this：修改state中的数据，要调用setState函数来进行设置。
定义普通的的函数来处理事件，需要在构造函数中与this进行绑定，否则在函数内部，this为undefined

import React from 'react';
import './App.css';

class App extends React.Component{
  //通过constructor构造函数中接收外部传来的prop和声明内部使用的状态数据
  constructor(props){
    super(props);
    this.state = {
      count:0
    }
      //通过bind绑定this比较繁琐，如果函数个数很多会导致代码冗余。
    /** this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this); */
  }

  /** increment(){
      this.setState({count:this.state.count + 1})
  }

    decrement(){
        this.setState({count:this.state.count - 1})
    } */
    
    increment = () => {
        this.setState({count:this.state.count + 1})
    }
    
    decrement = () => {
        this.setState({count:this.state.count - 1})
    }

  render(){

    return (
        <div className={"box"}>
          <button onClick={this.increment}>+</button>
          <button onClick={this.decrement}>-</button>
          <span>当前点击次数</span>
          <span>{this.state.count}</span>
        </div>
    )
  }
}

export default App

5. React插槽

组件中写入内容，这些内容可以被识别和控制。但是React需要自己开发支持插槽功能。

**原理：**组件中写入的HTML可以传入到props中

组件中的HTML内容直接全部插入

class ParentCom extends React.Component {
    constructor(props) {
        super(props);
        console.log(props)
    }

    render() {
        return (
            <div>
                <h1>组件插槽</h1>
                {this.props.children}
                <ChildCom>
                    <h1 data-position="header">这是放置到头部的内容</h1>
                    <h1 data-position="main">这是放置到主要的内容</h1>
                    <h1 data-position="footer">这是放置到尾部的内容</h1>
                </ChildCom>
            </div>
        )
    }
}

组件中根据HTML内容的不同，插入的位置不同，需要通过一个变量进行判断

class RootCom extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            arr: [1, 2, 3]
        }
    }
    render() {
        return (
            <ParentCom>
                <h2 data-name="a" data_index={this.state.arr[0]}>子组件1</h2>
                <h2 data-name="a">子组件2</h2>
                <h2 data-name="a">子组件3</h2>
            </ParentCom>
        )
    }
}

class ChildCom extends React.Component{
    render() {
        let headerCom,mainCom,footerCom;
        //自己判断插槽的内容
        this.props.children.forEach((item,index) => {
            if(item.props['data-position'] == 'header'){
                headerCom = item;
            } else if(item.props['data-position'] == 'main'){
                mainCom = item;
            } else {
                footerCom = item;
            }
        })

        return (
            <div>
                <div className="header">
                    {headerCom}
                </div>
                <div className="main">
                    {mainCom}
                </div>
                <div className="footer">
                    {footerCom}
                </div>
            </div>
        )
    }
}

//子组件插槽,并且可以在子组件中定义值
ReactDOM.render(<RootCom></RootCom>, document.getElementById("root"))

6. React路由

根据不同的路径，显示不同的组件（内容），React使用的库react-router-dom

6.1 两种路由模式

//hash模式
import {HashRouter as Router,Link,Route} from 'react-router-dom';

//history模式/后端配合使用
import {BrowserRouter as Router,Link,Route} from 'react-router-dom';

6.2. ReactRouter三大组件

Router：所有路由组件的根组件（底层组件），包裹路由规划的最外层容器。

属性：basename->设置此路由的根路径，router可以在一个组件中写多个。

如果要精准匹配，可以在中设置exact属性
Route：路由规则匹配组件，显示当前规则对应的组件。
Link：路由跳转的组件

Link组件可以设置to属性来进行页面的跳转，to属性可以直接写路径的字符串，也可以通过1个对象进行路径的设置

class App extends React.Component{
    render() {
        let myObj = {
            pathname:"/admin/me",//跳转的路径
            search:"?username=admin",//get请求参数
            hash:"#abc",//设置的hash值
            state:{msg:"hello"}//传入组件的数据
        };
        return (
            <div id="app">
                <Router>
                    <Route path="/" exact component={()=>(<div>首页</div>)}></Route>
                    <Route path="/me" component={()=>(<div>me</div>)}></Route>
                    <Route path="/product" component={()=>(<div>Product</div>)}></Route>
                </Router>

                <Router >
                    <div className="nav">
                        {/*路由跳转规则*/}
                        <Link to="/">Home</Link>
                        <Link to="/product">Product</Link>
                        {/*传递一些内容*/}
                        <Link to={myObj}>个人中心</Link>
                    </div>
                    {/*路径匹配组件*/}
                    <Route path="/admin/" exact component={Home}></Route>
                    <Route path="/admin/product" component={Product}></Route>
                    <Route path="/admin/me" component={Me}></Route>
                </Router>
            </div>
        );
    }
}

动态路由（:id）

function News(props){
    return (
        <div>
            <h1>AdminNews</h1>
        //在match.params中获取对应的参数
            <h2>id:{props.match.params.id}</h2>
        </div>
    )
}

<Link to="/admin/param/123321">动态传参</Link>

<Route path="/admin/param/:id" component={News}></Route>

6.3. 重定向组件

访问某个组件时，如果有重定向组件，那么就会修改页面路径，使得页面内容显示为所定向路径的内容。

用例：

function LoginInfo(props) {
    if(props.location.state.loginState === 'success'){
        return <Redirect to="/admin"/>
    } else {
        return <Redirect to="/login"/>
    }
}

6.3.1 案例

import React from 'react';
import {BrowserRouter as Router, Route, Link, Redirect, Switch} from 'react-router-dom';

function LoginInfo(props) {
    if (props.location.state.loginState === 'success') {
        return <Redirect to="/admin"/>
    } else {
        return <Redirect to="/login"/>
    }
}

/*验证表格页面， 使用<Link>标签实现页面跳转*/
let FormCom = () => {
    let pathObj = {
        pathname: "/loginInfo",
        state: {
            loginState: 'false'
        }
    }
    return (
        <div>
            <h1>表单验证</h1>
            <Link to={pathObj}>登录验证后页面</Link>
        </div>
    )
}
    
    class App extends React.Component {
    render() {
        return (
            <div>
                <Router>
                    <Switch>
                        <Route path="/" exact component={(props) =>{console.log(props); return (<div>首页</div>)}}></Route>
                        <Route path="/form" exact component={FormCom}></Route>
                        <Route path="/login" exact component={() => (<div>登录页</div>)}></Route>
                        <Route path="/loginInfo" exact component={LoginInfo}></Route>
                        <Route path="/admin" exact component={() => (<div>后台管理页面</div>)}></Route>
                    </Switch>
                </Router>
            </div>
        );
    }
}

export default App

6.4 Switch组件

让switch组件内容的route只匹配一个，只要匹配到了，剩余的路由规则将不再匹配。

用例：

class App extends React.Component {
    render() {
        return (
            <div>

                <Router>
                    <Switch>
                        <Route path="/" exact component={() => (<div>首页</div>)}></Route>
                        <Route path="/abc" exact component={() => (<div>页面ABC1</div>)}></Route>
                        <Route path="/abc" exact component={() => (<div>页面ABC2</div>)}></Route>
                    </Switch>
                </Router>
            </div>
        );
    }
}

6.5 Button按钮实现跳转

/*Button按钮实现页面跳转*/
class ChildCom extends React.Component {
    render() {
        return (
            <div>
                <button onClick={this.clickEvent}>跳转到首页</button>
            </div>
        )
    }
    clickEvent=()=>{
        console.log(this.props)
        //可以回退
        this.props.history.push("/", {msg:"这是由ChildCom发送给首页的数据"})
        //不能回退
        //this.props.history.replace("/", {msg:"这是由ChildCom发送给首页的数据"})
        //前进
        //this.props.history.go(1)
       // this.props.history.goForward()
        //后退
        //this.props.history.go(-1)
        //this.props.history.goBack()
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <Router>
                        <Route path="/" exact component={(props) =>{console.log(props); return (<div>首页</div>)}}></Route>
                        <Route path="/child" exact component={ChildCom}></Route>
                </Router>
            </div>
        );
    }
}

export default App

7. Redux

解决React数据管理（状态管理），用于中大型，数据比较庞大，组件之间数据交互多的情况下使用。如果你不知道是否需要使用Redux，那么你就不需要用它！

解决组件的数据通信
解决数据和交互较多的应用

Redux只是一种状态管理的解决方案！

7.0 几个概念

Store：数据仓库 --> 保存数据的地方

**State：**是一个对象，数据仓库里的所有数据都放到一个State里。

Action：一个动作，触发数据改变的方法。

Dispatch：将动作触发成方法。

Reducer：是一个函数，通过获取动作，改变数据，生成一个新的State。从而改变页面。

安装Redux

cnpm install redux --save

7.1 Redux操作步骤

1. 初始化数据

// 1. 用于通过动作创建新的state
// reduce有两个作用：第一个初始化数据，第二个通过获取动作，改变数据。
const reducer = function (state={num:0},action) {
    //打印操作的类型和附加参数
    console.log(action)
    switch (action.type) {
        case "add":
            state.num ++;
            break;
        case  "decrement":
            state.num --;
            break;
        default:
            break;
    }
    //相当于对象的copy
    return {...state};
}
// 2. 创建一个数据仓库
const store = createStore(reducer)

2. 获取数据

store.getState()

3. 修改数据(通过动作来修改数据)

// 3.通过仓库的方法dispatch进行修改数据,content为附加参数
store.dispatch({type:"add", content:{id:1, msg:"helloWorld"}})

4. 修改视图（监听数据的变化，重新渲染）

// 5.必须在store.subscribe中渲染
store.subscribe(()=>{
    ReactDOM.render(<Counter/>, document.getElementById("counter"))
})

7.2 使用案例

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Redux,{createStore} from 'redux';

// 4.函数式计数器
const Counter = function(props){
    return (
        <div>
            <h1>计数数量：{store.getState().num}</h1>

            <button onClick={add}>计数+1</button>
            <button onClick={decrement}>计数-1</button>
        </div>
    )
}

// 1. 用于通过动作创建新的state
const reducer = function (state={num:0},action) {
    //打印操作的类型和附加参数
    console.log(action)
    switch (action.type) {
        case "add":
            state.num ++;
            break;
        case  "decrement":
            state.num --;
            break;
        default:
            break;
    }
    //相当于对象的copy
    return {...state};
}

// 2. 创建一个数据仓库
const store = createStore(reducer)

function add(){
    // 3.通过仓库的方法dispatch进行修改数据
    store.dispatch({type:"add", content:{id:1, msg:"helloWorld"}})
    console.log(store.getState())
}

function decrement(){
    // 3.通过仓库的方法dispatch进行修改数据
    store.dispatch({type:"decrement", content:"helloWorld"})
    console.log(store.getState())
}
ReactDOM.render(<Counter/>, document.getElementById("counter"))
// 5.必须在store.subscribe中渲染
store.subscribe(()=>{
    ReactDOM.render(<Counter/>, document.getElementById("root"))
})

8.React-redux

**安装：**cnpm install redux --save

概念：

Provider组件：自动将store里的state和跟组件进行关联。

mapStateProps：这个函数用于将store的state映射到组件里的props。

mapDispatchToProps：将store中的dispatch映射到组件的props里，实现方法的共享。

Connect方法：将组件和数据（包括方法）进行连接。

8.1 使用步骤

初始化数据，实例化store数据仓库

// 1. 用于通过动作创建新的state
function reducer(state={num:0}, action){
    switch ((action.type)) {
        case "add":
            state.num++;
            break;
        default:
         break;
    }
    return {...state};
}
// 2. 创建一个数据仓库
const store = createStore(reducer)

数据获取，数据的修改

将state映射到数组里
将修改数据的方法映射到组件的props中

//将state映射到props函数
function mapStateProps(state){
    return{
        value:state.num
    }
}
//将修改state数据的方法，映射到props，默认会传入store里的dispatch方法
function mapDispatchToProps(dispatch){
    return {
        onAddClick: ()=>{dispatch(addAction)}
    }
}

//将上面的这两个方法，数据仓库的state和修改state的方法映射到组件上，形成新的组件
const App = connect(
    mapStateProps,
    mapDispatchToProps
)(Counter)


class Counter extends React.Component{
    render() {
        //计数，通过store的state传给props，直接通过props就可将state的数据获取
        const  value= this.props.value;
        // 将修改数据的事件或方法传入到props
        const onAddClick = this.props.onAddClick;
        return(
            <div>
                <h1>计数数量：{value}</h1>
                <button onClick={onAddClick}>计数+1</button>
            </div>
        )
    }
}

将store数据仓库中的state和根组件进行关联

ReactDOM.render(
    // 自动将store里的state和根组件进行关联
    <Provider store={store}>
        <App></App>
    </Provider>,
    document.querySelector("#root")
)

8.2 案例代码

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect} from 'react-redux';


class Counter extends React.Component{
    render() {
        console.log(this.props)
        //计数，通过store的state传给props，直接通过props就可将state的数据获取
        const  value= this.props.value;
        // 将修改数据的事件或方法传入到props
        const onAddClick = this.props.onAddClick;
        return(
            <div>
                <h1>计数数量：{value}</h1>
                <button onClick={onAddClick}>计数+1</button>
                <button onClick={this.props.onAddClick5}>计数+5</button>
            </div>
        )
    }
}

// 定义多个方法
let ActionFunctionObj = {
    add:function (state) {
        state.num ++
        return state
    },
    addNum:function (state, action) {
        state.num = state.num + action.num;
        return state;
    }
}

// 1. 用于通过动作创建新的state
function reducer(state={num:0}, action){
    /*switch ((action.type)) {
        case "add":
            state.num++;
            break;
        default:
         break;
    }*/
    // 排除默认的action类型
    if(action.type.indexOf('redux') == -1){
        state = ActionFunctionObj[action.type](state, action)
    }
    return {...state};
}
// 2. 创建一个数据仓库
const store = createStore(reducer)

//将state映射到props函数
function mapStateProps(state){
    return{
        value:state.num
    }
}

const addAction = {
    type: 'add'
}

//将修改state数据的方法，映射到props，默认会传入store里的dispatch方法
function mapDispatchToProps(dispatch){
    return {
        onAddClick: ()=>{dispatch(addAction)},
        onAddClick5: ()=>{dispatch({type:"addNum", num:5})}
    }
}

//将上面的这两个方法，数据仓库的state和修改state的方法映射到组件上，形成新的组件
const App = connect(
    mapStateProps,
    mapDispatchToProps
)(Counter)

ReactDOM.render(
    // 自动将store里的state和根组件进行关联
    <Provider store={store}>
        <App></App>
    </Provider>,
    document.querySelector("#root")
)

9. Ant Design UI框架

**网址：**https://ant.design/index-cn

**安装组件：**npm install antd --save

10. 注意点

React组件之间可以传递变量、函数。

变量的变化会导致父子组件刷新页面。

2. React实践

1. 函数式组件应用

1.1 封装的axios

public.js

import axios from 'axios'

axios.defaults.timeout = 10000
// 请求前拦截
    axios.interceptors.request.use(
        config => {
            return config;
        },
        err => {
            console.log("请求超时");
            return Promise.reject(err);
        }
    );

export default {

    //get请求
    requestGet(url, params = {}) {
        return axios.get(url, params);
    },
    //get请求不带参数
    requestQuickGet(url) {
        return axios.get(url);
    },
    //post请求
    requestPost(url, params = {}) {
        return axios({
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            url: url,
            data: params
        })
    },
    //put请求
    requestPut(url, params = {}) {
        return axios.put(url, params)
    },
    //delete请求
    requestDelete(url, params = {}) {
        return axios.delete(url, params)
    }
}

config.js

import http from './public'

/**
 * 访问的地址
 * @type {string}
 */
const baseUrl = "http://10.200.126.86:8088/v1/config"

/**
 * 新增一个配置信息
 * @param user 新增的用户
 * @param nodeConfigVo 配置信息详情
 */
export const addConfig = (user,nodeConfigVo) => {
    return http.requestPost(baseUrl + "/insert/" + user, nodeConfigVo)
}

/**
 * 根据nodeId获取配置信息详情
 * @param nodeId 节点Id
 */
export const getConfigByNodeId = (nodeId) => {
    return http.requestGet(baseUrl + "/get/" + nodeId)
}

/**
 * 更新配置信息
 * @param user 更新人
 * @param nodeConfigVo 待更新的配置信息
 * @returns {Promise<AxiosResponse<T>>}
 */
export const updateConfig = (user, nodeConfigVo) => {
    return http.requestPost(baseUrl + "/update/" + user, nodeConfigVo)
}

1.2. addConfig.js

import React from 'react';
import "./addConfig.css"
import 'antd/dist/antd.css';
import {Input, Form, Button, Select, message, Row, Col} from 'antd';
import * as configApi from "../base/api/config";

const {Option} = Select;
const {TextArea} = Input;

export const InsertForm = ({user}) => {

    const [nodeConfig] = Form.useForm();
    const yesNo = ["是", "否"]
    const triggerType = ["非定时任务", "定时任务"]


    //打开一个新的页面
    const newPage = () => {
        const w = window.open('about:blank');
        // 要打开的新页面的url
        w.location.href = 'http://10.200.126.86:8088/idtree';
    };

    let checkOrgIdLength = (rule, value, callback) => {
        if (value.length !== 38) {
            return callback(new Error('请输入38个字符！'))
        } else {
            callback()
        }
    }

    let checkAfterDotLength = (rule, value, callback) => {
        if (value.toString().indexOf(".") === -1) {
            callback()
            return;
        } else if (value.toString().split(".")[1].length < 2) {
            callback()
            return;
        } else {
            return callback(new Error('小数点后最多只能有一位'))
        }
    }

    let checkIdFieldLength = (rule, value, callback) => {
        if (value.length === 38) {
            callback()
        } else {
            return callback(new Error('请输入38个字符！'))
        }
    }

    //是否启用选择框
    const yesOrNo = [];
    for (let i = 0; i < yesNo.length; i++) {
        let item = (
            <Option key={i + 1} value={yesNo[i]}>{yesNo[i]}</Option>
        )
        yesOrNo.push(item);
    }

    //是否时定时任务选择框
    const type = [];
    for (let i = 0; i < triggerType.length; i++) {
        let item = (
            <Option key={i + 1} value={triggerType[i]}>{triggerType[i]}</Option>
        )
        type.push(item);
    }

    const handleReset = () => {
        nodeConfig.resetFields();
    }

    let onFinish = () => {
        let nodeConfigData = nodeConfig.getFieldsValue(["orgId", "nodeId", "nodeNames", "showName", "nodeType", "originalFileTypeId", "manHour", "reward", "startTime",
            "pieThreshold", "requireTime", "showTags", "titleRule", "toolConfig", "type", "status"])
        let nodeConfigVo = JSON.stringify(nodeConfigData)
        configApi.addConfig(user, nodeConfigVo).then((res) => {
                if (res.data.success) {
                    message.success("添加成功!")
                } else {
                    if (res.data.msg) {
                        message.error(res.data.msg)
                    } else {
                        message.error('服务器繁忙！')
                    }
                }
            }
        ).catch(error => {
            message.error('服务器异常！')
        })
    }

    return (
        <div style={{height: "100%", width: "100%"}}>
            <div className={"outerBox"}>
                <span><b>添加新业务</b></span>
                <Button style={{backgroundColor: '#FAFAFA', float: 'right', marginRight: '50px'}}
                        onClick={newPage} type="dashed" ghost className="r-button">
                    查询原始文件分类ID/速派业务分类ID</Button>
            </div>

            <div>
                <Form
                    initialValues={{
                        startTime: '0',
                        type: '非定时任务',
                        status: '是'
                    }}
                    form={nodeConfig}
                    name="nodeConfigVo"
                    layout="vertical"
                    onFinish={onFinish}
                >
                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="部门组别" name="orgId" rules={[
                                {required: true, message: '请输入部门组别ID！'},
                                {validator: checkOrgIdLength}
                            ]}>
                                <Input placeholder={"请输入部门组别"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="业务ID" name="nodeId">
                                <Input className={"input"} disabled></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="业务名称" name="nodeNames" rules={[
                                {required: true, message: '请输入业务名称！'}
                            ]}>
                                <Input name="nodeNames" placeholder={"请输入业务名称"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="任务名称" name="showName" rules={[
                                {required: true, message: '请输入任务名称！'}
                            ]}>
                                <Input name="showName" className={"input"} placeholder={"请输入任务名称"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="任务分类ID" name="nodeType" rules={[
                                {required: true, message: '请输入38位的任务分类ID！'},
                                {validator: checkIdFieldLength}
                            ]}>
                                <Input name="nodeType" className={"input"} placeholder={"请输入任务ID"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="原始文件分类ID" name="originalFileTypeId">
                                <Input name="originalFileTypeId" className={"input"} placeholder={"请选择"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="加工时间" name="manHour" rules={[
                                {required: true, message: '请输入整数或小数形式的加工时间！'},
                                {validator: checkAfterDotLength}
                            ]}>
                                <Input name="manHour" type="number" min="0.0" step="0.1" className={"input"}
                                       placeholder={"请输入任务ID"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="A值" name="reward" rules={[
                                {required: true, message: '请输入整数形式的A值！'}
                            ]}>
                                <Input name="reward" type="number" min="0" step="1" className={"input"}
                                       placeholder={"请输入A值"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="业务开始时间" name="startTime">
                                <Input name="startTime" type="number" min="0" step="1" className={"input"}
                                       placeholder={"请输入业务开始时间"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="派单阈值" name="pieThreshold" rules={[
                                {required: true, message: '请输入整数形式的派单阈值！'}
                            ]}>
                                <Input name="pieThreshold" type="number" min="0" step="1" className={"input"}
                                       placeholder={"请输入派单阈值"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="要求完成时间" name="requireTime" rules={[
                                {required: true, message: '请输入要求完成时间！'}
                            ]}>
                                <Input name="requireTime" className={"input"} placeholder={"请输入要求完成时间"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="标签" name="showTags">
                                <Input name="showTags" className={"input"} placeholder={"请输入最多3个标签，中间用英文;隔开"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="标题规则" name="titleRule">
                                <Input name="titleRule" className={"input"} placeholder={"请输入"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="关联工具配置" name="toolConfig">
                                <Input name="toolConfig" className={"input"} placeholder={"请输入关联工具配置"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Row>
                                <Form.Item label="触发方式" name="type" style={{width: "100%"}}>
                                    <Select name="type"
                                            style={{width: "100%", marginTop: "6px"}}>
                                        {type}
                                    </Select>
                                </Form.Item>
                            </Row>
                            <Row style={{width: "100%"}}>
                                <Form.Item label="是否启用" name="status" style={{width: "100%"}}>
                                    <Select name="status"
                                            style={{width: "100%", marginTop: "6px"}}>
                                        {yesOrNo}
                                    </Select>
                                </Form.Item>
                            </Row>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="其他规则" name="anotherRule">
                                <TextArea name="anotherRule" style={{lineHeight: 9}} allowClear className={"input"}
                                          placeholder={"请输入其他规则"}></TextArea>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>
                    <Row type="flex" justify="center" align="middle" style={{width: "100%"}}>
                        <Button style={{
                            marginRight: "8px",
                            backgroundColor: "#373892",
                            borderColor: "#373892",
                        }} size="large" type="primary" htmlType="submit">
                            添加
                        </Button>
                        <Button style={{
                            marginLeft: "8px",
                            backgroundColor: "#FFFFFF",
                            color: "#D9D9D9",
                            borderColor: "#D9D9D9"
                        }} size="large" type="primary" onClick={handleReset}>
                            取消
                        </Button>
                    </Row>
                </Form>
            </div>
        </div>
    );
}

1.3. addConfig.css

.outerBox {
    padding-left: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-bottom: 15px;
    background-color: #FAFAFA;
}
.centerRow {
    padding-left: 50px;
    padding-right: 50px;
    background-color: #FAFAFA;
}

.topRow {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
    background-color: #FAFAFA;
}


.inputArea {
    margin-top: 6px;
    min-height: 20px;
    max-height: 60px;
}

.centerBox {
    width: 100%;
    /*flex 布局*/
    display: flex;
    /*实现水平居中*/
    justify-content: center;
}

1.4. updateConfig.js

import React, {useEffect, useState} from 'react';
import "./addConfig.css"
import 'antd/dist/antd.css';
import {Input, Form, Button, Select, message, Row, Col} from 'antd';
import * as configApi from "../base/api/config";

const {Option} = Select;
const {TextArea} = Input;

export const UpdateForm = ({nodeId, user}) => {

    const [nodeConfig] = Form.useForm();
    const yesNo = ["是", "否"]
    const triggerType = ["非定时任务", "定时任务"]

    // 表单初始化
    configApi.getConfigByNodeId(nodeId).then((res) => {
            if (res.data.success) {
                //给form表单设置初始值
                nodeConfig.setFieldsValue(res.data.data)
            } else {
                if (res.data.msg) {
                    message.error(res.data.msg)
                } else {
                    message.error('服务器繁忙！')
                }
            }
        }
    ).catch(error => {
        message.error('服务器异常！')
    })

    //打开一个新的页面
    const newPage = () => {
        const w = window.open('about:blank');
        // 要打开的新页面的url
        w.location.href = 'http://10.200.126.86:8088/idtree';
    };

    let checkOrgIdLength = (rule, value, callback) => {
        if (value.length !== 38) {
            return callback(new Error('请输入38个字符！'))
        } else {
            callback()
        }
    }

    let checkAfterDotLength = (rule, value, callback) => {
        if (value.toString().indexOf(".") === -1) {
            callback()
            return;
        } else if (value.toString().split(".")[1].length < 2) {
            callback()
            return;
        } else {
            return callback(new Error('小数点后最多只能有一位'))
        }
    }

    let checkIdFieldLength = (rule, value, callback) => {
        if (value.length === 38) {
            callback()
        } else {
            return callback(new Error('请输入38个字符！'))
        }
    }

    //是否启用选择框
    const yesOrNo = [];
    for (let i = 0; i < yesNo.length; i++) {
        let item = (
            <Option key={i + 1} value={yesNo[i]}>{yesNo[i]}</Option>
        )
        yesOrNo.push(item);
    }

    //是否时定时任务选择框
    const type = [];
    for (let i = 0; i < triggerType.length; i++) {
        let item = (
            <Option key={i + 1} value={triggerType[i]}>{triggerType[i]}</Option>
        )
        type.push(item);
    }

    const handleReset = () => {
        nodeConfig.resetFields();
    }

    // 表单提交事件
    let onFinish = () => {
        let nodeConfigData = nodeConfig.getFieldsValue(["orgId", "nodeId", "nodeNames", "showName", "nodeType", "originalFileTypeId", "manHour", "reward", "startTime",
            "pieThreshold", "requireTime", "showTags", "titleRule", "toolConfig", "type", "status"])
        let nodeConfigVo = JSON.stringify(nodeConfigData)
        // 更新配置信息
        configApi.updateConfig(user, nodeConfigVo).then((res) => {
                if (res.data.success) {
                    message.success("更新成功!")
                } else {
                    if (res.data.msg) {
                        message.error(res.data.msg)
                    } else {
                        message.error('服务器繁忙！')
                    }
                }
            }
        ).catch(error => {
            message.error('服务器异常！')
        })
    }

    return (
        <div style={{height: "100%", width: "100%"}}>
            <div className={"outerBox"}>
                <span><b>查看/更新业务详情</b></span>
                <Button style={{backgroundColor: '#FAFAFA', float: 'right', marginRight: '50px'}}
                        onClick={newPage} type="dashed" ghost className="r-button">
                    查询原始文件分类ID/速派业务分类ID</Button>
            </div>

            <div>
                <Form
                    initialValues={{
                        startTime: '0',
                        type: '非定时任务',
                    }}
                    form={nodeConfig}
                    name="nodeConfigVo"
                    layout="vertical"
                    onFinish={onFinish}
                >
                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="部门组别" name="orgId" rules={[
                                {required: true, message: '请输入部门组别ID！'},
                                {validator: checkOrgIdLength}
                            ]}>
                                <Input placeholder={"请输入部门组别"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="业务ID" name="nodeId">
                                <Input className={"input"} disabled></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="业务名称" name="nodeNames" rules={[
                                {required: true, message: '请输入业务名称！'}
                            ]}>
                                <Input name="nodeNames" placeholder={"请输入业务名称"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="任务名称" name="showName" rules={[
                                {required: true, message: '请输入任务名称！'}
                            ]}>
                                <Input name="showName" className={"input"} placeholder={"请输入任务名称"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="任务分类ID" name="nodeType" rules={[
                                {required: true, message: '请输入38位的任务分类ID！'},
                                {validator: checkIdFieldLength}
                            ]}>
                                <Input name="nodeType" className={"input"} placeholder={"请输入任务ID"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="原始文件分类ID" name="originalFileTypeId">
                                <Input name="originalFileTypeId" className={"input"} placeholder={"请选择"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="加工时间" name="manHour" rules={[
                                {required: true, message: '请输入整数或小数形式的加工时间！'},
                                {validator: checkAfterDotLength}
                            ]}>
                                <Input name="manHour" type="number" min="0.0" step="0.1" className={"input"}
                                       placeholder={"请输入任务ID"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="A值" name="reward" rules={[
                                {required: true, message: '请输入整数形式的A值！'}
                            ]}>
                                <Input name="reward" type="number" min="0" step="1" className={"input"}
                                       placeholder={"请输入A值"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="业务开始时间" name="startTime">
                                <Input name="startTime" type="number" min="0" step="1" className={"input"}
                                       placeholder={"请输入业务开始时间"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="派单阈值" name="pieThreshold" rules={[
                                {required: true, message: '请输入整数形式的派单阈值！'}
                            ]}>
                                <Input name="pieThreshold" type="number" min="0" step="1" className={"input"}
                                       placeholder={"请输入派单阈值"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="要求完成时间" name="requireTime" rules={[
                                {required: true, message: '请输入要求完成时间！'}
                            ]}>
                                <Input name="requireTime" className={"input"} placeholder={"请输入要求完成时间"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="标签" name="showTags">
                                <Input name="showTags" className={"input"} placeholder={"请输入最多3个标签，中间用英文;隔开"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Form.Item label="标题规则" name="titleRule">
                                <Input name="titleRule" className={"input"} placeholder={"请输入"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="关联工具配置" name="toolConfig">
                                <Input name="toolConfig" className={"input"} placeholder={"请输入关联工具配置"}></Input>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>

                    <Row style={{width: "100%"}}>
                        <Col offset={2} span={9}>
                            <Row>
                                <Form.Item label="触发方式" name="type" style={{width: "100%"}}>
                                    <Select name="type"
                                            style={{width: "100%", marginTop: "6px"}}>
                                        {type}
                                    </Select>
                                </Form.Item>
                            </Row>
                            <Row style={{width: "100%"}}>
                                <Form.Item label="是否启用" name="status" style={{width: "100%"}}>
                                    <Select name="status"
                                            style={{width: "100%", marginTop: "6px"}}>
                                        {yesOrNo}
                                    </Select>
                                </Form.Item>
                            </Row>
                        </ Col>
                        <Col offset={2} span={9}>
                            <Form.Item label="其他规则" name="anotherRule">
                                <TextArea name="anotherRule" style={{lineHeight: 9}} allowClear className={"input"}
                                          placeholder={"请输入其他规则"}></TextArea>
                            </Form.Item>
                        </ Col>
                        <Col offset={2}></Col>
                    </Row>
                    <Row type="flex" justify="center" align="middle" style={{width: "100%"}}>
                        <Button style={{
                            marginRight: "8px",
                            backgroundColor: "#373892",
                            borderColor: "#373892",
                        }} size="large" type="primary" htmlType="submit">
                            更新
                        </Button>
                        <Button style={{
                            marginLeft: "8px",
                            backgroundColor: "#FFFFFF",
                            color: "#D9D9D9",
                            borderColor: "#D9D9D9"
                        }} size="large" type="primary" onClick={handleReset}>
                            取消
                        </Button>
                    </Row>
                </Form>
            </div>
        </div>
    );

}

2. 路由

import React from 'react';

//history模式/后端配合使用
import {BrowserRouter as Router,Link,Route} from 'react-router-dom';

function Home(){
    return (
        <div>
            <h1>admin首页</h1>
        </div>
    )
}

function Me(props){
    console.log(props);
    return (
        <div>
            <h1>admin个人中心页</h1>
            {/*<Test></Test>*/}
        </div>
    )
}

function Product(){
    return (
        <div>
            <h1>adminProduct</h1>
        </div>
    )
}

//传递参数使用
function News(props){
    return (
        <div>
            <h1>AdminNews</h1>
            <h2>id:{props.match.params.id}</h2>
        </div>
    )
}

class App extends React.Component{
    render() {
        let myObj = {
            pathname:"/admin/me",//跳转的路径
            search:"?username=admin",//get请求参数
            hash:"#abc",//设置的hash值
            state:{msg:"hello"}//传入组件的数据
        };
        return (
            <div id="app">
                <Router>
                    <Route path="/" exact component={()=>(<div>首页</div>)}></Route>
                    <Route path="/me" component={()=>(<div>me</div>)}></Route>
                    <Route path="/product" component={()=>(<div>Product</div>)}></Route>
                </Router>

                <Router >
                    <div className="nav">
                        {/*路由跳转规则*/}
                        <Link to="/admin/">Home</Link>&nbsp;&nbsp;
                        <Link to="/admin/product">Product</Link>&nbsp;&nbsp;
                        {/*传递一些内容*/}
                        <Link to={myObj}>个人中心</Link>&nbsp;&nbsp;
                        <Link to="/admin/param/123321">动态传参</Link>
                    </div>
                    {/*路径匹配组件*/}
                    <Route path="/admin/" exact component={Home}></Route>
                    <Route path="/admin/product" component={Product}></Route>
                    <Route path="/admin/me" component={Me}></Route>
                    <Route path="/admin/param/:id" component={News}></Route>
                </Router>
            </div>
        );
    }
}

export default App

3. Redux-saga

redux-saga

1. 简述

本质上是为了解决异步action的问题。

Redux saga可以理解为一个和系统交互的常驻进程，其中，Saga可以简单定义如下：

Saga = Worker + Watcher

redux-saga是一个用于管理应用程序side effect（副作用，例如异步获取数据，访问浏览器缓存等）的library。

目标：让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。

saga像是应用程序中一个单独的线程，它独自负责处理副作用。
是一个 redux 中间件，意味着这个线程可以通过正常的 redux action 从主应用程序启动，暂停和取消，它能访问完整的 redux state，也可以 dispatch redux action。

redux-thunk --> 回调地狱

优点？

集中处理异步操作
action统一
使用声明式的Effect
提供更加细腻的控制流。

特点？

应用在复杂异步，如长时事务LLT(long live transcation)等业务场景。
方便测试，可以使用takeEvery打印Logger。
提供takeLatest/takeEvery/throttle方法，可以便利的实现对事件的仅关注最近事件、关注每一次、时间限频。
提供cancel/delay方法，可以便利的取消、延迟异步请求。
提供channel机制支持外部事件。

1.1. 一些名词

function --> 生成器函数*

yield语法只能出现在生成器函数中，在生成器函数中遇到yield表达式立即暂停，后续可恢复执行状态。

使用redux-saga时，所有的effect都是通过yield语法传递给effect-runner的，effect-runner处理该effect并决定什么时候恢复生成器。

2. redux-saga的使用技术细节

2.1. 声明式的Effect

声明式的Effect使得redux-saga监听原始js对象形式的action，并且可以方便单元测试。

在redux-saga中提供了一系列的api，比如take、put、all、select等API ，在redux-saga中将这一系列的api都定义为Effect。

这些Effect执行后，当函数resolve时返回一个描述对象，然后redux-saga中间件根据这个描述对象恢复执行generator中的函数。

redux-thunk的大体过程：

action1(side function)—>redux-thunk监听—>执行相应的有副作用的方法—>action2(plain object)

转化到action2是一个原始js对象形式的action，然后执行reducer函数就会更新store中的state。

redux-saga的大体过程：

action1(plain object)——>redux-saga监听—>执行相应的Effect方法——>返回描述对象—>恢复执行异步和副作用函数—>action2(plain object)

redux-saga中监听到了原始js对象action，并不会马上执行副作用操作，会先通过Effect方法将其转化成一个描述对象，然后再将描述对象，作为标识，再恢复执行副作用函数。

3. generator

function* gen(){
    console.log("hahaha");
    console.log("saint")
}
// 没调用一次调用generator的next()方法就会执行generator中的函数体
gen.next();

//yield关键字会阻塞后面的语句，调用next()会进入到下一个语句
function* gen(){
    yield console.log("hahaha");
    yield console.log("saint")
}

var test = gen();
text.next();
text.next();

4. dispatch、action

假设界面有一个button按钮用来获取远程服务器的数据

class UserComponent extends React.Component {
  ...
  onSomeButtonClicked() {
    const { userId, dispatch } = this.props
    dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})
  }
  ...
}

组件会dispatch一个action到Store中。

所以我们需要一个Saga来监听所有的’USER_FETCH_REQUESTED’ action，并触发一个API调用获取用户数据。

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'

// worker Saga : 将在 USER_FETCH_REQUESTED action 被 dispatch 时调用
function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

/*
  在每个 `USER_FETCH_REQUESTED` action 被 dispatch 时调用 fetchUser
  允许并发（译注：即同时处理多个相同的 action）
*/
function* mySaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

/*
  也可以使用 takeLatest

  不允许并发，dispatch 一个 `USER_FETCH_REQUESTED` action 时，
  如果在这之前已经有一个 `USER_FETCH_REQUESTED` action 在处理中，
  那么处理中的 action 会被取消，只会执行当前的
*/
//function* mySaga() {
//  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
//}

export default mySaga;

使用redus-saga中间件将Saga与Redux Store建立连接。

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

// then run the saga
sagaMiddleware.run(mySaga)

本文标题：React从入门到实战（含Redux、redux-saga）

本文链接：https://blog.quwenai.cn/post/9154.html

作者授权：除特别说明外，本文由 toobug 原创编译并授权 TOOBUG信息安全网刊载发布。

本文链接：https://blog.quwenai.cn/post/9154.html

分享到：