Website is graduation design work, the purpose of the development of this website is mainly used to record some notes, as well as aggregate some information information, but also a quiet place in the network world, you can practice some technical ideas here.

At the beginning, the front-end of the website was developed using VUE. In the early period, due to the development schedule of the project, it was not so urgent, so I had some spare time. However, as React was not used and was always upset, React was used for a front-end reconstruction.

The most basic thing to learn a new technology is to read relevant documents. As a single-page application, routing is impossible. React doesn’t work without Reduce (although they are not necessary). React, react router, react redux, react router, react redux, react router, react redux, react router, react router, react redux, react router, react router, react redux, react router, react router, react redux, react router, react router

First, read the React document. The document uses a lot of examples to describe how to use React for development, such as how to design state, props, how to communicate between components, and how to design components. The documentation goes into great detail, but it often takes real practice to see the beauty of it. Such as the state, the design of the props, in a component X with Y, Z two components, suppose Y component has an input box, and Z components may need to use Y component input values to make certain changes, of course if they wrote nor can not be together, but considering the component reuse, single function, such as reasonable factors or apart, Which component should store this value? The following two components are Y and X respectively. This design obviously does not conform to the state design and has too many redundant parts.

class InputComponent extends Component {
  constructor () {
    super(a)this.state = {
      value: ' '
    }
  }
  valInput (e) {
    let value =  e.target.value
    this.setState({value})
    this.props.inputChange(value)
  }
  render () {
    return <input onChange={this.valInput.bind(this)}/>}}Copy the code
class ParentComponent extends Component {
  constructor () {
    super(a)this.state = {
      val: ' '
    }
  }
  inputChange (val) {
    this.setState({val})
  }
  render () {
    return (
      <section>
        {this.state.val}
        <InputComponent inputChange={this.inputChange.bind(this)}/>
      </section>)}}Copy the code

It might look better if I wrote it like this

class InputComponent extends Component {
  render () {
    let {val, inputChange} = this.props
    // Val is not required, but when a value comes from a non-input control, such as an editable div, ace will cause the input value to be erased every time the render function executes.
    return <input value={val} onChange={inputChange}/>}}Copy the code
class ParentComponent extends Component {
  constructor () {
    super(a)this.state = {
      val: ' '
    }
  }
  inputChange (e) {
    this.setState({val: e.target.value})
  }
  render () {
    let val = this.state.val
    return (
      <section>
        {val}
        <InputComponent val={val} inputChange={this.inputChange.bind(this)}/>
      </section>)}}Copy the code

The React-router provides basic requirements for front-end routing. For details about how to use it, see the project documentation. The basic configuration is similar to that of other frameworks, but the use of many apis is quite different (compared to Vue), so you need to read through the documentation carefully so as not to waste time solving problems during development. For example, IndexRoute in Vue can use null characters such as “” as the default UI in the child path.

function root () {
  this.path = '/'
  this.component = require('pages/index').default
}
function demo () {
  this.path = 'demo'
  this.getComponent = (nextstate, cb) = > {
    require.ensure([], (require) => {
      cb(null.require('pages/demo').default)
    })
  }
}
const createRoute = (R) = > {
  let route = new R()
  route.childRoutes = route.childRoutes && route.childRoutes.map(r= > createRoute(r))
  return route
}

export default [root, demo].map((route) = > createRoute(route))Copy the code

React-redux is introduced briefly in understanding Redux from the surface. The use of Redux reduces thinking time during development and avoids some possible problems. Some problems have also been found in the process of use. Using Redux will inevitably lead to a large number of dispatches appearing in the components. It is also worth thinking about how to prevent the project from becoming difficult to maintain after the business becomes complex and large. The modified website is developed in the way of page + component. A page represents the highest component except the same component and can have multiple components. Only the page can initiate actions to the reducer. In this case, the props property is used to call the method passed in by the parent component to pass the command up, and dispath is used to specify actions in the page to call reducer for data update. Of course, sometimes dispath actions need to be processed in the actions and then sent to reducer (such as network requests). It is worth noting that every time dispath has an action, Redux will traverse all registered reducer (reducer is usually composed of multiple sub-reducer), that is to say, all reducer will be called (according to the performance and documents in the project). Below is the reducer part of the code used by the revised website.

export default class ArticleReducer {
  [AAS.ARTICLE_REQUEST_STATE] (state, action) {
    return Object.assign({}, state, {loading: action.loading})
  }
  [AAS.ARTICLE_SEARCH_STATE] (state, action) {
    return Object.assign({}, state, {searching: action.searching})
  }
}Copy the code
const reducers = {}
const AR = new ArticleReducer()
const NR = new NewsReducer()
reducers.articles = (state = initState.article, action) = > {
  return AR[action.type] ? AR[action.type](state, action) : state
}
reducers.editor = (state = initState.editor, action) = > {
  return ER[action.type] ? ER[action.type](state, action) : state
}Copy the code

After using React, it was the first time to use state management tools like Redux for development (although VUEX was also used, they were not based on the whole project). The development process became more controllable, data flow became clear, and the coupling of various tools became lower during development. All in all it was a good try. However, I feel that no matter what technology is used, the level of complexity is bound to increase with the increase of business, and it will become more difficult to maintain a stable, robust and easy maintenance project.

Finally, the importance of good programming habits.