prefacio
"Página de inicio del autor" : Sprite Youbai Bubbles
"Sitio web personal" : Sitio web personal de Sprite
"Columna de recomendaciones" :
★ Servicio de ventanilla única de Java ★
★ Reaccionar desde la entrada hasta la competencia ★
★ Genial intercambio de código de front-end ★
★ De 0 a héroe, el camino para que Vue se convierta en un dios ★
★ uniapp: desde la construcción hasta la promoción ★
★ De 0 a héroe, Vue convertirse en un dios Road ★
★ Una columna es suficiente para resolver el algoritmo ★
★ Hablemos de la arquitectura desde 0 ★
★ La forma exquisita de circulación de datos ★
★ El camino hacia el backend avanzado ★
Directorio de artículos
1. Descripción general de React
React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Con React, puede combinar fragmentos de código cortos e independientes en interfaces de interfaz de usuario complejas. Estos fragmentos de código se denominan "componentes".
Prueba React Online ahora
Haga clic para saltar a la dirección
Hay dos formas de escribir el marco de React, una es el método de secuencia de comandos (introducción de etiquetas de JavaScript, uso práctico); la otra es el método de andamiaje de reacción (comúnmente utilizado).
método de guión
- Paso 1: presente la biblioteca de reacción y la biblioteca de reacción-dom en la página;
Para el paso 1 , puede usar el siguiente código en la página para importar la biblioteca de reacción y la biblioteca de reacción-dom:
<script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
Asegúrese de 17.0.2reemplazar con la versión de React que desea usar.
- Paso 2 : presente Babel; la sintaxis JSX se usa en React, pero el navegador no reconoce JSX, por lo que debemos presentar babel
Para el paso 2, puede usar el siguiente código para importar Babel y usar la sintaxis JSX:
<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
<script type="text/babel">
// 在此处编写React组件和代码
</script>
También puede elegir usar Babel como una dependencia de desarrollo y usar Babel para compilaciones de proyectos. Esto permite una mejor compatibilidad con la sintaxis de ES6+ y más complementos de Babel.
- Paso 3 : Cree un punto de montaje.
Para el paso 3, puede crear un elemento div con una identificación específica en el HTML como punto de montaje para el componente React. Por ejemplo:
<div id="root"></div>
Puede rootreemplazar con cualquier nombre que desee.
Después de completar los pasos anteriores, puede comenzar a escribir componentes de React y renderizarlos en el punto de montaje.
ejemplo completo
Este es un código de muestra completo, que incluye la importación de la biblioteca React, la importación de Babel, la creación de un punto de montaje y un componente React simple:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React App</title>
<script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 创建一个名为Greeting的React组件
function Greeting(props) {
return <p>Hello, {
props.name}!</p>;
}
// 渲染Greeting组件到页面上的根元素
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));
</script>
</body>
</html>
En el código anterior, importamos la versión de producción de la biblioteca React y la biblioteca ReactDOM, y usamos Babel para analizar el código JSX incrustado. Luego, creamos un rootdiv con id en la página como punto de montaje del componente React.
A continuación, definimos un componente de React llamado Saludo que toma propsuna namepropiedad llamada Saludo y devuelve un elemento que contiene el saludo p.
Finalmente, usamos ReactDOM.renderel método para representar el componente Saludo en el punto de montaje de la página. En este ejemplo, el componente Saludo mostrará "¡Hola, John!". Puede modificar los valores de propiedad del componente según sea necesario.
Andamio
Paso 1: crea un objeto DOM virtual
// 创建虚拟DOM对象
const vNode = React.createElement(
// 标签名
"div",
// 属性对象
{
id: "mydiv",
className: "cls",
},
// 标签内的内容
"hello react!"
);
Paso 2: obtenga el punto de montaje
// 获取挂载点
const root = document.getElementById("root");
Paso 3 - Renderiza la página
// 渲染页面
ReactDOM.render(vNode, root);
código completo
El código completo es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>React 封装演示</title>
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.development.js"></script>
</head>
<body>
<!-- 挂载点：后续生成的内容插入这里 -->
<div id="root"></div>
<script type="text/javascript">
// 步骤1 - 创建虚拟DOM对象
const vNode = React.createElement(
// 标签名
"div",
// 属性对象
{
id: "mydiv",
className: "cls",
},
// 标签内的内容
"hello react!"
);
// 步骤2 - 获取挂载点
const root = document.getElementById("root");
// 步骤3 - 渲染页面
ReactDOM.render(vNode, root);
</script>
</body>
</html>
El código anterior se representa en HTML puro y puede ver el componente React representado directamente al abrirlo en el navegador. En el código, se presentan por primera vez las versiones de desarrollo de React y ReactDOM. Luego,
<div id="root"></div>el punto de montaje se establece en la pestaña. A continuación, utiliceReact.createElement()el método para crear un objeto DOM virtual y establezca el nombre de la etiqueta, el objeto de atributo y el contenido de la etiqueta. Finalmente,document.getElementById("root")obtenga el punto de montaje y useReactDOM.render()el método para representar el objeto DOM virtual en el punto de montaje. De esta forma, se representará en la página una etiqueta div con los atributos "id" y "className", y el contenido será "¡hola,
reacciona!".
El componente es un concepto muy importante en React, es responsable de dividir la página en partes independientes y reutilizables, y puede mostrar contenido dinámicamente de acuerdo con diferentes entradas (props).
2. Componentes
Los componentes son conceptualmente similares a las funciones de JavaScript. Acepta cualquier parámetro de entrada (accesorios") y devuelve el elemento React utilizado para describir el contenido que se muestra en la página. Hay dos formas de definir componentes en React
Componentes funcionales
Los componentes funcionales son una nueva sintaxis agregada después de React 16.8 Es una forma simple y liviana de definir componentes. Podemos usar una función para declarar un componente, recibir accesorios de parámetros y devolver un elemento React para describir el contenido de visualización de la página.
Aquí hay un código de muestra para un componente funcional simple:
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// 使用该组件
const element = <Welcome name="John" />;
ReactDOM.render(
element,
document.getElementById('root')
);
En el código anterior, definimos un componente de función llamado Bienvenido, que recibe un parámetro props, que puede contener cualquier atributo. Dentro del componente, podemos usar las propiedades en el objeto props para mostrar dinámicamente el contenido de la página.
componentes de estilo de clase
Los componentes de clase son una forma más tradicional y poderosa de definir componentes en React. Podemos definir un componente usando una clase que hereda React.Component e implementa un método de representación para devolver elementos React.
Aquí hay un código de muestra para un componente de estilo de clase simple:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
// 使用该组件
const element = <Welcome name="John" />;
ReactDOM.render(
element,
document.getElementById('root')
);
En el código anterior, definimos un componente de clase llamado Welcome, que hereda React.Component y luego implementa un método de representación para describir el contenido de visualización del componente. En el método de representación, podemos obtener las propiedades entrantes a través de this.props y usarlas para mostrar dinámicamente el contenido.
Ya sea una función o una clase, un componente es una función o clase que toma accesorios y devuelve un elemento React. Pueden mostrar contenido diferente de manera flexible de acuerdo con diferentes accesorios, a fin de lograr la división en componentes y la reutilización de las páginas.
3. Eventos
El manejo de eventos en React es muy similar al manejo de eventos para elementos DOM, con algunas diferencias sintácticas. React usa camelCase para definir eventos y necesita pasar una función como controlador de eventos en lugar de una cadena. Hacer esto garantiza que los controladores de eventos se vinculen y ejecuten correctamente en los componentes de React.
React maneja el evento de clic
Aquí hay un código de muestra para manejar eventos de clic con React:
class Button extends React.Component {
handleClick() {
console.log('Button clicked');
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
ReactDOM.render(<Button />, document.getElementById('root'));
En el código anterior, creamos un componente Button y devolvemos un
<button>elemento en el método de representación del componente. En el elemento, pasamos una función como controlador para el evento de clic<button>
a través del atributo onClick .this.handleClickCuando se hace clic en el botón, se llama al controlador de eventos
handleClicky se genera un mensaje de registro.Cabe señalar que en React, los controladores de eventos se vinculan automáticamente a las instancias de los componentes. Entonces puede usar en el controlador de eventos
thispara referirse a la instancia del componente.
También hay otra forma de usar funciones de flecha para acceder a instancias de componentes en controladores de eventos.
función de flecha
Aquí hay un código de muestra para el manejo de eventos usando funciones de flecha:
class Button extends React.Component {
handleClick = () => {
console.log('Button clicked');
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
ReactDOM.render(<Button />, document.getElementById('root'));
En el código anterior, usamos el atributo de clase para definir la función de manejo de eventos, lo que puede garantizar que la función interna de la flecha sea
thiscoherente con la instancia del componente.
En resumen, el manejo de eventos en React tiene algunas diferencias de sintaxis con el manejo de eventos de los elementos DOM, pero la idea general es muy similar. Podemos manejar varios eventos de interacción del usuario en los componentes de React usando métodos de nomenclatura de mayúsculas y minúsculas y pasando funciones como controladores de eventos.
resumen
En este artículo, comenzamos con una descripción general de React, una biblioteca de JavaScript para crear interfaces de usuario. También cubrimos formas de instalar y ejecutar React usando secuencias de comandos y andamios.
En segundo lugar , discutimos el concepto de componentes de React y dos formas de definir componentes: la forma de función y la forma de clase. El método de función es una nueva sintaxis agregada después de React 16.8, que es más simple y liviana. El método de clase es una forma tradicional y poderosa de definir componentes en React. Hereda React.Component e implementa el método render para describir el contenido de visualización del componente.
Finalmente , aprendimos cómo manejar eventos en React. El manejo de eventos de React es similar al de los elementos DOM, con algunas diferencias sintácticas. Los eventos de reacción se nombran en mayúsculas y minúsculas, y se debe pasar una función como controlador de eventos.
