Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to achieve human flesh two-way compilation in front-end coding, the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

How to realize two-way compilation of human flesh in front-end coding

React+flux is one of the most popular front-end solutions at present, but there are many flux slots, such as store is chaotic and cumbersome to use, so there are many third-party architectures based on flux optimization.

Some people have counted the current mainstream flux implementation schemes, those who are interested can see here: Which Flux implementation should I use?

Redux is currently one of the most star solutions on github, which is completely independent of react, which means that this concept can be applied to other component solutions as an architectural layer. At the same time, officials also provide react-redux libraries to help developers develop quickly using react+redux directly.

Personal understanding of its main characteristics is reflected in the following points:

Forcing the use of a global store,store provides only a few simple api (actually four), such as subscribe/dispatch (subscription, publish), getState,replaceReducer.

Store is responsible for maintaining a unique object called the state tree, where state stores all the data needed by the application.

Store and the top-level component are bound using the connect method, and a dispatch method is assigned to props, which can be this.props.dispatch (action) directly inside the component. To put it simply, the components in flux and the unbind/bind link of store are removed. When the state changes, the components is updated automatically, without manual operation.

The applyMiddleware method is provided for asynchronous action and the ability to add middleware, such as printing logs to track all state changes of the application.

The operation on the global data state is done by multiple reducer. Each reducer is a pure function that takes two arguments state and action and returns the processed state. This is similar to the operation of pipes.

Then we can answer the question of the title, that is, how to achieve human flesh two-way editing (zi) translation (can) in front-end coding.

In fact, it is using coffee to write react+redux applications.

Let's write a simple hello world to play with.

View part

This part has nothing to do with redux/flux, pure react implementation, using jsx, the render part of the code looks like this:

Render:function () {return (timer: {interval} {title} click it. )}

So how do you write this code using coffee? We need to compile jsx into js code like this first, please note that it is compiled with the brain:

Render:function () {return React.createElement ('div',null, React.createElement (' div', {className:'timer'}, 'timer' + this.props.interval), React.createElement ('div',null,this.props.title), React.createElement (' input', {ref:'input'}), React.createElement ('button',null,'click it.');}

The js code is then decompiled to coffee.

Here we can use $instead of React.createElement to simplify the code (we can finally use the pit of jQuery). Thanks to the syntax of coffee, React.DOM can be implemented in a simpler way:

{div,input,button,span,h2,h3,h4} = React.DOM

Instead of putting the render section alone, look directly at the complete code:

{Component,PropTypes} = React = require 'react' $= React.createElement {div,input,button} = React.DOM class App extends Component clickHandle:- > dom = this.refs.input.getDOMNode () this.props.actions.change (dom.value) dom.value =' 'render:- > {title,interval} = this.props div className:'timer', div null 'timer:'+ interval div null,title input ref:'input' button onClick:@clickHandle.bind (this), 'click it.' App.propTypes = title: PropTypes.string actions: PropTypes.object interval: PropTypes.number module.exports = App

If you can see and understand this coffee and automatically compile it into js code and then jsx code in your brain, congratulations.

Connect store

The main function of this link is to realize the binding between view layer and store layer. When the store data changes, the view can be updated automatically.

Here you need to create a store using the createStore method provided by redux, which takes two parameters, reducer and the initial state (application initial data).

The code for store.coffee is as follows:

{createStore} = require 'redux' reducers = require'. / reducers' # reducer state = require'. / state' # Application initial data module.exports = createStore reducers,state

Then we bind store and App at the entry of the application, which uses the react- redux library provided officially by redux.

{Provider,connect} = require 'react-redux' store = require'. / store' $= React.createElement mapState = (state)-> state rootComponent = $Provider,store:store,- > $connect (mapState) (App) React.render rootComponent,document.body

Some people may ask, who are mapState and Provider?

MapState provides a selector-like effect, and when an application is large, you can choose to connect a portion of the state data to the component. We don't need it here, just go back to state itself.

Provider is a specially processed react component, as described in the official document:

This makes our store instance available to the components below. Internally, this is done via React undocumented "context" feature, but it's not exposed directly in the API so don't worry about it.

So, just feel free to use it.

The connect method is used to connect state and App, and then you can use the this.props.dispatch () method inside the App component.

Add action and reducer

* We add a button click event and timer to trigger the action and write the corresponding reducer to process the data.

This.props.actions.change (dom.value) has been added inside the previous App, so take a look at the action.coffee code:

Module.exports = change: (title)-> type:'change' title: title timer: (interval)-> type:'timer' interval:interval

Look at reducer.coffee again.

Module.exports = (state,action)-> switch action.type when 'change' Object.assign {}, state,title:'hello' + action.title when 'timer' Object.assign {}, state,interval:action.interval else state

At this point, the code is finished.

Something else.

The idea of only one middleware is introduced here, and the principles of other features such as asynchronous action or dispatch-promise are basically similar:

Dispatch = store.dispatch store.dispatch = (action)-> console.log action # print every action dispatch.apply store,arguments

Due to time constraints, some features and design principles of redux have not been shown. I will talk about it separately later. The complete project code can be read here for students who are interested: please click on me, or talk to me directly.

The project uses fis3 as a build tool, and you can use fis3 release to view the results locally.

On how to achieve human flesh two-way compilation in the front-end coding is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.