极快了然react,React从入门到放任

概况:

因而本篇小说你能够对react的重大有个完全的认知。
关于react是怎么样,优点,化解什么难点等,英特网一大推就不啰嗦了。 

询问虚拟DOM的贯彻,参考那篇小说 

[虚拟DOM]
(https://www.zhihu.com/question/29504639)

简单讲,其实便是用二个轻量级的dom结构(用js模拟达成),来效仿重量级的dom结构,通过比对轻量级结构后,在操作重量级dom结构巩固品质,从而到达质量优化的目标。

概况:

经过本篇文章你能够对react的注重有个总体的认知。
至于react是如何,优点,解决什么难点等,网络一大推就不啰嗦了。
摸底虚拟DOM的兑现,参考那边小说
虚拟DOM
不想看的话回顾讲,其实正是用3个轻量级的dom结构(用js模拟实现),来模拟重量级的dom结构,通过比对轻量级结构后,在操作重量级dom结构加强品质,从而到达品质优化的目的。

demo地址
https://github.com/leidenglai/react-ops

安装

npm i -S redux react-redux redux-devtools

生命周期:

高效学习react 先领悟它的最首要—-生命周期,
叁个零件在分化时代会调用不一样时期的函数接口也正是相应的生命周期函数

生命周期:

异常快学习react 先了然它的显要—-生命周期,
二个零部件在差别时期会调用不一样时期的函数接口也正是应和的生命周期函数

React供给的入门知识

react其实功用很少,他只是1个负担渲染页面的框架,其采纳的
Diff算法
使稳当前js在操作dom时成本功用方面包车型客车标题获得实惠的化解。
用脚本进行DOM操作的代价很昂贵。守旧的做法中,js会大批量的操作dom,所以会消耗多量的频率,也是时间。因为那几个缘故react的杜撰dom的优势就彰显出来了,它使用虚拟dom将实际的dom结构存款和储蓄起来,每当状态产生转移时就能够创立新的杜撰节点并与事先的杜撰节点开始展览比较,然后渲染实际页面中变化的一对。整个进程未有开始展览dom的拿走和操作,将原先或者数次的dom操作,压缩到唯有三回渲染。
所以说react是一个ui框架。
因为react只担任ui渲染,要搞好2个品种,就须求别的工具和库的协作,如redux管理数据,单页应用react-router管理路由,
immutable
、 lodash
等协理插件。react已圆满协助ES陆,ES6也要命供给,有ES六,那么她的好基友babel也少不了。还有便是前者今后风靡的集调节和测试、压缩、创设于寥寥的webpack,不会安插也要会用。
不是说好的功能少吗
那也等于干什么说react上手不方便了,不过像es六那种,不管你学不学react你都得调控。

概念

在redux中分为3个对象:Action、Reducer、Store

装载时期的函数

getDefaultProps(是设置默许props)getInitialState(甩掉,设置暗中同意State)
依次试行以下函数 

• constructor

极快了然react,React从入门到放任。• componentWillMount 

• render 

• componentDidMount

装载时期的函数

getDefaultProps(是安装暗中同意props)getInitialState(扬弃,设置暗许State)
梯次实施以下函数
• constructor
• componentWillMount
• render
• componentDidMount

React的组件

react的组件其实有点像3个智进版的html标签,你能够自定义这么些标签怎么显得,能干什么,之后在其它地点能重复引用。
react的零部件是由props
、state数据和rander视图等整合。props是早先数据,不可变的,一般来着父组件传递;
state决定了可变的和用户交互的数码,它的意况调控着视图的情况。与其他框架监听数据动态改换dom分裂,react选拔setState来决定视图的更新。setState会自动调用render函数,触发视图的双重渲染,假若仅仅只是state数据的变迁而未有调用setState,并不会触发更新,所以必须利用setState()修改state。
零件就是富有独立成效的视图模块,许多小的零件组成八个大的组件,整个页面正是由一个个零部件组合而成。它的好处是惠及重复利用和保证。
二个简易的零部件写法(ES六 class类创制组件,推特(Twitter)官方推荐的写法):

import React from 'react';

export class TestComponents extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      //...
    };
  }
  render() {
    return (<div>Hello World!</div>)
  }
}

Action

  1. 对作为(如用户作为)的架空
  2. Action 正是1个日常 JavaScript
    对象。如:{ type: 'ADD_TODO', text: 'Go to swimming pool' }(当中type字段是预约也是必须的)
  3. 作为Reducer的参数
履新时期的函数

比如组件的多少有变动了(porp,state), 依次施行以下函数 

• componentWillReceiveProps 

• shouldComponentUpdate

 • componentWillUpdate

 • render 

• componentDidUpdate

履新时代的函数

只要组件的数码有变动了(porp,state), 依次试行以下函数
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

生命周期函数

实例化
第3次实例化
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount

实例化完毕后的换代
getInitialState
componentWillMount
render
componentDidMount
存在期
组件已存在时的情事改换

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
销毁&清理期
componentWillUnmount

Reducer

  1. 一个平凡的函数,用来修改store的状态。
  2. 函数具名:(currentState,action)=>newState
    1. 在 default 情状下重临currentState
    2. Object.assign({},state, { visibilityFilter: action.filter })(第3个参数无法为state)
      等价于ES7的 { ...state, ...newState }
  3. redux 的 combineReducers 方法可统一reducer
卸载时期的函数

销毁组件

亚洲必赢官网,•componentWillUnmount

1. import React,{ Component } from 'react';
2. class Demo extends Component {
3.  constructor(props) {
4.    // 构造函数,要创造一个组件类的实例,会调用对应的构造函数,
5.    //一个react组件需要构造函数,往往为了两个目的.
6.    //1:初始化state.2.绑定成员函数this环境。  
7.    // 无状态的函数就不需要构造函数,
8.      super(props)
9.      console.log("---初始化组件---")
10.      this.state = {
11.        test:'想要显示一段不一样的文字'
12.         //定义state,存放页面的数据,通过this.setState()方法修改
13.        //.this.setState()函数所做的事情,首先是改变this.state的值,然后驱动组件经历更新过程,这样才有机会让this.state里新的值出现在界面上。
14.      }
15.  }
16. componentWillMount () {
17.    console.log("---组件挂载前---最先执行的函数")
18. }
19. componentDidMount () {
20.    console.log("---组件挂载后---")
21. }
22. componentWillReceiveProps (nextProps) {
23.    console.log("---父组件重新渲染---")
24. 值得注意的是,更新时期的componentWillReceiveProps函数,
25. 只要父组件的render函数被调用,在render函数里面被渲染的子组件就会经历更新过程,不管父组件传给子组件的Props有没有改变,都会触发子组件的componentWillReceiveProps函数,但是自身的this.setState方法触发的更新过程不会调用这个函数。
26. }
27. shouldComponentUpdate (nextProps,nextState) {
28.    console.log("---组件接受到重绘状态---")
29.    它决定了一个组件什么时候不渲染。
30.    在更新过程中shouldComponemtUpdata 返回 false那就立刻停止更新。
31.    this.setState函数后会执行shouldComponemtUpdata 然后在决定我要不要更新。
32.  相反 shouldComponemtUpdata 函数返回 TRUE,接下来就会依次调用
33.   componentWillUpdata,render,componetDidUpdata函数,它把render像夹心面包似得夹在了中间。
34. }
35. componentWillUpdate (nextProps,nextState) {
36.  console.log("---组件将要更新---")
37. } 
38. componentDidUpdate (prevProps,prevState) {
39.   console.log("---组件更新完毕---")
40. }
41. render () {
42.    console.log("---组件渲染---")
43.    return (
44.        <div>{this.state.test}</div>
45.    )
46. }
47. componentWillUnmount () {
48.   console.log("---组件销毁---")
49. }
50. }
51. export default Demo;

 

component威尔Mount 和componentDidMount的分别:component威尔Mount
可以在服务器调用,也得以在浏览器调用然而componentDidMount只可以在浏览器被调用,因为装载是两个零部件放到DOM树上的历程,那么真正的装载是不容许在服务器上形成的,服务器的渲染并不会发生DOM树。所以大家能够使用那一点。在componentDidMount被调用时候,组件已经棉被服装载到DOM树上了,可放心的去操作渲染出来的其他DOM。

卸载时代的函数

销毁组件
•componentWillUnmount

import React,{ Component } from 'react';

class Demo extends Component {
  constructor(props) {
    // 构造函数,要创造一个组件类的实例,会调用对应的构造函数,
    //一个react组件需要构造函数,往往为了两个目的.
    //1:初始化state.2.绑定成员函数this环境。  
    // 无状态的函数就不需要构造函数,
      super(props)
      console.log("---初始化组件---")
      this.state = {
        test:'想要显示一段不一样的文字'
         //定义state,存放页面的数据,通过this.setState()方法修改
        //.this.setState()函数所做的事情,首先是改变this.state的值,然后驱动组件经历更新过程,这样才有机会让this.state里新的值出现在界面上。
      }
  }
componentWillMount () {
    console.log("---组件挂载前---最先执行的函数")

}
componentDidMount () {
    console.log("---组件挂载后---")
}
componentWillReceiveProps (nextProps) {
    console.log("---父组件重新渲染---")
值得注意的是,更新时期的componentWillReceiveProps函数,
只要父组件的render函数被调用,在render函数里面被渲染的子组件就会经历更新过程,不管父组件传给子组件的Props有没有改变,都会触发子组件的componentWillReceiveProps函数,但是自身的this.setState方法触发的更新过程不会调用这个函数。
}
shouldComponentUpdate (nextProps,nextState) {
    console.log("---组件接受到重绘状态---")
    它决定了一个组件什么时候不渲染。
    在更新过程中shouldComponemtUpdata 返回 false那就立刻停止更新。
    this.setState函数后会执行shouldComponemtUpdata 然后在决定我要不要更新。
  相反 shouldComponemtUpdata 函数返回 TRUE,接下来就会依次调用
   componentWillUpdata,render,componetDidUpdata函数,它把render像夹心面包似得夹在了中间。
}
componentWillUpdate (nextProps,nextState) {
  console.log("---组件将要更新---")
} 
 componentDidUpdate (prevProps,prevState) {
   console.log("---组件更新完毕---")
}
render () {
    console.log("---组件渲染---")
    return (
        <div>{this.state.test}</div>
    )
}
componentWillUnmount () {
   console.log("---组件销毁---")
}
}
export default Demo;

component威尔Mount 和componentDidMount的分别:component威尔Mount
能够在服务器调用,也能够在浏览器调用然而componentDidMount只可以在浏览器被调用,因为装载是2个组件放到DOM树上的历程,那么真正的装载是不恐怕在服务器上完毕的,服务器的渲染并不会时有产生DOM树。所以大家得以采取这或多或少。在componentDidMount被调用时候,组件已经棉被服装载到DOM树上了,可放心的去操作渲染出来的别样DOM。

Redux

率先,redux并不是必须的,它的法力相当于在各类成效模块顶层组件之上又加了3个组件,功用是开始展览逻辑运算、储存数据和得以完成组件特别是顶层组件的数量通讯。假如组件之间的调换不多,逻辑不复杂,只是单纯的进行视图的渲染,没须求用redux,用了反倒影响开荒速度。不过尽管组件沟通越发频仍,逻辑很复杂的一个选取,这redux的优势就专门强烈了。

Store

  1. 表示数据模型,内部维护了3个state变量
  2. 三个着力措施,分别是getState、dispatch。前者用来取得store的情状(state),后者用来修改store的情景
  3. createStore(reducer) 可创建Store

redux示例:

import { createStore } from 'redux'

// reducer
function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        default:
            return state
    }
}

// state
let store = createStore(counter); // 会调用

// 监听
store.subscribe(() =>
    console.log(store.getState())
);

// 调用reducer
store.dispatch({ type: 'INCREMENT' });

编纂组件:

零件间的传递通过props举办传递,看下边例子

 import React from 'react';

// 一级父组件

class Level1 extends React.Component{

   render(){

       return  <Level2 color='red'/>

   }

}

// 二级子组件

class Level2 extends React.Component{

   render(){

       return  <Level3 color={this.props.color}/>

   }

}

// 三级孙子组件

class Level3 extends React.Component{

   render(){

       return  <div color={{color: this.props.color}}/>

   }

}

 

也得以这么创造

  1. import React from ‘react’;

    const Level1 = React.createClass({  
    
     render() {
    
       return (
    
         <div></div>
    
       );
    
     }
    
    });
    
    export default Level1 ;  
    

     

编写制定组件:

零件间的传递通过props举办传递,看上边例子

import React from 'react';
// 一级父组件
class Level1 extends React.Component{
    render(){
        return  <Level2 color='red'/>
    }
}
// 二级子组件
class Level2 extends React.Component{
    render(){
        return  <Level3 color={this.props.color}/>
    }
}
// 三级孙子组件
class Level3 extends React.Component{
    render(){
        return  <div color={{color: this.props.color}}/>
    }
}

也得以如此创造

import React from 'react';
const Level1 = React.createClass({  
  render() {
    return (
      <div></div>
    );
  }
});
export default Level1 ;  

redux的基本原理实际上就是围绕着store实行

亚洲必赢官网 1

redux的基本原理实际上就是围绕着store实行的。
react-redux是对redux流程的1种包装,使其能够适配与react的代码结构。
react-redux首先提供了一个Provider,能够将从createStore重返的store放入context中,使子集可以获得到store并拓展操作;

<Provider store={store}>
    {() => <App />}
</Provider>

react-redux

react的需求:

  1. 数码连接单向从顶层向下分发的
  2. 零件之间的联络通过晋级state:子组件退换父组件state的秘技只可以是透过onClick触发父组件表明好的回调
  3. state越来越复杂:单页应用的发展造成。包蕴服务器响应、缓存数据、本地转移尚未持久化到服务器的数量,也囊括
    UI
    状态,如激活的路由,被入选的标签,是不是出示加载动效或然分页器等等。

react-redux 将react组件分为二种:显示组件 和 容器组件

React.createClass和extends Component的区别:

