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 websitevue
Development, because the development progress of the project was not so urgent some time ago, there was some free time. And never usedReact
I have been worried about it, so I simply use it.React
A 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.React
If you do not useReduce
Then 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
.React
Some 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, readReact
This document uses a large number of examples to describe how to useReact
For 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
,props
Design, inX
ComponentsY
,Z
Two components, assumingY
The component has an input box, whileZ
Components may need to be usedY
The 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
,X
This design is obviously not in linestate
Designed 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-router
The 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 (vue
In contrast), you still need to read the document carefully, so as not to waste time solving problems during development, suchIndexRoute
Invue
In 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-redux
A brief introduction is made to Redux in terms of representation.Redux
This reduces the time spent thinking during development and avoids some possible problems. Some problems are also found during use.Redux
A large numberdispatch
It 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 directedreducer
Initiateaction
Data shared by multiple components is delivered toprops
To update data, useprops
Property to call the method passed in by the parent component to pass up the command, usedispath
To specifyaction
To callreducer
To update data, you must alsoaction
After processing indispath
action
Toreducer
(Such as network requests ). It is worth noting that every timedispath
Oneaction
,Redux
All registeredreducer
(CER is usually composed of multiple subreducers), that is, allreducer
Will be called (from the project's performance and documentation), the following is used by the revised website.reducer
Some 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 useReact
After the feeling, because the first real useRedux
Such 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.