First glimpse of react: detailed explanation of JSX

2021-10-14 11:14作者:admin来源:未知>次阅读

Title Note: Alibaba Nanjing R & D center has been established for one year. Its business and team have expanded rapidly and sincerely seek various talents such as front-end / back-end. Welcome to [Ali Nanjing technology special issue]( https://zhuanlan.zhihu.com/ali-nanjing ) import React from ' react'; < MyButton color=" blue" shadowSize=

> Click Me </ MyButton>

will be compiled as:

 react.createelement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)

if we directly declare a DOM element, it will also be converted to the createElement function call:

 react.createelement(
'div',
{className: 'sidebar'},
null
)
var defaultValue = " Fill me ...";
document.body.appendChild(
<div>
<input type="text" value={defaultValue} />
<button onclick="alert('clicked!');">Click Me!</button>
<ul>
{['un', 'deux', 'trois'].map(function(number) {
return <li>{number}</li>;
})}
</ul>
</div>
); 

here we also want to discuss another question, why JSX needs to be introduced. The so-called template literals are introduced into ecma-262 standard of ecamscript 6, that is, embedded DSLs can be used in ECMAScript to introduce JavaScript variables. However, although the template string is excellent for long embedded DSLs, it will cause a lot of noise and side effects for ECMAScript expressions that need to be introduced into a large number of scopes, For example, if we want to declare a comment box layout, we can use JSX as follows:

 / / JSX
var box =
< Box>
{
shouldShowAnswer(user) ?
<Answer value={false}>no</Answer> :
<Box.Comment>
Text Content
</Box.Comment>
}
</ Box>; 

and use template strings as follows:

 / / template literals
var box = jsx`
<$ {Box}>
${
shouldShowAnswer(user) ?
jsx`<${Answer} value=${false}>no</${Answer}>` :
jsx`
<${Box.Comment}>
Text Content
</${Box.Comment}>
`
}
</$ {Box}>
`; 
The main defect of

is that it needs to go in and out of the scope because of the nesting of variables, which is easy to cause syntax errors. Therefore, JSX syntax is better.

JSX syntax

the official definition of JSX is an ECMAScript extension of XML like syntax, which makes perfect use of the syntax and features of JavaScript and uses the familiar HTML syntax to create virtual elements. The basic syntax of JSX is basically covered by XML, but there are many differences. When react defines a label, the label must be closed, otherwise it cannot be compiled. This is very different from standard HTML. HTML will be automatically completed when the browser is rendered, and the powerful JSX error reporting mechanism will be indicated directly in the way of error reporting in the compilation stage. Self closing tags in HTML (such as% 26lt; img% 26gt;) follow the same rules in JSX. Custom tags can determine the closing method according to whether there are subcomponents or text. In addition, the DOCTYPE header is also a very special flag, which is generally used when using react as the server-side rendering. In HTML, DOCTYPE is not closed, that is, we can't render it directly. A common approach is to construct a variable to save HTML and concatenate DOCTYPE with the rendered results of the whole HTML tag. When declaring components with JSX, only a single root element is allowed for the outermost component root element. We have also stated this above, because JSX syntax will be converted into a call to react. CreateElement (component, props,... Children), and the first parameter of the function allows only single elements, not multiple elements.

Variable uses comment

. In HTML, we will use% 26lt;! ---% 26gt; Comment, but it is not supported in JSX:

 render(){
return (
<div>
<!-- This doesn't work! -->
</div>
)
}

we need to annotate in the way of block annotation in javascript:

 {/ * a JSX comment * /}
{/* 
Multi
line
comment
*/}The 
array

JSX allows the use of arbitrary variables. Therefore, if we need to use the array for circular element rendering, we can directly use the methods such as map, reduce and filter:

 function numberlist (props){
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
Conditional rendering

in JSX, we can no longer use the traditional if / else conditional judgment syntax, but we can use more concise and clear conditional operator operators. For example, if we want to perform if operation:

 {condition% 26amp;% 26amp;% 26lt; span% 26gt; render when it is true% 26lt; / span% 26gt;} 

if we want to perform non operation:

 {condition

热门排行

最新文章

Powered by 世界滤芯新闻网 @2018 RSS地图 HTML地图

Copyright 365建站 © 2008-2021 华绿环保 版权所有