Component{}是ES陆的写法,会自行两次三番Component里面包车型大巴质量createClass({})是React的ES5写法,会扭转一个React Component 语法差异 

• propType 和 getDefaultProps 

• 状态的分别 

• this区别 

• Mixins

 参考那篇小说 

[React.createClass和extends Component的区别]
(https://segmentfault.com/a/1190000005863630)

 假诺你的组件是无状态的,纯输出组件也足以一贯写成函数如下

  1. function Pure(props){

      return(
    
          <div>{props.xxxx}</div>
    
      )
    
    }
    

     

react 组件必须一流一流传递
,假设想要越级传递,1直接到5,那么供给用到redux

亚洲必赢官网 2 

redux

redux之前最佳刺探下flux,不过redux特别美丽。
react和redux事实上是八个独立的事物,如果你两者单独行使推荐react-redux库,大家从redux
使用方式开首,遵纪守法过渡到react-redux,那一个库能够让大家简化代码的书写

React.createClass和extends Component的区别:

Component{}是ES6的写法,会活动延续Component里面包车型地铁习性
createClass({})是React的ES伍写法,会变卦二个React Component
语法不同
• propType 和 getDefaultProps
• 状态的区分
• this区别
• Mixins
参考那篇小说
React.createClass和extends
Component的区别
假设你的机件是无状态的,纯输出组件也足以一向写成函数如下

function Pure(props){
   return(
       <div>{props.xxxx}</div>
   )
}

react 组件必须一流拔尖传递

亚洲必赢官网 3

clipboard.png

假诺想要越级传递,壹向来到伍,那么要求用到redux

redux和react怎么合营呢

react-redux提供了connect和Provider多少个主意,它们三个将零件与redux关联起来,贰个将store传给组件。组件通过dispatch发出action,store依据action的type属性调用对应的reducer并传播state和那几个action,reducer对state实行管理并回到三个新的state放入store,connect监听到store产生变化,调用setState更新组件,此时组件的props也就接着变动。
地点那一段解释有点绕,所以料定要看
文档
,将action、store、reducer叁者的涉及理清

import React from 'react';
import { connect } from 'react-redux';

class TestComponents extends React.Component {
    //...
}

function mapStateToProps(state) {
  return {
        //redux要传递给当前组件props上的数据,如:
        data: state.data
    };
}

export default connect(mapStateToProps)(TestComponents)

这是叁个零部件模块与redux关联的简便例子,将redux上的数码data绑定到了TestComponents的props对象上。
connect(mapStateToProps, mapDispatchToProps, mergeToProps)(App);
首先个函数接收store中state和props,使页面能够依靠当下的store中state和props再次回到新的stateProps;
第3个函数接收store中的dispatch和props,使页面能够复写dispatch方法,重临新的dispatchProps;
其四个函数接收前三个函数生成的stateProps和dispatchProps,在加上原来的props,合并成新的props,并传给原始根节点的props。

亚洲必赢官网 4

redux把数量流程标准化,统一管理一个store对象,当更新根数据,相关绑定数据都会自行进行更新。
唯独缺点是不创制的应用时,当一个零部件相关数据更新时,就算父组件无需用到那么些组件,父组件照旧会重复render,大概供给写shouldComponentUpdate()实行判断优化,不过多少复杂时轻巧掉坑里。

展现组件

讲述怎样呈现:肩负UI样式的显示

  1. 数码来自:props
  2. 数据修改:通过props的回调函数
  3. 不直接使用redux
在redux框架下,一个react组件是那样运维的

读取Store的场地,用于初阶化组件的场馆,同时监听Store的动静改造,当Store状态发生变动时候,就要求立异组件的气象,从而使得渲染。当必要更新store状态时,就要派发action对象。
依照当下props,和state,渲染用户分界面。

redux

redux此前最佳刺探下flux,不过redux特别优异。
react和redux事实上是多少个单身的东西,假令你两者单独接纳推荐react-redux库,大家从redux
使用方法开头,安分守纪过渡到react-redux,那么些库可以让我们简化代码的书写

下壹篇:React+Redux架构贰个管制种类

容器组件

讲述怎么样运作:担当数据得到 和 状态更新

  1. 多少来自:redux state
  2. 数量修改:redux 派发action
  3. 直白使用redux

react-redux 只有2个API:Provider 和 connect

品类组织

actions—>用户作为 components—>组件 containers—>容器
reducer—>三个纯函数再次回到新的state状态 store–>
store里面担负分发action行为 index.html —> 模板文件 webpack—>
打包配置文件

在redux框架下,一个react组件是这么运转的

读取Store的气象,用于开端化组件的气象,同时监听Store的景观改变,当Store状态爆发变动时候,就要求创新组件的图景,从而使得渲染。当须要更新store状态时,就要派发action对象。
传说近来props,和state,渲染用户分界面。

Provider

<Provider store>

  1. 在原使用组件上包裹一层,使原先1切应用成为Provider的子组件
  2. 接收Redux的store作为props,内部通过context对象传递给后人组件上的connect
actions:

• 是三个行事的空洞

 • 是普通JS对象 

• 一般由艺术生成

 • 必须有一个type 笔者要加多一本书那一个作为足以如下:

  1. const addTodo = (text) =>{

       retrun {
    
          type:'Add',
    
          id: nextTodoId++,
    
          text,
    
       }
    
    }
    

     

reducer: 

• 是响应的悬空 

• 是纯方法 

• 传入旧的气象和action 

• 再次来到新的图景

具名函数:reducer(state, action) state
是当前情形,action是承受到的action, 注意不能够改动参数state和action

  1. const todo = (state, action) =>{

       switch (action.type){
    
       case "Add_Book":
    
        return
    
         {
    
             text: action.text,
    
        }
    
    }
    

     

品种组织

actions—>用户作为
components—>组件
containers—>容器
reducer—>3个纯函数重临新的state状态
store–> store里面负担分发action行为
index.html —> 模板文件
webpack—> 打包配置文件

connect

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)

作用:连接React组件与 Redux store

mapStateToProps(state, ownProps) : stateProps

  1. 将 store 中的数据作为 props 绑定到零部件上。
  2. 当 state 变化,恐怕 ownProps 变化的时候,mapStateToProps
    都会被调用,总计出3个新的 stateProps

mapDispatchToProps(dispatch, ownProps): dispatchProps:将
dispatch(action) 作为 props 绑定到零部件上

mergeProps:钦点 stateProps 以及 dispatchProps 合并到 ownProps
的办法。(暗许使用Object.assign)

connect是个高阶组件(HOC)大概源码:

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
  return function wrapWithConnect(WrappedComponent) {
    class Connect extends Component {
        constructor(props, context) {
            this.store = props.store || context.store
            this.stateProps = computeStateProps(this.store, props)
            this.dispatchProps = computeDispatchProps(this.store, props)
            this.state = { storeState: null }
            // 合并stateProps、dispatchProps、parentProps
            this.updateState()
        }
        shouldComponentUpdate(nextProps, nextState) {
            // 进行判断,当数据发生改变时,Component重新渲染
            if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
                this.updateState(nextProps)
                return true
            }
        }
        componentDidMount() {
            this.store.subscribe( () => this.setState({ storeState: this.store.getState() }) )
        }
        render() {
            return (
                <WrappedComponent {...this.nextState} />
            )
        }
      }
      return Connect;
    }
}

