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

This article introduces you how to deeply understand react, the content is very detailed, interested friends can use for reference, I hope it can be helpful to you.

Understand the concepts of ReactElement and ReactClass

First, let's understand two concepts:

ReactElement

A literal object that describes a DOM node or component instance. It contains some information, including component type type and property props. It's like an element (virtual node) that describes a DOM node. They can be created through React.createElement methods or jsx writing

There are two categories: DOM Element and Component Elements:

DOM Elements

When the type attribute of a node is a string, it represents a normal node, such as div,span

{type: 'button', props: {className:' button button-blue', children: {type: 'baked, props: {children:' OK'}

Component Elements

When the type property of a node is a function or a class, it represents a custom node

Class Button extends React.Component {render () {const {children, color} = this.props; return {type: 'button', props: {className:' button button-' + color, children: {type: 'baked, props: {children: children} }} / / Component Elements {type: Button, props: {color: 'blue', children:' OK'}}

ReactClass

ReactClass is the Component component (class or function) that we usually write, such as the Button class above. Calling the render method after ReactClass is instantiated returns DOM Element.

React rendering proc

Process understanding:

/ / element is Component Elements ReactDOM.render ({type: Form, props: {isSubmitted: false, buttonText: 'OKTV'}}, document.getElementById ('root'))

Call the React.render method to render our element root virtual node into the container element. Element can be a string text element, or it can be ReactElement (divided into DOM Elements, Component Elements) as described above.

Instantiate ReactDOMTextComponent, ReactDOMComponent, and ReactCompositeComponent classes according to the type of element. These classes are used to manage ReactElement, convert different ReactElement into DOM (mountComponent method), update DOM (receiveComponent method, updateComponent method, described below), and so on.

After the ReactCompositeComponent instance calls the mountComponent method, the render method is called internally and DOM Elements is returned. Then recurse to step 2 as shown in the figure.

React update mechanism

Each type of element should handle its own updates:

The update of the custom element is mainly to update the node out of render, and do the corresponding component of the node out of render to manage the update.

The update of the text node is simple, updating the copy directly.

The update of the basic elements of the browser is divided into two parts:

The first is to update the attributes, comparing the differences before and after the attributes, local updates. And handle special properties, such as event binding.

Then there is the update of the child node. the main purpose of the child node update is to find out the difference object, and the above shouldUpdateReactComponent will be used to judge when finding the difference object. If it can be updated directly, the update of the child node will be called recursively, so it will also find the difference object recursively. Delete previous objects or add new objects that cannot be updated directly. Then manipulate the dom element (position change, delete, add, etc.) according to the difference object.

* * step: call this.setState

ReactClass.prototype.setState = function (newState) {/ / this._reactInternalInstance is an instance of ReactCompositeComponent this._reactInternalInstance.receiveComponent (null, newState);}

Step 2: call the internal receiveComponent method

This is mainly divided into three cases, text elements, basic elements, custom elements.

Custom elements:

ReceiveComponent method source code

/ / receiveComponent method ReactCompositeComponent.prototype.receiveComponent = function (nextElement, transaction, nextContext) {var prevElement = this._currentElement; var prevContext = this._context; this._pendingElement = null; this.updateComponent (transaction, prevElement, nextElement, prevContext, nextContext);}

UpdateComponent method source code

/ / updateComponent method ReactCompositeComponent.prototype.updateComponent = function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {/ / abbreviated. / / not state update but props update if (prevParentElement! = = nextParentElement) {willReceive = true;} if (willReceive & & inst.componentWillReceiveProps) {/ / call lifecycle componentWillReceiveProps method} / / whether to update element if (inst.shouldComponentUpdate) {/ / if shouldComponentUpdate method shouldUpdate = inst.shouldComponentUpdate (nextProps, nextState, nextContext) } else {if (this._compositeType = = CompositeTypes.PureClass) {/ / if it is PureClass, shallow comparison props and state shouldUpdate =! shallowEqual (prevProps, nextProps) | |! shallowEqual (inst.state, nextState) } if (shouldUpdate) {/ / update elements this._performComponentUpdate (nextParentElement, nextProps, nextState, nextContext, transaction, nextUnmaskedContext);} else {/ / do not update elements, but still set props and state this._currentElement = nextParentElement; this._context = nextUnmaskedContext Inst.props = nextProps; inst.state = nextState; inst.context = nextContext;} / /. }

Internal _ performComponentUpdate method source code

Function shouldUpdateReactComponent (prevElement, nextElement) {var prevEmpty = prevElement = null | | prevElement = false; var nextEmpty = nextElement = null | | nextElement = false; if (prevEmpty | | nextEmpty) {return prevEmpty = nextEmpty;} var prevType = typeof prevElement; var nextType = typeof nextElement If (prevType = = 'string' | | prevType = =' number') {/ / if the previous ReactElement object type is a string or number, and the new ReactElement object type is also a string or number, it needs to be updated, and the new ReactElement object type is an object, so it should not be updated and replaced directly. Return (nextType = = 'string' | | nextType =' number');} else {/ / if the previous ReactElement object type is an object and the new ReactElement object type is also an object, and the tag type and key value are the same, you need to update the return (nextType = 'object' & & prevElement.type = = nextElement.type & & prevElement.key = nextElement.key);}}

Text element:

ReceiveComponent method source code

ReactDOMTextComponent.prototype.receiveComponent (nextText, transaction) {/ / compare with previously saved strings if (nextText! = = this._currentElement) {this._currentElement = nextText; var nextStringText =''+ nextText; if (nextStringText! = = this._stringText) {this._stringText = nextStringText; var commentNodes = this.getHostNode () / / replace text element DOMChildrenOperations.replaceDelimitedText (commentNodes [0], commentNodes [1], nextStringText);}

Basic elements:

ReceiveComponent method source code

ReactDOMComponent.prototype.receiveComponent = function (nextElement, transaction, context) {var prevElement = this._currentElement; this._currentElement = nextElement; this.updateComponent (transaction, prevElement, nextElement, context);}

UpdateComponent method source code

ReactDOMComponent.prototype.updateComponent = function (transaction, prevElement, nextElement, context) {/ /. / / need to update attributes this._updateDOMProperties (lastProps, nextProps, transaction, isCustomComponentTag) separately; / / update child node this._updateDOMChildren (lastProps, nextProps, transaction, context); / /. }

The diff algorithm is called internally by the this._updateDOMChildren method, see the next section.

React Diff algorithm

Diff algorithm source code

_ updateChildren: function (nextNestedChildrenElements, transaction, context) {var prevChildren = this._renderedChildren; var removedNodes = {}; var mountImages = []; / / get a new child element array var nextChildren = this._reconcilerUpdateChildren (prevChildren, nextNestedChildrenElements, mountImages, removedNodes, transaction, context); if (! nextChildren & &! prevChildren) {return } var updates = null; var name; var nextIndex = 0; var lastIndex = 0; var nextMountIndex = 0; var lastPlacedNode = null; for (name in nextChildren) {if (! nextChildren.hasOwnProperty (name)) {continue;} var prevChild = prevChildren & & prevChildren [name]; var nextChild = nextChildren [name] If (prevChild = nextChild) {/ / the same reference indicates that the same component is used, so we need to move / / move the existing child node / / NOTICE: here we decide whether to move updates = enqueue (updates, this.moveChild (prevChild, lastPlacedNode, nextIndex, lastIndex) based on nextIndex and lastIndex). / update lastIndex lastIndex = Math.max (prevChild._mountIndex, lastIndex); / / update the .mountIndex property of component prevChild._mountIndex = nextIndex;} else {if (prevChild) {/ / Update lastIndex lastIndex = Math.max (prevChild._mountIndex, lastIndex) } / / add a new child node at the specified location updates = enqueue (updates, this._mountChildAtIndex (nextChild, mountImages [nextMountIndex], lastPlacedNode, nextIndex, transaction, context)) NextMountIndex++;} / / Update nextIndex nextIndex++; lastPlacedNode = ReactReconciler.getHostNode (nextChild) } / / remove the old child node that does not exist, and the old child node for (name in removedNodes) {if (removedNodes.hasOwnProperty (name)) {updates = enqueue (updates, this._unmountChild (prevChildren [name], removedNodes [name]));}

Advantages and Summary of react

Advantages

Virtual node. In the case of UI, there is no need to update the view immediately, but to generate a virtual DOM and render it uniformly.

Component mechanism. Independent management of each component, layers of nesting, do not affect each other, react internal rendering function.

Differential algorithm. According to the key value of the basic element, determine whether to recursively update the child node, or delete the old node and add a new node.

To make better use of the advantages of react's virtual DOM,diff algorithm, we need to correctly optimize and organize react pages. For example, decompose the ReactElement node of a page render into multiple components. Manually add shouldComponentUpdate to the components that need to be optimized to avoid unwanted re-render.

On how to in-depth understanding of react to share 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.