What do you think after you use React to revise your website?

What do you think after you use React to revise your website?

Article reprinted: http://www.jianshu.com/p/8f74cfb146f7

The website is a work designed for graduation. The purpose of developing this website is to record some notes and aggregate some information. It is also a piece of static space in the online world, here are some technical ideas and practices.

Initial front-end use of the websitevueDevelopment, because the development progress of the project was not so urgent some time ago, there was some free time. And never usedReactI have been worried about it, so I simply use it.ReactA front-end reconstruction was performed.

To learn a new technology, you must read the relevant documents. As a single page application, front-end routing is of course indispensable.ReactIf you do not useReduceThen I felt that I could not play its role (although they do not have any necessary relationship ). So here we usereact,react-router,react-redux.ReactSome of the experiences in development are lucky to be seen by you. If something is wrong, I hope to point out that if you are accidentally brought into the trap, I am not responsible for it.

First, readReactThis document uses a large number of examples to describe how to useReactFor example, how to designstate,props, How to communicate between components, how to design components, etc. Although the document has been described in detail, it often requires real practices to discover its advantages. For examplestate,propsDesign, inXComponentsY,ZTwo components, assumingYThe component has an input box, whileZComponents may need to be usedYThe input values of components are changed. Of course, it is not impossible to write them together. However, considering the reuse of components, single functions, and other factors, it is reasonable to split them, which component should this value be stored? The following two components areY,XThis design is obviously not in linestateDesigned to have too many redundant parts.

class InputComponent extends Component {  constructor () {    super()    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)}/>  }}

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

It may seem better to use the following statement:

Class InputComponent extends Component {render () {let {val, inputChange} = this. props // The val here is not mandatory, but when a value comes from a non-input control, such as an editable div, each time ace executes the render function, the original input value is cleared. Return <input value = {val} onChange = {inputChange}/> }}

class ParentComponent extends Component {  constructor () {    super()    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>    )  }}

react-routerThe basic requirements of frontend routing are provided. You can find the required functions in the project document. The basic configurations are similar to those of other frameworks, but the usage of many APIS is indeed quite different (vueIn contrast), you still need to read the document carefully, so as not to waste time solving problems during development, suchIndexRouteInvueIn the vro''Such an empty character is used as the defaultUI.

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 made to Redux in terms of representation.ReduxThis reduces the time spent thinking during development and avoids some possible problems. Some problems are also found during use.ReduxA large numberdispatchIt is also worth thinking about how to prevent the project from becoming difficult to maintain after the business becomes complex and huge in components. Use Page + component development in a revised website. One page indicates the highest level of components except the following components. Multiple components are available, and only the pages can be directedreducerInitiateactionData shared by multiple components is delivered topropsTo update data, usepropsProperty to call the method passed in by the parent component to pass up the command, usedispathTo specifyactionTo callreducerTo update data, you must alsoactionAfter processing indispathactionToreducer(Such as network requests ). It is worth noting that every timedispathOneaction,ReduxAll registeredreducer(CER is usually composed of multiple subreducers), that is, allreducerWill be called (from the project's performance and documentation), the following is used by the revised website.reducerSome code.

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}

Just useReactAfter the feeling, because the first real useReduxSuch a status management tool for development (although vuex is also used, but not based on the entire project), the development process becomes more controllable and the data flow becomes clearer, in development, the coupling of various tools has also become lower. In general, this is a good attempt. However, I personally think that no matter what technology is used, the complexity will become higher as the business increases, but it will become more difficult to maintain a stable, robust, and easy-to-maintain project.

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