react-redux示例:

Counter.js

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

function clickReduce(state = { todo: 1 }, action) {
    switch (action.type) {
        case 'click':
            return Object.assign({}, state, { todo: state.todo + 1 });
        default:
            return state;
    }
}

let store = createStore(clickReduce);

class Counter extends Component {
    render() {
        return (
            <div>
                <div>{this.props.todo}</div>
                <button onClick={this.props.clickTodo}>Click</button>
            </div>
        )
    }
}

// 方式1:
export default connect(state => ({ todo: state.todo }),
    dispatch => ({ clickTodo: () => dispatch({ type: 'click' }) }))(Counter)

// 方式2:
export default connect(state => ({ todo: state.todo }),
    dispatch => bindActionCreators({ clickTodo: () => ({ type: 'click' }) }, dispatch))(Counter);

index.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { render } from 'react-dom';
import Clock from './Clock'

render((
<Provider store={store}>
    <Counter />
</Provider>), root);

在redux中,我们不得不dispatch轻易的action对象。
对应的在react-redux中,大家不得不定义同步的reducer方法。
下节将介绍在react-redux如何定义异步方法。让其尤其适用于生产条件。

用三个事例串起来:

统一筹算一个具有加减功用的品类:

Actions.js:

export const increment = (counterCaption) => {

 return {

   type: increment,

   counterCaption: counterCaption

 };

};



export const decrement = (counterCaption) => {

 return {

   type: decrement,

   counterCaption,//es6写法等同于counterCaption: counterCaption

 };

};

Reducer.js:

export default (state, action) => {

 const {counterCaption} = action;//等同于const counterCaption= action.counterCaption;



 switch (action.type) {

   case increment:

     return {...state, [counterCaption]: state[counterCaption] + 1};

   case decrement:

     return {...state, [counterCaption]: state[counterCaption] - 1};



   default:

     return state

 }

}



//return {...state, [counterCaption]: state[counterCaption] - 1};等同于

//const newState = Object.assign({},state);

//newState[counterCaption]--;

//return newState;

 

Store.js:

import {createStore} from 'redux';

import reducer from './Reducer.js';



const initValues = {

 'First': 0,

 'Second': 10,

 'Third': 20

};



const store = createStore(reducer, initValues);



export default store;



