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

This article mainly introduces the relevant knowledge of "what are the relevant knowledge points of React". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope this article "what are the relevant knowledge points of React" can help you solve the problem.

The relationship between React and traditional MVC

Lightweight view layer library! A JavaScript library for building user interfaces

React is not a complete MVC framework, at most it can be thought of as the V (View) in MVC, and even React does not very much recognize the MVC development model; React builds the library of page UI. It can be simply understood that React divides the interface into separate pieces, each of which is a component, and these components can be combined and nested to become our page.

The embodiment of the High performance of React: virtual DOM

The principle of React high performance:

In Web development, we always need to reflect the changed data to UI in real time, so we need to operate on DOM. Complex or frequent DOM operations are usually the cause of performance bottlenecks (how to perform high-performance complex DOM operations is usually an important indicator of the skills of a front-end developer).

For this reason, React introduces the mechanism of virtual DOM (Virtual DOM): a set of DOM API is implemented with Javascript on the browser side. When developing based on React, all DOM construction is carried out through virtual DOM. Whenever the data changes, React will rebuild the entire DOM tree, and then React will compare the current entire DOM tree with the last DOM tree to get the difference of DOM structure, and then only the parts that need to change are updated by the actual browser DOM. And React can batch the refresh of the virtual DOM, and the two data changes in an event cycle (Event Loop) will be merged, for example, if you continuously change the node content from A muri B to B, then from B to A UI without any change, and if you control it manually, this logic is usually extremely complex.

Although it is necessary to construct a complete virtual DOM tree each time, because the virtual DOM is in-memory data, the performance is extremely high, and only the Diff score is used to operate the actual DOM, so the purpose of improving performance can be achieved. In this way, while ensuring performance, developers will no longer need to pay attention to how a data change is updated to one or more specific DOM elements, but only care about how the entire interface is Render in any one data state.

React Fiber:

A core react algorithm released after react 16, React Fiber is a reimplementation of the core algorithm (according to the official website). The diff algorithm was used before.

In previous React, the update process was synchronous, which could cause performance problems.

When React decides to load or update the component tree, it does a lot of things, such as calling the lifecycle functions of each component, calculating and comparing Virtual DOM, and finally updating the DOM tree. The whole process is synchronized, that is, as long as a load or update process starts, it will not be interrupted. Because of the single-threaded nature of JavaScript, stutters will occur if each synchronization task takes too long when the component tree is large.

The method of React Fiber is actually very simple-slicing. Divide a time-consuming task into many small pieces, each running time is very short, although the total time is still very long, but after each small piece of execution, give other tasks a chance to execute, so that the only thread will not be monopolized, other tasks still have a chance to run.

Characteristics and advantages of React

1. Virtual DOM

The way we used to operate dom is through document.getElementById (). This process actually reads the dom structure of html, converts the structure into variables, and then operates.

On the other hand, reactjs defines a set of dom model in the form of variables, and all operations and conversions are directly in the variables, which reduces the operation of the real dom, the performance is really quite high, and is essentially different from the mainstream MVC framework, and does not deal with dom.

2. Component system

The core idea of react is to treat any area or element of a page as a component component.

So what are components?

A component refers to an aggregate that contains html, css, js and image elements at the same time.

The core of developing with react is to split the page into several components, and css, js and image are coupled in one component of react, which subverts the traditional way of the past.

3. Unidirectional data flow

In fact, the core content of reactjs is data binding. The so-called data binding means that as long as some server-side data and front-end pages are bound, developers only focus on the implementation of the business.

4. JSX syntax

In vue, we use the render function to build the dom structure of components with high performance, because the process of finding and compiling templates is omitted, but when the structure is created by createElement in render, the code is less readable and more complex. At this time, we can use jsx syntax to create dom in render to solve this problem, but only if we need to use tools to compile jsx.

Write the first react application

React development requires the introduction of multiple dependent files: react.js, react-dom.js, development version and production version, respectively, which have been installed for us in create-react-app. Empty the src directory under the project directory created by CRA, and then recreate an index.js. Write the following code:

/ / React was introduced from the package of react. As long as you want to write React.js components, you must introduce React, because there is a syntax in react called JSX, we will talk about JSX later, to write JSX, we must introduce Reactimport React from 'react'// ReactDOM to help us render the React components to the page, there is no other use. It was introduced from react-dom, not from react. There is a render method in import ReactDOM from 'react-dom'// ReactDOM that renders the component and constructs the DOM tree, then inserts the ReactDOM.render into a specific element on the page (/ / it's strange here, it's not a string, it looks like pure HTML code is written in JavaScript code. Is there a grammatical error? This is not legal JavaScript code, and the syntax for "tags written in JavaScript" is called JSX- JavaScript XML. Welcome to the world of React, / / where to document.getElementById ('root'))

Elements and components

If you have too much code, you can't write it in the render method all the time, so you need to bring up the code inside and define a variable, like this:

Import React from 'react'import ReactDOM from' react-dom'// is not used to it again? This is using JSX to define the react element const app = Welcome to the world of React ReactDOM.render (

App

Document.getElementById ('root'))

Functional component

Since the element has no way to pass parameters, we need to change the previously defined variable to a method to return an element:

Import React from 'react'import ReactDOM from' react-dom'// pays special attention to the writing here. If you want to write js expressions in JSX (only expressions, not flow control), you need to add {}, including comments, and you can nest const app = (props) = > Welcome to the world ReactDOM.render of {props.name}.

App ({

Name: 'react'

})

Document.getElementById ('root'))

The method we define here is actually the first way react defines components-defining functional components, which are also stateless components. But this way of writing is not in line with the style of react's jsx, and a better way is to modify it in the following ways

