React Self-Study note summary uninterrupted update

React

React is a set of frameworks maintained by Facfbook and referenced to Instagram

React just we are familiar with the V layer in the MVC box, just a frame at the view level, only two half API (Createclass,createelement,render)

The difference between react and angular

React: Good performance, one-way data binding, not a complete framework.

Angular: Poor performance, bidirectional data binding, is a complete set of frameworks

https://www.zhihu.com/question/23444167

Why is react's performance better?

Because react did two points of optimization.

1. Performance optimization at render time

React is creating a virtual DOM, which is not a DOM element in a real page, it is essentially a JS object that stores the information on the DOM with a JS object, so it's much smaller than the real DOM because he only records some of the necessary information.

Operating a virtual DOM requires much less performance than manipulating a real DOM, and developing a Web application on the front-end differs from developing a website where Web applications are usually a single page, so that each interaction involves a variety of DOM operations, so uncontrolled manipulation of the DOM seriously affects the performance of the page. But we just manipulate the virtual DOM to reduce the performance cost and render the view to the page when necessary.

2. Optimization at the time of development

React's development philosophy is to create a virtual DOM, and the virtual DOM is a JS object, it is not based on a certain end, such as the real DOM may need a browser environment, it is web-based, all the components developed through react can be used on any platform, for example, server-side, web-side , iOS side, Android side

Referencing a virtual DOM to a different end requires a different plug-in, and then calls a different render method.

Learning react

Meet react

1, createelement () is the method used to create the virtual DOM, he has some parameters

The first parameter represents: the name of the virtual DOM, usually some tag names, such as Div a p span

The second parameter represents: the properties of the virtual DOM, such as: ClassName ID title value

Start with the third argument: represents the child node of the virtual DOM.

2. Render () is the method used to render the virtual DOM to the page

The first parameter represents: virtual dom ' element

The second parameter represents: the true DOM element

The third parameter represents: a callback function

----------------------------------------------------------------------------------------------------

Write a non-JSX compile-time virtual DOM program

--------------------------------------------------------------------------------------------------------------- ---

Component

1 What does the component do?

If a virtual DOM is reused multiple times, we typically encapsulate it in a build, typically using a component to encapsulate a set of virtual DOM, a set of virtual Dom that is often called a virtual dom tree.

2 How do I create a component?

Createclass () is the method that creates the component, the component name needs to be capitalized, the parameter is an object, and the properties and methods in the object are the description of the component:

The 1:render property () method, which is the output of the virtual Dom in the component, so we define the virtual DOM in render () and return a virtual DOM tree.

Write a component program.

JSX Syntax Reference

1. Why reference JSX syntax?

Resolves an issue where the cost of creating virtual DOM is too high.

2. What is JSX syntax?

Simply put, JSX syntax allows us to write XHTML in JS.

3. How do I refer to jsx syntax?

1. Referencing a library file browser.min.js or browser.js.
2. The Type property of the script tag in writing react is Text/babel

Programming of JSX

interpolation symbols

1. What is an interpolation symbol?

The interpolation symbol is simply {}, and writing a comment in the JSX syntax needs to be written in an interpolation symbol.

Component's Properties

1. Props Property

What is the 1.props attribute?

As with HTML to add a class to the tag, for a fully consistent unified component their warrior style is exactly the same, giving one of the most expensive attributes, at which point the result of this component may be different, so react proposed the concept of component properties.

2. How do I add the props property?

Adding properties to a component in JSX is identical to adding properties to HTML, except that the react component can perform interpolation (that is, you can add data from JS to the component)

1. State Property

1 What is a stateless component?

If the build and render to the page will not be changed later, that is, the component is immutable, such components we just need to add some properties at the beginning of the creation of the CCTV behavior to complete control, such components will never change, we call it a stateless component (stateless component), Simply put, it is not interacting with the user, or sending an asynchronous request.

2. What is a stateful component?

If a build is created with different behaviors depending on the user's interactions (such as changing styles), this type of component is called stateful, and the build is in that state and is determined by the user.

What is the 3.state attribute?

A state is typically maintained inside a component, which is

Style of the component

1. The value of Style style property can only be object, cannot add string value for Style

2.font-size This type of camel-like

3.CSS3 prefix attribute the first letter to capitalize

4. Define a virtual DOM in the component we all use objects, and variables can be used, and expressions can be used in variables.

React Self-Study note summary uninterrupted update