//createStore是redux库提供的函数第一个参数是更新状态的reducer,第二参数是初始值

 

views(容器):

import React, { Component } from 'react';

import Counter from './Counter.js';



class ControlPanel extends Component {

 render() {

   return (

     <div>

       <Counter caption="First" />

       <Counter caption="Second" />

       <Counter caption="Third" />

     </div>

   );

 }

}

export default ControlPanel;

 

Counter.js(组件):

import React, { Component, PropTypes } from 'react';



import store from '../Store.js';

import * as Actions from '../Actions.js';



const buttonStyle = {

 margin: '10px'

};



class Counter extends Component {

 render() {

   const {caption, onIncrement, onDecrement, value} = this.props;



   return (

     <div>

       <button style={buttonStyle} onClick={onIncrement}>+</button>

       <button style={buttonStyle} onClick={onDecrement}>-</button>

       {caption} count: {value}

     </div>

   );

 }

}

//以下是对参数类型的定义,开启eslint需要写一下代码。

Counter.propTypes = {

 caption: PropTypes.string.isRequired,//表示caption是string类型,必填

 onIncrement: PropTypes.func.isRequired,

 onDecrement: PropTypes.func.isRequired,

 value: PropTypes.number.isRequired

};





class CounterContainer extends Component {

 constructor(props) {

   super(props);



   this.onIncrement = this.onIncrement.bind(this);

   this.onDecrement = this.onDecrement.bind(this);

   this.onChange = this.onChange.bind(this);

   this.getOwnState = this.getOwnState.bind(this);



   this.state = this.getOwnState();

 }



 getOwnState() {

   return {

     value: store.getState()[this.props.caption]

   };

 }



 onIncrement() {

   store.dispatch(Actions.increment(this.props.caption));

 }



 onDecrement() {

   store.dispatch(Actions.decrement(this.props.caption));

 }



 onChange() {

  //为了保持Store上的状态和this.state的同步

   this.setState(this.getOwnState());

 }



 shouldComponentUpdate(nextProps, nextState) {

   return (nextProps.caption !== this.props.caption) ||

     (nextState.value !== this.state.value);

 }



 componentDidMount() {

  //为了保持Store上的状态和this.state的同步

   store.subscribe(this.onChange);

 }



 componentWillUnmount() {

   //为了保持Store上的状态和this.state的同步

   store.unsubscribe(this.onChange);

 }



 render() {

//Counter 在上面

   return <Counter caption={this.props.caption}

     onIncrement={this.onIncrement}

     onDecrement={this.onDecrement}

     value={this.state.value} />

 }

}



CounterContainer.propTypes = {

 caption: PropTypes.string.isRequired

};



export default CounterContainer;

 

一般我们会把容器放在container文件夹下,把组件放在component下 亚洲必赢官网 5亚洲必赢官网 6

ControlPanel
根本就从未应用store,假使单纯为了传递prop给组件counter就要求帮忙state
prop,显明不成立,在那之中react提供了Context的效益能够消除这一个主题材料;

actions:

• 是三个表现的肤浅
• 是普通JS对象
• 一般由艺术生成
• 必须有二个type
自己要增加1本书这一个作为能够如下:

const addTodo = (text) =>{
    retrun {
       type:'Add',
       id: nextTodoId++,
       text,
    }
}

reducer:
• 是响应的抽象
• 是纯艺术
• 传入旧的情况和action
• 再次回到新的事态

签约函数:reducer(state, action) state
是现阶段情景,action是接受到的action,
小心不能改变参数state和action