Import React from 'react'import ReactDOM from' react-dom'const App = (props) = > Welcome to the world of {props.name} ReactDOM.render (

/ / the calling method of React component

Document.getElementById ('root'))

Such a complete functional component is defined. But be careful! Be careful! Be careful! The component name must be capitalized, or an error will be reported.

Class component

The addition of ES6 allows JavaScript to directly support the use of class to define a class. The second way for react to create a component is to inherit the class used. ES6 class is officially recommended for use. It is built using ES6 standard syntax. See the following code:

Import React from 'react'import ReactDOM from' react-dom'class App extends React.Component {

Render () {

Return (

/ / Note that this.props.name must be used here, and this.props must be used to welcome to the world of {this.props.name}.

)

}} ReactDOM.render (

Document.getElementById ('root'))

The result is exactly the same as before, because there is no real class in JS, this class is just a syntactic sugar, but the underlying operating mechanism of the two is different.

Functional components are called directly, as you have seen in the previous code

An es6 class component is actually a constructor, and each use of a component is equivalent to instantiating a component, like this:

Import React from 'react'import ReactDOM from' react-dom'class App extends React.Component {

Render () {

Return (

Welcome to the {this.props.name} world

)

}} const app = new App ({

Name: 'react'}) .render () ReactDOM.render (

App

Document.getElementById ('root'))

An older way.

This way of creating components was supported in versions prior to 16, but today's projects are basically not used.

React.createClass ({

Render () {

Return (

{this.props.xxx}

)

})

Composition and nesting of components

When a component is rendered to a node, the original content in that node is overwritten.

Component nesting is done by writing child components to the template of the parent component, and react does not have the content distribution mechanism (slot) in Vue, so we can only see the parent-child relationship in the template of a component.

/ / the component parent class Component// that introduces React and React.js from the package of react also introduces a special component in React.js, Fragmentimport React, {Component, Fragment} from 'react'import ReactDOM from' react-dom'class Title extends Component {

Render () {

Return (

Welcome to the world of React

)

}} class Content extends Component {

Render () {

Return (

React.js is a library for building UI

)

}} / * * because each React component can only have one root node, when rendering multiple components, you need to package a container in the outermost layer. If you use div, it will generate an extra layer of domclass App extends Component {render () {return ()} * * / / if you do not want to generate an extra layer of dom, you can use the Fragment component provided by React to wrap class App extends Component {

Render () {

Return (

)

}} ReactDOM.render (

Document.getElementById ('root'))

# JSX principle

To understand the principle of JSX, you need to understand how to use JavaScript objects to represent the structure of a DOM element.

Look at the DOM structure below

Welcome to the world of React

React.js is a library that helps you build a page UI.

All the information in the above HTML can be represented by the JavaScript object:

{

Tag: 'div'

Attrs: {className: 'app', id:' appRoot'}

Children: [

{

Tag:'H2'

Attrs: {className: 'title'}

Children: ['Welcome to the world of React']

}

{

Tag:'p'

Attrs: null

Children: ['React.js is a library for building page UI']

}

]}

But it's too long to write in JavaScript, and the structure doesn't look clear, so it's much more convenient to write in HTML.

So React.js extends the syntax of JavaScript so that the JavaScript language can support this syntax that is written directly in JavaScript code similar to the HTML tag structure, which makes it much easier to write. The compilation process converts the JSX structure like HTML into the object structure of JavaScript.

The following code:

Import React from 'react'import ReactDOM from' react-dom'class App extends React.Component {

Render () {

Return (

Welcome to the world of React

React.js is a library for building page UI

)

}} ReactDOM.render (

Document.getElementById ('root'))

After compilation, you will get the following code:

Import React from 'react'import ReactDOM from' react-dom'class App extends React.Component {

Render () {

Return (

React.createElement (

"div"

{

ClassName: 'app'

Id: 'appRoot'

}

React.createElement (

"H2"

{className: 'title'}

"Welcome to the world of React"

),

React.createElement (

"p"

Null

"React.js is a library for building page UI."

)

)

)

}} ReactDOM.render (

React.createElement (App)

Document.getElementById ('root'))

React.createElement will build a JavaScript object to describe the information about your HTML structure, including tag signatures, attributes, child elements, and so on. The syntax is

React.createElement (

Type

[props]

[... children])

The so-called JSX is actually a JavaScript object, so you must go through the process of compilation when using React and JSX:

JSX-use react to construct components, bable to compile-> JavaScript object-ReactDOM.render ()-> DOM element-> insert page

DOM style in component

Inline style

To add an inline style to a virtual dom, you need to use the way the expression passes in the style object:

/ / notice the two parentheses here. The first indicates that we have inserted JS in the JSX, and the second is the parenthesis Hello world of the object.

Inline styles need to be written to a style object, and the location of this style object can be placed in many places, such as in the render function, on the component prototype, and in the outer chain js file

Use class

React recommends that we use inline style because React feels that each component is a separate whole.

In fact, we are still adding a lot of class names to elements in most cases, but it is important to note that class needs to be written as className (because, after all, you are writing class js code, you will receive js rules now, and class is the keyword)

Hello world

Add different styles to different conditions

Sometimes you need to add different styles according to different conditions, such as: completion status, completion is green, unfinished is red. In this case, we recommend using the package classnames:

Css-in-js

Styled-components is a set of css-in-js framework written for React, which simply means writing css in js. Npm link

TodoList

Component development React todolist, the basic directory structure of the components in project development is basically like this:

Note: a component only does one thing, so TodoList and TodoItem should be made into two components, which is also convenient for later understanding of shouldComponentUpdate.

This is the end of the content about "what are the relevant knowledge points of React". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.