From the key to look react (no case version)

1. What is react?

react is a front-end framework h5, in this framework, to provide a picture page, request data, rendering the data set of services, using react technology stack, you can do a complete front-end project.

Field of the front end of the frame has three: vue react ng;

react is inside of Facebook, a javascript library. In May 2013 the open-source can be used to create a user interface.

2, a correct understanding react

React not mvc framework, it's just a library dedicated to only view

React is an idea, advocated "learn once, write anywhere", sub-web and native versions of React.js App of React Natvie

react generally refers to react , react.js , react.native , react is an idea, react.js react and react.native is a concrete manifestation of thought

React.js is to develop a webapp

Native REACT , referred to rn, to develop near native app. (Iso and android native app)

Technical react Stack: react.js + react-router + redux + es6 + webpack + fetch

React core idea:

Simple : only need to express the application at any one point in time should be long way, when the underlying data is changed, update React automatically handles all user interfaces. (Data driving DOM)

Declarative : React declarative paradigm, you can easily describe the application. (All using the form tag)

React Features

1, component 2, 3-way data flow, a virtual DOM 4, the state machine

Will react and vue comparison:

Same point

They are JavaScript UI framework, with its own technology stack
Componentization
virtual DOM
Data-driven DOM

difference

Template vs JSX
State management (state) vs object attributes (data)
Maintenance Team

3 JSX

In vue, a template grammar, REACT, there is no template syntax can be used js native or output jsx structural components.

JSX = J AVA S cript + X- ML, one construct React tag assembly within the class XML syntax. React can still work without the use of JSX, but using JSX can improve the readability of the components, it is recommended to use JSX.

Xml, is extensible markup language, extensible markup language. When we use react.js web development, and usually use html tags to build structures

The essence jsx

Any html element, can be fixed to the object to describe the structure js

JSX advantage

Simple, anyone familiar with XML-based developers can easily grasp JSX
More intuitive, readable
More semantic

Separation of concerns point, JSX way to ensure a clean label and business logic separated from

4, react in the list rendering

var book={react,vure,ng};

var newBook=book.map(item=><li>{item}</li>)

<ul>
   {newBOOK}
</ul>

 
复制代码

Use the map is a list of standard wording rendered react in

5, component

1, the so-called component, i.e. ** encapsulated with independent function UI parts.

The so-called independent functions have typically include:

Structure
Data (data and variations thereof)
Show

2, component-based thinking

React in a manner recommended to rethink the components constituting the UI, the UI on each function module is defined as independent components, and then the small components constituting the major components, or by a combination of nested manner, the final completion of the overall construction of the UI.

Benefits components: combinable, reusable, maintainable

6, the definition of component

React in, the assembly defined in three ways:

React.createClass
Use es6 of the class keyword, inherited React.Component components
Function definition directly stateless component

7, rendering and using components

Rendering components, generally refers to a component mounted onto the page in a dom node.

In this case, it is necessary to use ReactDOM.render method.

Format: ReactDOM.render (component instance object mount dom node)

among them:

Component instance of an object we can directly use the syntax jsx, for example,

Mount dom node, it must ensure that the use of native js way to get the dom node, you can use getElementById, getElementsByTagName, querySelector.

In one application, usually there is only one root node components, so usually only need to call one ReactDOM.render

8、state

react is a state machine, the state used to achieve state. View state for determining a state of each element, each React component can have its own state. React during development, when the core is to determine the appropriate status of each component, and then to manage the state. According to the state assembly to be rendered, the state once changed, the component is updated.

state of use

Defining the initial state, the method using getInitialState
** get status, use this.state. ** state name
Set state, using this.setState method

A. defined initial state

Use getInitialState method

In this method, must be used to return a return object, the object is defined in the state of the component.

B. Get Status

Use this.state. State name

In the current assembly, use this.state get all of the current state of the component.

C. Set status

Use this.setState method

Setting status, otherwise known as a modified state, special:

You must use this.setState method

Must be re-assigned to the state

9、props

Properties props represents, is used to achieve a parent-child communication components. Parent component is transmitted to the subassembly, and the data transfer methods can be

Set the default value of the property

Since Father Son when referring to component assembly, a transfer property age, therefore, default attribute values to be covered.

10, the life cycle of components

Components from creation, render to uninstall the whole complete cycle, that is, the life cycle of components. In a concrete manifestation of the life cycle of the components is that some hook function.

Hook function refers, provides developers an opportunity can write code. We can use the hook function life cycle, to achieve certain functions.

In react.js, the life cycle can be divided into three stages:

Mount stage
Update phase
Unloading phase

shouldComponentUpdate react is to optimize the performance of key points.

render both the mount stage, also update phase

11, virtual DOM

Virtual dom is made by first react.

Virtual DOM DOM is built on the basis of an abstraction layer, and any changes we made to the status of data will be automatically synchronized to virtual and efficient DOM, and finally batch synchronization to the DOM.

Virtual dom, specifically, is jsx, as follows

Reproduced in: https: //juejin.im/post/5d08b81ee51d454f73356d58

The use substantially react (schematic)