【Reaccionar】 Sintaxis JSX

I. Introducción

Esta publicación de blog explicará una sintaxis de etiqueta interesante, que no es una cadena ni HTML . Se llama JSX y es una extensión de sintaxis de JavaScript . Se recomienda usar JSX con React . JSX puede describir bien cómo se debe presentar la interfaz de usuario. debe tener un carácter interactivo. JSX puede recordar a un lenguaje de plantillas, pero tiene todo el poder de JavaScript

Nota: Aunque JSX es una extensión de sintaxis de JavaScript , puede encontrar que no se puede usar directamente en HTML . Debe usar Babel para la conversión. Después de la conversión, lo analizará automáticamente al estilo que deseemos.

2. Introducción a JSX

JSX integra directamente la sintaxis HTML en el código JavaScript, luego lo convierte en JavaScript puro a través de un traductor y luego lo ejecuta el navegador. En el desarrollo real, JSX se ha programado en JavaScript puro durante la etapa de empaquetado del producto , sin ningún efecto secundario. por el contrario, hará que el código sea más intuitivo y más fácil de mantener.El proceso de compilación lo implementa el compilador JSX de Babel .

3. Principios JSX

Para comprender los principios de JSX, primero debe comprender cómo utilizar objetos JavaScript para representar la estructura de un elemento DOM.

1. Ejemplo de estructura DOM

<div class='app' id='appRoot'>
  <h1 class='title'>欢迎进入React的世界</h1>
	<p>React.js是一个帮助你构建页面UI的JavaScript库</P>
</div>

Toda la información en el HTML anterior se puede representar mediante objetos JavaScript:

{
    
    
  tag:'div',
  attrs:{
    
    className:'app',id:'appRoot'},
  children:[
    {
    
    
      tag:'h1',
      attrs:{
    
    className:'title'},
      children:['欢迎进入React的世界']
    }，
    {
    
    
      tag:'p',
      attrs:null,
      children:['React.js是一个帮助你构建页面UI的JavaScript库']
    }
  ]
}

Sin embargo, es demasiado largo para escribir en JavaScript y la estructura no parece clara. Es mucho más conveniente escribir en HTML. Entonces, React.js expandió la sintaxis de JavaScript para que el lenguaje JavaScript pudiera admitir una sintaxis similar a las estructuras de etiquetas HTML escritas directamente en código JavaScript, lo que hace que la escritura sea mucho más conveniente. El proceso de compilación convierte estructuras JSX similares a HTML en estructuras de objetos JavaScript

2. Ejemplo de estructura JSX de HTML

import React from 'react'

class App extends React.Component {
    
    
    render() {
    
    
        return (
            <div class='app' id='appRoot'>
                <h1 class='title'>欢迎进入React的世界</h1>
                <p>React.js是一个帮助你构建页面UI的JavaScript库</p>
            </div>
        )
    }
}

export default App

//从react的包当中引入了React。只要你要写React.js组件就必须引入React，因为react里有一种语法叫JSX
import React from 'react'
//ReactDOM可以帮助我们把React组件渲染到页面上去
import ReactDOM from 'react-dom'
import App from './component/classComponent'

//ReactDOM里有一个render方法，就是把组件渲染并且构造DOM树，然后插入到页面上某个特定的元素上
ReactDOM.render(<App/>,document.getElementById("root")
)

3. Código después de la compilación.

import React from 'react'

class App extends React.Component {
    
    
    render() {
    
    
        return (
            React.createElement(
                "div",
                {
    
    
                    className: 'app',
                    id: 'appRoot'
                },
            ),
            React.createElement(
                "h1",
                {
    
    
                    className: 'title',
                },
                "欢迎进入React的世界"

            ), React.createElement(
                "p",
                null,
                "React.js是一个构建页面UI的JavaScript库"
            )
        )
    }
}

export default App

//从react的包当中引入了React。只要你要写React.js组件就必须引入React，因为react里有一种语法叫JSX
import React from 'react'
//ReactDOM可以帮助我们把React组件渲染到页面上去
import ReactDOM from 'react-dom'
import App from './component/classComponent'

//ReactDOM里有一个render方法，就是把组件渲染并且构造DOM树，然后插入到页面上某个特定的元素上
ReactDOM.render(React.createElement(App),document.getElementById("root")
)

React.createElement construirá un objeto JavaScript para describir la información de su estructura HTML, incluidos nombres de etiquetas, atributos, subelementos, etc. La sintaxis es:

React.createElement(
  type,
  [props],
  [...children]
)

El llamado JSX es en realidad un objeto JavaScript, por lo que cuando usa React y JSX, debe pasar por el proceso de compilación.

