Getting started with React. js _ javascript skills

This article mainly introduces the first React. js entry-level learning article, detailed analysis of React. js basics, comprehensive understanding of React. js, interested friends can refer I. Introduction to JSX

① Definition

JSX = JavaScript XML, which is a class XML syntax for building labels inside the React component. React can work the same way without using JSX, but using JSX can improve component readability, enhance JS semantics, clear structure, high degree of abstraction, and modular code. Therefore, JSX is recommended in React.

② Features

1. uppercase element names

2. comply with nested rules

3. You can write an evaluation expression.

4. Hump naming

5. Some keywords of javascript native functions, such as for and class, cannot be used. It must be replaced with htmlFor and className.

③ Usage

1. Use Dynamic value: JSX splits the content between two curly brackets {...} rendering is a dynamic value. curly brackets indicate a javascript context environment, which can be a variable or a function. For example:

var name=“winty”;
{name}
function date(d){ return [ d.getFullYear(), d.getMonth()+1, d.getDate() ].join('-);};
{date(new Date()}

2. Note: first, the comment on the subnode should be enclosed in braces, and then you can comment/**/on a single line or multiple lines //.

Var Hello = React. createClass ({render: function () {return
// Set name Hello, World/* multi-line comment */
}});

3. Use CSS inline styles

var style={ color:#000;};React.render(
....
,document.body);

4. Condition Determination

// Method 1, three object operator var Hello = React. createClass ({render: function () {return
Hello, {this. props. name? This. props. name: "LuckyWinty "}
}); // Method 2, if-else statement var Hello1 = React. createClass ({getName: function () {if (this. props. name) return this. props. name; else return "LuckyWinty"; render: function () {return
Hello, {this. getName}
}); // Method 3, using logic | Operator var Hello3 = React. createClass ({render: function () {return
Hello, {this. props. name | "LuckyWinty "}
}});

④ Introduction to non-DOM attributes

JSX has three non-DOM attributes: dangerouslySetInnerHTML, ref, and key.

DangerouslySetInnerHTML: insert HTML code directly in JSX, but avoid using this attribute if possible.

Improper use of innerHTML may cause cross-site scripting (XSS) attacks. Errors often occur when user input is purified for display. Improper purification is also one of the causes of Web attacks.
After thoroughly understanding the consequences of security issues and correctly purifying data, an object containing only the unique key _ html is generated, and the object value is the purified data. For example:

function createMarkup() {  return {__html: 'First · Second'}; };

Ref: the parent component references a child component. You can define a reference by setting the expected reference name in the attribute. For example:

... Render: function () {return
      
}... // Then you can use this. refs. myInput anywhere in the component to obtain this reference.

Key: it is an optional unique identifier. By setting a unique key for the component and ensuring that it remains consistent in a rendering cycle, this allows React to determine whether to reuse a component or destroy and recreate a component to improve rendering performance. For example:

var Hello3=React.createClass({  render:function(){  return 
 
 
    
  
  
1
    
  
  
2
    
  
  
3
   
 
 
  }});

Ii. Detailed description of React component lifecycle

A component is essentially a state machine. input and output are fixed. The State and result correspond to each other to make the program intuitive. Status conversion triggers different hook functions, giving developers the opportunity to respond. The state can be understood using the event idea. However, events and events are independent of each other, but different States may affect each other.
All the States of a component are combined to form the life cycle of the component. That is, the initialization stage is> the running stage> the destruction stage.

Customizable functions in different lifecycles
Initialization phase:
① Getdefaproprops: Get the default attribute and call it only once. It is called after createClass. Shared references between instances
② GetInitialState: Initialize the special initialization status of each instance
③ ComponentWillMount: mout indicates loading. This method means that the component is about to be loaded to the page and is also the last chance to modify the status before render.
④ Render: The component generates virtual nodes in the render function, and then the virtual node is rendered to the page by react. Only this. props and this. state can be accessed. There is only one top-level component. It is best not to modify the status and DOM output.
⑤ ComponentDidMount: The component is called only after it is loaded. That is to say, when this method is called, the component has been rendered to the page, and DOM can be modified at this time.
The execution sequence of these five functions is from top to bottom. It should be noted that getdefaproprops will only be called when the first instance of the component is initialized, that is, the second instance is called from getInitialState. The default attributes of all instances of the same component are the same.
Main test code: