React.js starting from zero (vii) REACT (virtual) DOM

React elements

The most important type of React is ReactElement . It has four properties: type , props , key and ref . It has no method, and there is nothing on the prototype.

You can React.createElement create an instance of the type by creating it.

var root = React.createElement(‘div‘);

In order to render a new tree structure into the DOM, you create several ReactElement , then pass it React.render as the first parameter, and set the second parameter to a regular Dom 元素 ( HTMLElement or SVGElement ). Do not confuse ReactElement instances and DOM 元素 instances. An ReactElement instance is a lightweight, stateless, immutable, virtual representation of the DOM 元素 . is a virtual DOM.

React.render(root, document.body);

To add an attribute to a DOM element, pass the Property object as the second parameter React.render , and the handle level is passed as the third argument React.render .

VarChild=react. Createelement ( ' li ' null ' Text Content ' ); var root = react. Createelement ( ' ul ' { Classname:  ' my-list ' }, childreact. Render (rootdocument. Body               

If you use the React JSX syntax, these ReactElement instances are created automatically. Therefore, the following code is equivalent:

var root = <ul className="my-list"> <li>Text Content</li> </ul>;React.render(root, document.body);

Factory

A ReactElement factory is simply a function that generates a special type attribute ReactElement . React has a built-in helper method for creating factory functions. In fact, that's the way it is:

function createFactory(type){ return React.createElement.bind(null, type);}

The function can create a convenient short function, not a total call React.createElement(‘div‘) .

var div = React.createFactory(‘div‘);var root = div({ className: ‘my-div‘ });React.render(root, document.body);

React has built-in factory functions for commonly used HTML tags:

var root = React.DOM.ul({ className: ‘my-list‘ }, React.DOM.li(null, ‘Text Content‘) );

If you use the JSX syntax, you do not need a factory function. JSX has provided a handy short function to create an ReactElement instance.

React node

One ReactNode can be:

• ReactElement
• string(aka ReactText )
• number(aka ReactText )
• ReactNodeInstance Array (aka ReactFragment )

These are used as ReactElement properties of other instances to represent children. In fact, they create an ReactElement instance tree. (These is used as properties of other ReactElement s to represent children. Effectively they create a tree of ReactElement s.)

React components

With React development, you can use only ReactElement instances, but to take full advantage of React, you'll use it ReactComponent to encapsulate the stateful components.

A ReactComponent class is a simple JavaScript class (or "constructor").

var MyComponent = React.createClass({ render: function() { ... }});

When the constructor is called, an object should be returned with at least one render method. The object points to an ReactComponent instance.

var component = new MyComponent(props); // never do this

Unless you are testing, you normally do not call the constructor yourself. React help you call this function.

Instead, ReactComponent pass the class to createElement it and you get an ReactElement instance.

var element = React.createElement(MyComponent);

or use JSX:

var element = <MyComponent />;

When the instance is passed React.render , React will call the constructor and then create and return a ReactComponent .

var component = React.render(element, document.body);

If you always call with the same ReactElement type and the same DOM 元素 container React.render , you will always return the same instance. The instance is stateful.

var componenta = react.render (<mycomponent /> document. Body); var componentb = react.render (<mycomponent /> document. Body); componenta === componentb//true               

This is why you should not create your own instance. Instead, ReactElement it is a virtual one before it is created ReactComponent . The old ReactElement and the new can be compared, thus deciding whether to create a new ReactComponent instance or to reuse an existing instance.

ReactComponentrendermethod should return another ReactElement , which allows the component to be assembled. (The render method of a is ReactComponent expected to return another ReactElement . This allows these is composed. Ultimately the render resolves into with ReactElement a string tag which instantiates a DOM Element instance and inserts it into t He document.)

Formal definition of type

Entry points (Entry point)

React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

Nodes and elements (Nodes and Elements)

type ReactNode = ReactElement | ReactFragment | ReactText;type ReactElement = ReactComponentElement | ReactDOMElement;type ReactDOMElement = {  type : string,  props : {    children : ReactNodeList,    className : string,    etc.  },  key : string | boolean | number | null,  ref : string | null};type ReactComponentElement<TProps> = {  type : ReactClass<TProps>,  props : TProps,  key : string | boolean | number | null,  ref : string | null};type ReactFragment = Array<ReactNode | ReactEmpty>;type ReactNodeList = ReactNode | ReactEmpty;type ReactText = string | number;type ReactEmpty = null | undefined | boolean;

Classes and Components (Classes and component)

type ReactClass<TProps> = (TProps) => ReactComponent<TProps>;type ReactComponent<TProps> = {  props : TProps,  render : () => ReactElement};

React.js starting from zero (vii) REACT (virtual) DOM