JSX usa reaccionar para construir el componente, compílelo con babel -> objeto JavaScript - ReactDOM.render() -> elemento DOM -> insertar en la página

4. ¿Por qué utilizar JSX?

1. Características de JSX

1. React cree que la lógica de representación está intrínsecamente acoplada con otra lógica de la interfaz de usuario. Por ejemplo, la interfaz de usuario debe estar vinculada para manejar eventos, la interfaz de usuario debe ser notificada cuando el estado cambia en ciertos momentos y los datos preparados deben mostrarse en el Interfaz de usuario.
2. React no separa artificialmente el marcado y la lógica en archivos diferentes, sino que logra la separación de preocupaciones almacenándolos en unidades poco acopladas llamadas "componentes".
3. React no exige el uso de JSX, pero la mayoría de las personas lo encuentran visualmente útil al combinar JSX y UI en código JavaScript. También permite que React muestre mensajes de error y advertencia más útiles.

2. Especificaciones de escritura JSX

• El nivel superior de JSX sólo puede tener un elemento raíz , por lo que a menudo envolvemos un div en la capa exterior .
• Para facilitar la lectura, generalmente envolvemos un paréntesis () en la capa exterior de JSX, lo que hace que sea más fácil de leer, y JSX se puede escribir con saltos de línea.
• Las etiquetas en JSX pueden ser etiquetas simples o etiquetas dobles

Nota: Si es una sola etiqueta, debeterminar en />

5. Uso de JSX

1. Incrustar expresiones JS

expresión javascript

let content = '插入的内容' //存储在js中的数据
let h1 = ( <h1>{
    
    content}</h1> )

Las expresiones JS como a, a + b, expresión de llamada de función functionName (param), función array.map (), función test ()
{} función de definición, etc., pueden recibirse mediante una variable. También puedes escribir { console.log(1) }

//array.map()是有返回值的
let arr = [1,2,3,4]
let result = arr.map((num) => {
    
    
    return num+1
})
console.log(result) //[2,3,4,5]

//定义函数，其本身也是返回值
const x = function test(){
    
    
    console.log('1')
}

console.log(x)
/* 这个函数本身
test(){
    console.log('1')
}
*/

• Siempre que sea una expresión js legal (como varios tipos de datos), se puede incrustar
• JSX en sí también es una expresión js.
• Los objetos en js no se pueden incrustar y generalmente solo aparecen en el atributo de estilo

import React from 'react'
import ReactDOM from 'react-dom'

// 函数调用表达式
const sayHi = () => 'Hi~' //函数调用后返回字符串Hi~

const dv = <div>我是一个div</div> //dv是JSX

const title = (
  <h1>
    <p>{
    
    1}</p>
    <p>{
    
    'a'}</p>
    <p>{
    
    1 + 7}</p>
    <p>{
    
    3 > 5 ? '大于' : '小于等于'}</p>
    <p>{
    
    sayHi()}</p>
    {
    
    dv} {
    
    /*JSX自身也是js表达式，也可以嵌入到JSX中*/}

    {
    
    /* 以下为错误演示:
    注意——注释是js中的，嵌入到jsx中的注释也需要用花括号括起来 */}
    {
    
    /* <p>{ {a: '6'} }</p> 花括号里一般不写对象，除非在style属性中*/}
    {
    
    /* { if (true) {} } 花括号中不能出现语句 */}
    {
    
    /* { for (var i = 0; i < 10; i++) {} } 花括号中不能出现语句*/}
  </h1>
)

// 渲染
ReactDOM.render(title, document.getElementById('root'))

2. Representación condicional

Utilice el operador if/else o ternario o el operador AND lógico para implementar

import React from 'react'
import ReactDOM from 'react-dom'

const isLoading = false

// if-else
// const loadData = () => {
    
    
//   if (isLoading) {
    
    
//     return <div>loading...</div>
//   }
//   return <div>数据加载完成，此处显示加载后的数据</div>
// }

// 三元表达式：
// const loadData = () => {
    
    
//   return isLoading ? (<div>loading...</div>) : (<div>数据加载完成，此处显示加载后的数据</div>)
// }

// 逻辑与运算符：
const loadData = () => {
    
    
  return isLoading && (<div>loading...</div>)
}

const title = (
  <h1>
    条件渲染：
    {
    
    loadData()}  {
    
    /*把函数调用的返回值嵌入JSX*/}
  </h1>
)
ReactDOM.render(title, document.getElementById('root'))

3. Representación de listas

Utilice el método map () de la matriz para devolver una nueva matriz. Los elementos de la matriz son los valores de los elementos de la matriz original después de llamar a la función en secuencia.

①、arr.map()

