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

This article mainly introduces the use of React technology related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have some gains after reading this article on the use of React technology, let's take a look at it.

What is react

We should know what it is before using a framework. Just like react, we know that it is a js framework, which we can use to write html pages. And we can abandon html and write it in pure js when we use it.

Second, why use react

Here are the benefits of using react that the editor is looking for:

1. Facilitate code reuse

When we write DOM in normal development, if there are multiple pages with the same module, then we need to copy all the relevant modules in each html file, but when we use react, we only need to write these modules as components, through the call.

2. Improve rendering efficiency

It is quite common to encounter changes and updates in development, so if we re-render the page, it will take a lot of effort and time to write it using html, but if we use React, we only need to solve this problem through encapsulation.

3. Easy to manage

Websites tend to become more complex during development, so page management becomes particularly important at this time. We still need to spend the right energy and time on code and architecture, not if we use react.

What react can't do for us

The reason why we use the react framework is to enable us to better manage and copy our code. If we want to write react components, we still need to know the basics of development, and we should follow the following two points when using react:

1, our own pages do not use html but need to be similar to jsx syntax, because react knowledge only improves our reusability.

2. Although we all write the css style by hand, we can use some open source related components.

4. Learn more about what react has done

For friends who have a front-end foundation, there are absolutely two factors that we see in the effect of web pages: html and css;, as long as the page has changed, then this will mean that our html and css have changed.

1. How to update the page by native developers

For this, when js uses vagrants as the host environment, our browser can provide js with DOM as the only interface for js operation documents. When we need to update the page when we do not use any framework, we must personally call the API provided by DOM to change the document, which will force us to be extremely inefficient.

2. How does react update the page

We all know that each component in react has a state object, which stores all the potentially changing data needed by the current component, and there is an one-to-one correspondence between the rendered html page and the data in the state. As long as we change the data in the state through the setState method, then the html also changes, and there is no need for us to modify the dom; ourselves. When using react, as long as we build the components according to the state, we only need to think about how to update the state.

The basic usage of react

We all know that the components of react are divided into two kinds of information: changing and immutable, and when we write the component, we need to analyze which properties are likely to change and which are immutable in the life cycle of the component. Then we can write the same part in html, and there are two sources of information for the changed part, as follows:

1. The status of the component

When we use react components in our development, we need to write state properties for our components. The purpose of our writing is to store the data needed by the current component, because when we need to change the state, we only need to call the this.setState () method of the current component, and the browser will automatically re-render the current component. Here is our example code:

Class Square extends React.Component {constructor () {super (); this.state = {value: null,};} render () {return (this.setState ({value:'X'})} > {this.state.value});}}

2. The status of the parent component

When we need to obtain data from multiple sub-components at the same time or when two components need to communicate with each other, we can promote the state data of the sub-components to their common parent components to save them. In this way, the parent component can then pass the state data to the child component through props. The following is the relevant example code:

/ / parent component renderSquare (I) {return (this.handleClick (I)} / >);} / / subcomponent class Square extends React.Component {render () {return (this.props.onClick ()} > {this.props.value});}}

VI. Redux

1. Why use redux

We generally do not use redux for small projects in development, because we all know that redux is a framework for managing front-end data, and redux is applied only when the application is very complex, the data source is complex, and the interaction is frequent.

2. Three principles of redux design

(1), single data

So what is single data? Generally speaking, it refers to the program we use about state, in which all the state is stored in a single data store, which is like a huge object tree.

(2), state read-only

For state, there is only the ability to read. The way to change state is to modify it through action.

(3) use pure functions to perform modifications

So how do we use pure functions to perform changes in development? Generally, we write state when we need to describe it. However, for readucer, it is a pure function, so for the interface of this function, it is our state and action attributes, and in the function we only need to return the corresponding state according to action, and there must be a return value.

3. Main Api

Some of the Api listed below are familiar to us:

Store=createStare (reducer)-- create a store.

State=store.getState () store.dispatch (action)-triggers the action, which is the only interface to change the state.

Store.subscribe (listener)-once the State changes, this function is automatically executed. As long as the update function of the View (for the React project, the component's render method or the setState method) is put into the listen, the automatic rendering of the View will be achieved.

4. Split of reducer

We can find this method of combineReducers in Redux because it is used to split Reducer. We only need to define the various sub-small Reducer functions, and then using this method, we can synthesize them into a large Reducer.

7. React-redux

For convenience in react, a react-redux; is encapsulated in react, but for react-redux, it is divided into two categories: all components are UI class and container class, and all data in UI component is obtained through props; container component is responsible for data and logic. We can use decorator mode to convert pure components into container group prices. The following three functions are mainly used here:

1. MapStateToProps (state,ownprops)

Establish a mapping from (external) state object to (UI component's) props object.

2. MapStateToProps (dispatch,ownProps)

Used to establish the mapping of store.dispatch methods to props objects.

3 、 connect

React-Redux provides a connect method for generating container components from UI components. It requires mapStateToProps and mapStateToProps as parameters. The example code is as follows:

Const VisibleTodoList = connect (mapStateToProps, mapDispatchToProps) (TodoList)

module

In the development, when we find that the nesting of components is relatively deep, it will be very troublesome for us to get state through inner components. At this time, we need to pass it layer by layer with the method of props property. The Proveder component solves this problem by putting the Provider component on the outermost layer, as long as you pass store on the Proveder, so that all sub-components can get the state, as follows:

Render (, document.getElementById ('root'))

VIII. React-router

In the development we need to use not only one page, and in multiple pages we also need code to enable users to switch directly in each page, then for each page switch, we need the react-route architecture, because in this architecture there is a mechanism to switch between multiple pages and components.

So for the common components of react-router architecture, there are the following:

Provide declarative, accessible navigation links for your application; attribute to.

The most basic responsibility is to render some UI; attributes path, component, exact exactly when its path attribute matches a location.

Render only the first route hit and render the route directly, the attribute to.

This is the end of the article on "what are the techniques for the use of React?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the technologies for the use of React". If you want to learn more, you are welcome to follow the industry information channel.

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.