Experience writing a website using React

The website is a graduation project. The purpose of developing this website is mainly to record some notes and aggregate some information. It can also be regarded as a quiet place in the online world, where you can practice some technical ideas. .

The front-end of the website was initially developed using vue. Some time ago, because the development progress of the project was no longer so urgent, I had some free time. I was still worried about not having used React before, so I simply used React to reconstruct the front end.

The most basic way to learn a new technology is of course to read the relevant documents. As a single-page application, front-end routing is of course impossible, and using ReactIf you don’t use Reduce It feels like it doesn’t play its role (although they actually have no necessary relationship). So react, react-router, react-redux are used here. The following are some experiences in using React, I am fortunate that you have read this article. If there is anything wrong, I would like to point it out. If you are accidentally led into a trap, I will not be responsible.

The first thing is to read the documentation of React. The documentation uses a large number of examples to introduce how to use React for development, such as how to design state, props, how to communicate between components, how to design components, etc. Although the document introduces it in detail, it often requires real practice to discover the beauty. For example, the design of state and props has two components Y and Z in a X component. Assume The Y component has an input box, and the Z component may need to use the value input by the Y component to make certain changes. Of course, if they are written together It is not impossible, but considering factors such as component reuse and single function, it is more reasonable to disassemble it. So 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()this.state = {
      value: ''}
  }
  valInput (e) {
    let value =  e.target.valuethis.setState({value})this.props.inputChange(value)
  }
  render () {return <input>  }
}

class ParentComponent extends Component {
  constructor () {
    super()this.state = {
      val: ''}
  }
  inputChange (val) {this.setState({val})
  }
  render () {return (      <section>{this.state.val}<inputcomponent></inputcomponent>
      </section>    )
  }
}

It may look better if you use the following writing method

class InputComponent extends Component {
  render () {
    let {val, inputChange} = this.props// 这里的val并不是必须的，但是当一个值来自非输入控件的时候，如可编辑的div，ace在每次执行render函数的时候都会导致原来输入的值被清空。return <input>  }
}

class ParentComponent extends Component {
  constructor () {
    super()this.state = {
      val: ''}
  }
  inputChange (e) {this.setState({val: e.target.value})
  }
  render () {
    let val = this.state.valreturn (      <section>{val}<inputcomponent></inputcomponent>
      </section>    )
  }
}

react-router provides the basic requirements for front-end routing. You can find the specific usage methods in the project document introduction according to the functions you need. The basic configuration is similar to other frameworks, but the use of many APIs is quite different (compared with vue). You still need to read the documentation carefully to avoid wasting time in solving problems when they occur during development, such as IndexRouteIn vue, you can use empty characters like '' in the sub-route as the default UI.

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))

react-reduxA brief introduction is given in Understanding Redux from the surface. The use of Redux reduces the time of thinking during development and also avoids some possible problems. Some problems were also discovered during use. Using Redux will inevitably lead to a large number of dispatch appearing in the components. How to prevent the project from becoming difficult to maintain when the business becomes complex and large, is also Worth thinking about. The revised website is developed using the page + component method. A page represents the most advanced component except the following components. It can have multiple components. Only the page can initiate action## to reducer. #, all data shared by multiple components are passed to the child component through the props in the page. If the child component needs to update data, it calls the parent component through the props attribute. The method passes the command upward, and uses dispath in the page to specify action to call reducer for data update. Of course, sometimes it is also necessary to specify actionAfter processing in dispathaction to reducer (such as network request). It is worth noting that every time dispath a action, Redux will traverse all registered reducer (reducers are often composed of multiple sub-reducers ), that is to say, all reducer will be called (this is the case from the performance and documentation in the project). The following is part of the reducer 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})
  }
}

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
}

The feeling after using

React, because it is the first time to really use Redux such state management Tools are used for development (although vuex is also used, but they are not based on the entire project), the development process becomes more controllable, the data flow direction becomes clear, and the coupling of each tool during development becomes lower. Overall This is a good attempt. However, I personally feel that no matter what technology is used, the complexity will definitely become higher as the business increases, and it will become more difficult to maintain a project that is stable, robust, and easy to maintain.

Finally, I have to lament the importance of good programming habits.

The above is the detailed content of Experience writing a website using React. For more information, please follow other related articles on the PHP Chinese website!