• Al representar la lista, debe agregar el atributo clave, cuyo valor debe ser único.
• Map() agrega atributos clave a quienquiera que lo recorra.
• Trate de evitar el uso de números de índice (cambiables) como claves, como el índice del segundo parámetro del mapa. No se recomienda usarlo como valor clave.

//数组可以作为 react的合法节点进行遍历，所以下例不报错。但对象不能
let arr = [<li>aaa</li>, <li>bbb</li>]
const list = (
  <ul>
      {
    
    arr}
  </ul>
)

Los datos puros originales ['aaa', 'bbb'] se pueden procesar en datos etiquetados, lo que equivale a:

//增加一个id属性作为key值
let arr = [{
    
    
    id:1,
    name:'aaa'
},{
    
    
    id:2,
    name:'bbb'
}]
//创建虚拟DOM
const list = (
  <ul>
    {
    
    arr.map(item => <li key={
    
    item.id}> {
    
    item.name} </li>)}
  </ul>
)
//渲染虚拟DOM
ReactDOM.render(list,document.getElementById('root'))

6. Componentes

1. Componentes de clase

La adición de ES6 permite que JavaScript admita directamente el uso de clases para definir una clase. La forma en que reacciona crea componentes es heredar la clase utilizada. La clase ES6 es la forma de uso actualmente recomendada oficialmente. Utiliza la sintaxis estándar de ES6 para construir

import React from 'react'

class App extends React.Component {
    
    
    render() {
    
    
        return (
            <div>hellow react Component</div>
        )
    }
}

export default App;

//从react的包当中引入了React。只要你要写React.js组件就必须引入React，因为react里有一种语法叫JSX
import React from 'react'
//ReactDOM可以帮助我们把React组件渲染到页面上去
import ReactDOM from 'react-dom'
import App from './component/classComponent'

//ReactDOM里有一个render方法，就是把组件渲染并且构造DOM树，然后插入到页面上某个特定的元素上
ReactDOM.render(<App/>,document.getElementById("root")
)

①.Crear instancias de componentes

El componente de clase ES6 es en realidad un constructor. Cada vez que se utiliza el componente, equivale a crear una instancia del componente.

import React from 'react'

class App extends React.Component {
    
    
    render() {
    
    
        return (
            <div>hellow react Component</div>
        )
    }
}

const app = new App({
    
    
  name:'react'
}).render()

export default App;

//从react的包当中引入了React。只要你要写React.js组件就必须引入React，因为react里有一种语法叫JSX
import React from 'react'
//ReactDOM可以帮助我们把React组件渲染到页面上去
import ReactDOM from 'react-dom'
import App from './component/classComponent'

//ReactDOM里有一个render方法，就是把组件渲染并且构造DOM树，然后插入到页面上某个特定的元素上
ReactDOM.render(app,document.getElementById("root")
)

2. Componentes funcionales

function App(){
    
    
    return(
        <div>hello functional component</div>
    )
}
export default App

import React from 'react'
import ReactDOM from 'react-dom'
import App from './component/functionComponent'

ReactDOM.render(
    <App />,
    document.getElementById("root")
)

3. Estilo de componente

① Estilo en línea

Si desea agregar estilos en línea al DOM virtual, debe usar una expresión para pasar el objeto de estilo:

<div style={
    
    {
    
    backgroundColor:"red",fontSize:"13px"}}>Hello World</div>

Los estilos en línea requieren escribir un objeto de estilo, y la ubicación de este objeto de estilo se puede colocar en muchos lugares. Por ejemplo: en la función de renderizado, en el prototipo del componente, en el archivo js del enlace externo

import React, {
    
     Component } from 'react'

export default class nestComponent extends Component {
    
    
  render() {
    
    
    var objStyle = {
    
    
      backgroundColor: "pink",
      fontSize: "15px"
    }
    return (
      <div>
        <div style={
    
    objStyle}>nestComponent</div>
        <div style={
    
    {
    
    backgroundColor:"purple"}}>Hello World</div>
      </div>
    )
  }
}

②.Usar clase

React recomienda que usemos estilos en línea porque React considera que cada componente es un todo independiente.
De hecho, en la mayoría de los casos todavía agregamos muchos nombres de clases a los elementos, pero debe tenerse en cuenta que la clase requiere Ctrip className (porque después de todo, estamos escribiendo código similar a JS, recibiremos la existencia de reglas JS y la palabra clave de clase)

7. Resumen

De hecho, JSX es solo azúcar sintáctico para la función React.createElement(component, props, ...children) . Todo JSX eventualmente se convertirá en llamadas a funciones React.createElement . Si desea obtener más información sobre los principios de implementación de JSX, consulte JSX en profundidad.