const todo = (state, action) =>{
    switch (action.type){
    case "Add_Book": 
     return
      {
          text: action.text,
     }
}
Context:

我们扩展Provider.js,代码如下:

import {PropTypes, Component} from 'react';



class Provider extends Component {



 getChildContext() {

   return {

     store: this.props.store

   };

 }

 render() {

   return this.props.children; //Provider包裹的子元素输出出来

 }

}



Provider.contextTypes = {

 store: PropTypes.object

}

export default Provider;

 

index.js 文件引进Provider

import React from 'react';

import ReactDOM from 'react-dom';

import ControlPanel from './views/ControlPanel';

import store from './Store.js';

import Provider from './Provider.js';

ReactDOM.render(

 <Provider store={store}>

   <ControlPanel />

 </Provider>,

 document.getElementById('root')

);

 

最后大家在修改ControlPanel中的Counter组件, 亚洲必赢官网 7亚洲必赢官网 8亚洲必赢官网 9亚洲必赢官网 10

用3个例证串起来:

统一计划3个存有加减功效的品类:

Actions.js:

export const increment = (counterCaption) => {
  return {
    type: increment,
    counterCaption: counterCaption
  };
};

export const decrement = (counterCaption) => {
  return {
    type: decrement,
    counterCaption,//es6写法等同于counterCaption: counterCaption
  };
};

Reducer.js:

export default (state, action) => {
  const {counterCaption} = action;//等同于const counterCaption= action.counterCaption;

  switch (action.type) {
    case increment:
      return {...state, [counterCaption]: state[counterCaption] + 1};
    case decrement:
      return {...state, [counterCaption]: state[counterCaption] - 1};

    default:
      return state
  }
}

//return {...state, [counterCaption]: state[counterCaption] - 1};等同于
//const newState = Object.assign({},state);
//newState[counterCaption]--;
//return newState;

Store.js:

import {createStore} from 'redux';
import reducer from './Reducer.js';

const initValues = {
  'First': 0,
  'Second': 10,
  'Third': 20
};

const store = createStore(reducer, initValues);

export default store;

//createStore是redux库提供的函数第一个参数是更新状态的reducer,第二参数是初始值

views(容器):

import React, { Component } from 'react';
import Counter from './Counter.js';

class ControlPanel extends Component {
  render() {
    return (
      <div>
        <Counter caption="First" />
        <Counter caption="Second" />
        <Counter caption="Third" />
      </div>
    );
  }
}
export default ControlPanel;

Counter.js(组件):

import React, { Component, PropTypes } from 'react';

import store from '../Store.js';
import * as Actions from '../Actions.js';

const buttonStyle = {
  margin: '10px'
};

class Counter extends Component {
  render() {
    const {caption, onIncrement, onDecrement, value} = this.props;

    return (
      <div>
        <button style={buttonStyle} onClick={onIncrement}>+</button>
        <button style={buttonStyle} onClick={onDecrement}>-</button>
        {caption} count: {value}
      </div>
    );
  }
}
//以下是对参数类型的定义,开启eslint需要写一下代码。
Counter.propTypes = {
  caption: PropTypes.string.isRequired,//表示caption是string类型,必填
  onIncrement: PropTypes.func.isRequired,
  onDecrement: PropTypes.func.isRequired,
  value: PropTypes.number.isRequired
};


class CounterContainer extends Component {
  constructor(props) {
    super(props);

    this.onIncrement = this.onIncrement.bind(this);
    this.onDecrement = this.onDecrement.bind(this);
    this.onChange = this.onChange.bind(this);
    this.getOwnState = this.getOwnState.bind(this);

    this.state = this.getOwnState();
  }

  getOwnState() {
    return {
      value: store.getState()[this.props.caption]
    };
  }

  onIncrement() {
    store.dispatch(Actions.increment(this.props.caption));
  }

  onDecrement() {
    store.dispatch(Actions.decrement(this.props.caption));
  }

  onChange() {
   //为了保持Store上的状态和this.state的同步
    this.setState(this.getOwnState());
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (nextProps.caption !== this.props.caption) ||
      (nextState.value !== this.state.value);
  }

  componentDidMount() {
   //为了保持Store上的状态和this.state的同步
    store.subscribe(this.onChange);
  }

  componentWillUnmount() {
    //为了保持Store上的状态和this.state的同步
    store.unsubscribe(this.onChange);
  }

  render() {
 //Counter 在上面
    return <Counter caption={this.props.caption} 
      onIncrement={this.onIncrement}
      onDecrement={this.onDecrement}
      value={this.state.value} />
  }
}

CounterContainer.propTypes = {
  caption: PropTypes.string.isRequired
};

export default CounterContainer;

一般我们会把容器放在container文件夹下,把组件放在component下

亚洲必赢官网 11

clipboard.png

亚洲必赢官网 12

clipboard.png

ControlPanel
根本就未有动用store,如若单单为了传递prop给组件counter将要求援助state
prop,鲜明不客观,当中react提供了Context的效劳能够缓和这么些主题材料;

React-Redux:

假诺明白地点的例子之后你会意识有点复用的一对能够领到出来,各种零部件关切本身的一些就行了,react-redux库正是消除那么些业务的,让您付出爽到飞起

react-redux 规定,全体的 UI 组件都由用户提供,容器组件则是由
React-Redux
自动生成。也正是说,用户承担视觉层,状态管理则是全部付出它。

先是大家先理解一下关键的函数connect,React-Redux 提供connect方法,用于从
UI 组件生成容器组件,正是将那三种组件连起来。 connect方法的全体 API

import { connect } from 'react-redux'

const VisibleTodoList = connect(

 mapStateToProps,

 mapDispatchToProps

)(TodoList)

 

connect方法接受三个参数:mapStateToProps和mapDispatchToProps。它们定义了
UI 组件的作业逻辑。前者担负输入逻辑,就要state映射到 UI
组件的参数(props),后者担任输出逻辑,将在用户对 UI 组件的操作映射成
Action。

那儿index.js文件产生:

import React from 'react';

import ReactDOM from 'react-dom';

import {Provider} from 'react-redux';



import ControlPanel from './views/ControlPanel';

import store from './Store.js';

ReactDOM.render(

 <Provider store={store}>

   <ControlPanel/>

 </Provider>,

 document.getElementById('root')

);

//Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了

 

Counter.js文件形成

import React, { PropTypes } from 'react';

import * as Actions from '../Actions.js';

import {connect} from 'react-redux';



const buttonStyle = {

 margin: '10px'

};



function Counter({caption, onIncrement, onDecrement, value}) {

 return (

   <div>

     <button style={buttonStyle} onClick={onIncrement}>+</button>

     <button style={buttonStyle} onClick={onDecrement}>-</button>

     {caption} count: {value}

   </div>

 );

}



Counter.propTypes = {

 caption: PropTypes.string.isRequired,

 onIncrement: PropTypes.func.isRequired,

 onDecrement: PropTypes.func.isRequired,

 value: PropTypes.number.isRequired

};



function mapStateToProps(state, ownProps) {

 return {

   value: state[ownProps.caption]

 }

}



function mapDispatchToProps(dispatch, ownProps) {

 return {

   onIncrement: () => {

     dispatch(Actions.increment(ownProps.caption));

   },

   onDecrement: () => {

     dispatch(Actions.decrement(ownProps.caption));

   }

 }

}



export default connect(mapStateToProps, mapDispatchToProps)(Counter);

 

connect函数实际上是个高阶函数,通晓能够参见这边小说 

[Higher-Order
Components]()

至于react 路由得以参见那边小说 

[路由]()

 

亚洲必赢官网 13

 

Context:

我们增添Provider.js,代码如下:

import {PropTypes, Component} from 'react';

class Provider extends Component {

  getChildContext() {
    return {
      store: this.props.store
    };
  }
  render() {
    return this.props.children; //Provider包裹的子元素输出出来
  }
}

Provider.contextTypes = {
  store: PropTypes.object
}
export default Provider;

index.js 文件引进Provider

import React from 'react';
import ReactDOM from 'react-dom';
import ControlPanel from './views/ControlPanel';
import store from './Store.js';
import Provider from './Provider.js';
ReactDOM.render(
  <Provider store={store}>
    <ControlPanel />
  </Provider>,
  document.getElementById('root')
);

提起底我们在修改ControlPanel中的Counter组件,

亚洲必赢官网 14

1.jpg

亚洲必赢官网 15

2.jpg

亚洲必赢官网 16

3.jpg

亚洲必赢官网 17

4.jpg

React-Redux:

只要知道地方的例子之后你会意识有些复用的局地能够领到出来,各样零部件关怀自身的片段就行了,react-redux库便是杀鸡取卵那么些业务的,让您付出爽到飞起

react-redux 规定,全体的 UI 组件都由用户提供,容器组件则是由
React-Redux
自动生成。约等于说,用户承担视觉层,状态管理则是整整付给它。

先是咱们先通晓一下生死攸关的函数connect,React-Redux 提供connect方法,用于从
UI 组件生成容器组件,便是将那三种组件连起来。
connect方法的完整 API

import { connect } from 'react-redux'
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

connect方法接受多少个参数:mapStateToProps和mapDispatchToProps。它们定义了
UI 组件的事体逻辑。前者担任输入逻辑,将要state映射到 UI
组件的参数(props),后者担负输出逻辑,将要用户对 UI 组件的操作映射成
Action。

此时index.js文件形成:

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';

import ControlPanel from './views/ControlPanel';
import store from './Store.js';
ReactDOM.render(
  <Provider store={store}>
    <ControlPanel/>
  </Provider>,
  document.getElementById('root')
);
//Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了

Counter.js文件变成

import React, { PropTypes } from 'react';
import * as Actions from '../Actions.js';
import {connect} from 'react-redux';

const buttonStyle = {
  margin: '10px'
};

function Counter({caption, onIncrement, onDecrement, value}) {
  return (
    <div>
      <button style={buttonStyle} onClick={onIncrement}>+</button>
      <button style={buttonStyle} onClick={onDecrement}>-</button>
      {caption} count: {value}
    </div>
  );
}

Counter.propTypes = {
  caption: PropTypes.string.isRequired,
  onIncrement: PropTypes.func.isRequired,
  onDecrement: PropTypes.func.isRequired,
  value: PropTypes.number.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    value: state[ownProps.caption]
  }
}

function mapDispatchToProps(dispatch, ownProps) {
  return {
    onIncrement: () => {
      dispatch(Actions.increment(ownProps.caption));
    },
    onDecrement: () => {
      dispatch(Actions.decrement(ownProps.caption));
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

connect函数实际上是个高阶函数,精通能够参见那边作品
Higher-Order
Components

至于react 路由得以参见那边文章
路由

网站地图xml地图