In-depth discussion of front-end framework react_javascript skills-js tutorial

This article will lead you to explore the front-end framework react, involving the front-end framework react related knowledge. If you are interested in the front-end framework react related knowledge, let's take a look at it. Abstract:

Recently, the company wants to develop an application nested in the app and considers using Facebook's react to develop the view. The following are the pitfalls I encountered during development and hope to help you.

Project address: https://github.com/baixuexiyang/react
Issue: https://github.com/baixuexiyang/react/issues

Welcome to star and fork!

React advantages:

• Just to express how long your application should look at any point in time, and then when the underlying data changes, React will automatically process all user interface updates.

• After data changes, React is similar in concept to clicking the "refresh" button, but only updates the changed part.

• React is about building reusable components, making separation of concerns easier.

Note:

1. Load the upper-case letters of a component, for example:
2. The render outermost layer of each component must have a package element.

3. this. props cannot be modified. this. state can be modified.

4. The page oclick event does not work in Safari in ios. onClick = {this. detail. bind (this, item)} requires other methods, such as jQuery binding event.

5. Convert string to html, dangerouslySetInnerHTML = {{__ html :''}}

6. getInitialState: called once before the component is mounted. The returned value is used as the initial value of this. state.

Getdefaproprops: called once when the component class is created, and the return value is cached. If the parent component does not specify a key in props, the corresponding attributes of the objects returned here will be merged to this. props (using the in detection attribute ).

This method is called before any instance is created, so it cannot depend on this. props. In addition, any complex objects returned by getdefaproprops () will be shared among instances, rather than each instance has a copy.

Component lifecycle:

ComponentWillMount:

Both the server side and the client side can be called only once and immediately before the initialization rendering is executed.

ComponentDidMount:

It is called once after initialization and rendering is executed, only valid on the client (not called on the server ).

ComponentWillReceiveProps:

It is called when the component receives a new props. This method is not called during initialization rendering.

ShouldComponentUpdate:

It is called before rendering when a new props or state is received. This method will not be called during initialization rendering, nor will it be used when the forceUpdate method is used.

If you confirm that the new props and state do not cause component update, false is returned here.

ComponentWillUpdate:

Call it immediately before receiving a new props or state. This method is not called during initialization rendering.

ComponentDidUpdate:

It is called immediately after the update of the component has been synchronized to the DOM. This method is not called during initialization rendering.

ComponentWillUnmount:

It is called immediately when the component is removed from the DOM.

Summary:

With react development, all html files are written in js files, so the development is not smooth. We recommend a chrome plug-in: React Developer Tools

There are some misunderstandings about React. Here we will summarize:

React is not a complete MVC framework. It can be considered as V (View) in MVC at most, and even React does not recognize the MVC development mode very much;
React's server-side Render capability can only be regarded as a icing on the cake, not its core starting point. In fact, React's official site hardly mentions its server-side applications;

Some people compare React with Web Component, but the two are not completely competitive. You can use React to develop a real Web Component;

React is not a new template language. JSX is just a representation and can work without JSX React.

The above is all about the react-related knowledge of the front-end framework. I hope you will like it.