An in-depth discussion of front-end framework react_javascript techniques

Summary:

Recently, the company is going to make an application nested in the app, and is considering using Facebook’s react to develop the view, so I did some research. The following are the pitfalls I encountered during development. I hope it can help you.

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

Welcome to star and fork!

React advantages:

•Just express what your application should look like at any point in time, and when the underlying data changes, React will automatically handle all user interface updates.

•After the data changes, React is conceptually similar to clicking the "Refresh" button, but only the changed parts will be updated.

•React is all about building reusable components, making code reuse, testing, and separation of concerns easier.

Note:

1. Capitalize the first letter of the loaded component, for example:
2. The outermost layer of render of each component must have a wrapping element

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

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

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

6.getInitialState: Called once before the component is mounted. The return value will be used as the initial value of this.state.

getDefaultProps: Called once when the component class is created, and then the return value is cached. If the parent component does not specify a key in props, the corresponding property in the object returned here will be merged into this.props (use in to detect the property).

This method is called before any instance is created and therefore cannot rely on this.props. Additionally, any complex objects returned by getDefaultProps() will be shared between instances, rather than having a copy per instance.

Component life cycle:

componentWillMount：

Both the server and the client are called only once, immediately before the initial rendering execution.

componentDidMount:

Called once immediately after the initial rendering execution, it is only valid on the client side (it will not be called on the server side).

componentWillReceiveProps:

Called when the component receives new props. This method will not be called during initial rendering.

shouldComponentUpdate:

Called after receiving new props or state before rendering. This method will not be called when initializing rendering, nor when using the forceUpdate method.

If it is determined that the new props and state will not cause the component to be updated, false should be returned here.

componentWillUpdate:

Called immediately before receiving new props or state. This method will not be called during initial rendering.

componentDidUpdate:

Called immediately after the component’s updates have been synchronized to the DOM. This method will not be called when initializing rendering.

componentWillUnmount：

Called immediately when the component is removed from the DOM.

Summary:

Using react to develop, all html is written in js files, so the development is not very smooth. Recommend a chrome plug-in: React Developer Tools

There are some misunderstandings about React. Let me summarize them here:

React is not a complete MVC framework. It can be considered as the V (View) in MVC at most. Even React does not fully recognize the MVC development model;
React's server-side Render capability can only be regarded as an icing on the cake, not its core starting point. In fact, the official React website barely mentions its application on the server side;

Some people compare React and 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. React can work without JSX.

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