0x000 概述

这一章终于大集成了

0x001 集成react

• 源码

  import React from 'react'
  import ReactDom from 'react-dom'class App extends React.Component {render() {return (<div>react</div>)}
  }ReactDom.render(<App/>,document.getElementById('app')
  )

• 效果

  

• 说明：

  • 集成react主要是用到react、react-router库

0X002 集成react-router

• 源码

  import React from 'react'
  import ReactDom from 'react-dom'
  import {BrowserRouter, Route, withRouter} from 'react-router-dom'class Article extends React.Component {render() {return (<p>article</p>)}
  }let MyArticle = withRouter(Article)class App extends React.Component {render() {return (<div><Route component={MyArticle}></Route></div>)}
  }let MyApp = withRouter(App)ReactDom.render(<BrowserRouter><MyApp/></BrowserRouter>,document.getElementById('app')
  )

• 效果
  

• 说明

  • 主要用到react-router-dom库，是针对react-router库在dom环境下的封装
  • withRouter组件，注入match、location、history等属性
  • BrowserRouter接管跟组件
  • Route指定路由和组件的对应关系

0x003 集成redux

• 源码

  • 引入redux相关的包

    import {Provider, connect} from 'react-redux'
    import {createStore} from 'redux'

  • reducer

    const counter = (state = {counter: 0, num: 0}, action) => {switch (action.type) {case ACTION_INCREMENT:return {...state, ...{counter: ++state.counter}}case ACTION_DECREMENT:return {...state, ...{counter: --state.counter}}default:return state}
    }

  • action和actionCreators

    // action
    const ACTION_INCREMENT = 'INCREMENT'
    const ACTION_DECREMENT = 'DECREMENT'
    // action creator
    const increment = () => ({type: ACTION_INCREMENT
    })
    const decrement = () => ({type: ACTION_DECREMENT
    })

  • 链接组件

    
    // store
    const store = createStore(counter)class Article extends React.Component {render() {return (<p>{this.props.counter}</p>)}
    }let MyArticle = withRouter(connect((state) => {return {counter: state.counter}
    })(Article))class App extends React.Component {render() {return (<div><Route component={MyArticle}></Route><button onClick={() => this.props.increment()}>+</button><button onClick={() => this.props.decrement()}>-</button></div>)}
    }let MyApp = withRouter(connect(() => ({}), (dispatch) => {return {increment: () => dispatch(increment()),decrement: () => dispatch(decrement())}
    })(App))ReactDom.render(<Provider store={store}><BrowserRouter><MyApp/></BrowserRouter></Provider>,document.getElementById('app')
    )

• 效果

• 说明

  • 主要用到redux、react-redux库
  • reducer、action、actionCreators都是redux用的
  • Provider接管BrowserRouter，并注入store
  • connect连接组件和store，为组件注入reducer

0x005 总结

每一步都搞懂，下一步才能更明确。

0x006 资源

• 源码