React Tutorial (Resumen de notas)

Reaccionar

página web oficial

Una biblioteca de JavaScript para construir interfaces de usuario.

Biblioteca de JavaScript para crear interfaces de usuario

crear-reaccionar-app

Andamios, utilizados para construir la estructura básica del proyecto.

$ npx create-react-app <proj-name>
# 或
$ yarn create react-app <proj-name>

Al crear un proyecto, la estructura básica del proyecto se creará automáticamente, los recursos del paquete dependiente se usarán en el proyecto de instalación y los paquetes dependientes principales se usarán:

• reaccionar: paquete básico
• react-dom: para la representación del navegador
• react-scripts: envuelve la configuración relacionada con el paquete web

npm scripts

{
    
    
  "scripts": {
    
    
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

• start: inicie la tarea en el entorno de desarrollo, automáticamente abrirá el servidor de desarrollo webpack-dev-server
• construir: la tarea del entorno de producción, construir el código en el entorno de producción
• prueba: tarea de prueba
• eject: eject, expulsa la configuración de webpack al directorio raíz del proyecto, esta expulsión es irrevocable

JSX

JSX no es un contenido de cadena, ni es una estructura HTML, sino una expresión JS, que puede entenderse como una extensión de sintaxis de JavaScript.

Se recomienda usar JSX en React.JSX puede describir bien la forma esencial que debe presentar la interfaz de usuario, ya que debe interactuar.

Si necesita insertar contenido de expresión JS en una expresión JSX, puede usar {}la estructura de sintaxis :

const element = <h1>Hello { 'world' }</h1>

Cuando se usa en JSX {}para insertar expresiones JS, se realizará el escape. Si no desea escapar pero necesita representar texto html, puede usar dangerouslySetInnerHTMLel atributo para configurarlo. El valor del atributo es un objeto, y debe haber __htmlun enlace de atributo necesita ser renderizado El texto html:

<div dangerouslySetInnerHTML={
   
   {__html: html}}></div>

principio

JSX es solo azúcar sintáctico para React.createElement(component, props, ...children)la función , y JSX eventualmente se traducirá en React.createElement()llamadas por el complemento de Babel.

<div className="container">
    <ul className="list">
    	<li>1</li>
        <li className="active">2</li>
    </ul>
    <span>
    	<a href="/test.html">链接</a>
    </span>
</div>

Traducido por Babel:

React.createElement(
	'div',
    {
    
     className: 'container' },
    React.createElement(
    	'ul',
        {
    
     className: 'list' },
        React.createElement(
        	'li',
            null,
            '1'
        ),
        React.createElement(
        	'li',
            {
    
     className: 'active' },
            '2'
        )
    ),
    React.createElement(
    	'span',
        null,
        React.createElement(
        	'a',
            {
    
     href: '/test.html' },
            '链接'
        )
    )
)

Resultado de la ejecución después de la llamada a la función:

{
    
    
    type: 'div',
    props: {
    
    
        className: 'container'
    },
    children: [
        {
    
    
            type: 'ul',
            props: {
    
     className: 'list' },
            children: [
                {
    
    
                    type: 'li',
                    props: null,
                    children: ['1']
                },
                {
    
    
                    type: 'li',
                    props: {
    
     className: 'active' },
                    children: ['2']
                }
            ]
        },
        {
    
    
            type: 'span',
            props: null,
            children: [
                {
    
    
                    type: 'a',
                    props: {
    
     href: '/test.html' },
                    children: ['链接']
                }
            ]
        }
    ]
}

Algoritmo de comparación DOM virtual:

• diferencia
• fibra

componentes

componente de función

function Element(props) {
    return <h1>Hello { props.greeting }</h1>
}

• Los nombres de los componentes siguen la convención de nomenclatura de Pascal (la primera letra de cada palabra está en mayúscula)
• El parámetro de función props es un objeto que representa las propiedades que recibe el componente cuando se utiliza
• Se usa dentro del cuerpo de la función returnpara devolver un elemento React representado por JSX
• La estructura del componente se puede usar en expresiones JSX usando <Element propName="propValue">la etiqueta

componente de clase

// class 组件
class MyElement extends React.Component {
  render() {
    return <h1>Hello { this.props.greeting }</h1>
  }
}

• Los nombres de los componentes siguen la convención de nomenclatura de Pascal
• Heredado de la clase React.Componentprincipal
• render()El método debe implementarse y el elemento React se devuelve dentro del cuerpo del método.
• render()Dentro del cuerpo del método, puede usar this.propspara obtener los atributos recibidos por el componente. propsse hereda de la clase padre
• La estructura del componente se puede usar en expresiones JSX usando <MyElement propName="propValue">la etiqueta

Reaccionar.Fragmento

function TodoHeader() {
  return (
    <div>
      <h1>主标题</h1>
      <h2>副标题</h2>
    </div>
  )
}

Ya sea que se trate de un componente de función o un componente de clase, cuando se representan nodos de elementos, se debe usar un solo nodo de elemento raíz para envolver la estructura de diseño de la interfaz de usuario.

<React.Fragment>Los componentes se pueden usar para envolver la estructura que debe diseñarse, de modo que no se muestren nodos redundantes en la estructura de árbol DOM renderizada real:

// 函数数组
function TodoHeader() {
  return (
    <React.Fragment>
      <h1>主标题</h1>
      <h2>副标题</h2>
    </React.Fragment>
  )
}

<React.Fragment></React.Fragment>Se puede abreviar como<></>

comunicación de componentes

componente padre-hijo

• Padre a hijo: use el atributo props
• Pasar de hijo a padre: usando el atributo props, cuando use el componente hijo en el componente padre, pase una referencia de función en el componente padre como valor de propiedad, y cuando los datos deban pasarse en el componente hijo, llame a la función recibido de la propiedad, al llamar a la función Pasar los datos a transferir como parámetro.

A través de jerarquías de componentes

• Convertir a comunicación de componente padre-hijo
• Contexto
• reudx, mobx…

tipos de accesorios

Herramienta de detección de tipos en tiempo de ejecución, que se puede utilizar para verificar la legalidad de los tipos de atributos al definir componentes

$ npm i prop-types

  // 运行时属性类型检测
  static propTypes = {
    todos: PropTypes.array
  }

estado

state son los datos privados que se usarán dentro del componente (similares a los datos en el componente vue)

Para modificar los datos en el estado, debe usar setState()el método para modificarlo, y la página se representará de manera receptiva

setState()Tres cosas sobre :

• No modifique el estado directamente, pero setState()use
• setState()La actualización del puede ser asíncrona
• las actualizaciones de estado se fusionarán

forma

Enlace datos de dos vías para un cuadro de texto de una sola línea (similar a usar v-model en vue, pero no hay tal instrucción en reaccionar):

Enlazar valuepropiedades y procesar changeeventos para realizar un enlace bidireccional de datos

Árbitro

• ref de tipo de cadena (en desuso, obsoleto)
• React.createRef(): Cree un objeto ref, asocie componentes o nodos DOM, use currentla propiedad para obtener la instancia del componente o el objeto DOM

Contexto

El contexto proporciona una forma de pasar datos entre árboles de componentes sin agregar accesorios manualmente a cada capa de componentes.

El contexto se utiliza principalmente para compartir recursos entre componentes a nivel mundial.

API

• React.createContext(): crea un objeto de contexto
• Componente de proveedor: se utiliza para guardar datos en el objeto de contexto, tiene un atributo de valor
• Componente de consumidor: para consumir los datos enlazados en el componente de proveedor, el consumidor debe pasar un subelemento de función
• Class.contextType: después de configurar el atributo contextType static (estático) para la clase, puede usarlo this.contextpara obtener los últimos datos guardados en el contexto

ciclo vital

Función de enlace de ciclo de vida en el componente de clase:

fase de montaje

• constructor() : inicialización: estado, esto en el controlador de eventos de enlace
• renderizar() : renderizar
• componentDidMount() : una vez que se completa el montaje, se puede obtener la estructura de árbol DOM y se puede enviar una solicitud de red

componentWillMount(): Obsoleto, en desuso, si realmente necesita usarlo, puede usarloUNSAFE_componentWillMount()

fase de actualización

• shouldComponentUpdate (): generalmente se usa para la optimización, React.PureComponent
• renderizar() : renderizar
• componenteDidUpdate() : después de la actualización

fase de desinstalación

• componenteWillUnmount() : a punto de ser desmontado

Componente de orden superior

Los componentes de orden superior (HOC) son una técnica avanzada en React para reutilizar la lógica de los componentes. HOC en sí mismo no es parte de la API de React, es un patrón de diseño ( decorator design pattern ) basado en las características de composición de React .

Un componente de orden superior es una función que toma un componente como argumento y devuelve un nuevo componente.

Gancho

Nuevo en reaccionar 16.8. Hace posible el uso de características como el estado en componentes de clase en componentes de función.

Todas las funciones de enlace comienzan usecon un prefijo, y las funciones de enlace solo se pueden usar en componentes de funciones o funciones de enlaces personalizados.

gancho de estado

useState()

gancho de efecto

useEffect()

Si está familiarizado con las funciones del ciclo de vida de la clase React, puede pensar en useEffectHook componentDidMountcomo una combinación de estascomponentDidUpdate tres funciones.componentWillUnmount

// componentDidMount()
useEffect(callback, [])

// componentDidUpdate()
// 当依赖项 item1, item2 发生改变时，会重新执行 callback 函数
useEffect(callback, [item1, item2])

useEffect(() => {
    
    
  // statements
  // TODO...
  
  // 该返回的函数就相当于是 componentWillUnmount()
  return () => {
    
    }
}, [])

Otros ganchos

useCallback()

useMemo()

useRef()

redux

Documento oficial chino

Es una biblioteca de administración estatal y no tiene nada que ver con React en sí.

concepto

• tienda: almacén
• estado: estado, datos de estado compartidos globalmente
• reductor: función pura, utilizada para la actualización síncrona de estado. Recibirá el estado y la acción como parámetros, juzgará qué tipo de actualización de estado realizar de acuerdo con el tipo de acción en el cuerpo de la función y devolverá el nuevo objeto de estado actualizado.

Reducer 必需符合以下规则：
- 仅使用 `state` 和 `action` 参数计算新的状态值
- 禁止直接修改 `state`。必须通过复制现有的 `state` 并对复制的值进行更改的方式来做 *不可变更新（immutable updates）*。
- 禁止任何异步逻辑、依赖随机值或导致其他“副作用”的代码

• despacho: función utilizada para activar la llamada a reducer() para actualizar el estado. La única forma de actualizar el estado es llamar store.dispatch()con un objeto de acción .
• acción: es un objeto común que se usa para describir lo que sucedió, generalmente con atributos de tipo y carga útil
• creador de acciones: el creador de acciones es una función que crea y devuelve un objeto de acción . Su función es evitar que tenga que escribir manualmente el objeto de acción cada vez
• …

Redux espera que todas las actualizaciones de estado sean inmutables .

usar

instalar redux

$ npm i redux
# 或
$ yarn add redux

Crear reductores

Puede haber múltiples tipos de estados en una aplicación que necesitan ser administrados, y se escriben reductores separados para diferentes tipos de estados, como:

// counter
// 初始化状态数据
const initialState = {
    
    
  count: 0
}

/**
 * reducer 函数，用于同步更新状态数据
 * @param {*} state 当前状态信息
 * @param {*} action Action 对象，有 type 与 payload 属性
 * @returns 更新后的状态对象
 */
const counterReducer = (state = initialState, {
     
      type, payload }) => {
    
    
  // 复制 state 状态数据
  const copy = {
    
     ...state }
  // 根据 action.type 判断，修改复制后的数据
  switch (type) {
    
    
    case 'INCREMENT': // 加
      copy.count += 1
      return copy
    case 'DECREMENT': // 减
      copy.count -= 1
      return copy
    default:
      return state
  }
}

export default counterReducer

Combine reductores separados en un gran reductor de raíz:

import {
    
     combineReducers } from 'redux'
import counterReducer from './counter'
import userReducer from './user'

// 将各独立的 reducer 合并为一个根 reducer
const rootReducer = combineReducers({
    
    
  counter: counterReducer,
  user: userReducer
})

export default rootReducer

Crear función de creador de acciones

El creador de acciones se utiliza principalmente para crear objetos de acción para su fácil reutilización:

import {
    
     DECREMENT, INCREMENT } from "./contants";

/**
 * action creator，用于创建 action 对象
 * @returns 
 */
export const incrementAction = () => ({
    
    
  type: INCREMENT
})

export const decrementAction = () => ({
    
    
  type: DECREMENT
})

crear tienda

import {
    
     createStore } from 'redux'
import rootReducer from '../reducers'

// 创建 Store
const store = createStore(rootReducer)

// 导出
export default store

Instale la biblioteca de enlace react-redux

Redux no tiene nada que ver con reaccionar.Si necesita usar la tienda redux en reaccionar, debe instalar la biblioteca de enlace de reaccionar-redux:

$ npm i react-redux
# 或
$ yarn add react-redux

Usar proveedor para guardar la tienda

Use el componente Provider react-reduxprovisto para guardar la tienda en redux, generalmente introducido en el archivo de entrada index.js de la aplicación:

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import store from './store'
import App from './App'

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Usando los datos de estado de redux en componentes

Use el método connect() react-reduxprovisto para conectar la tienda redux en el componente:

import {
    
     connect } from 'react-redux'
import {
    
     decrementAction, incrementAction } from './actions/counter'

class App extends React.Component {
    
    
    // ...
}

// mapStateToProps 是一个函数，该函数传递 state 作为参数，
// 函数的返回值是一个对象，该返回对象中的属性会被合并到组件
// 的 props 中。
// 每当 store 中 state 状态被修改后，该方法都会被调用
const mapStateToProps = state => ({
    
    
  count: state.counter.count
})
// const mapStateToProps = state => {
    
    
//   return {
    
    
//     count: state.counter.count
//   }
// }

// mapDispatchToProps 是一个函数，该函数传递 dispatch 作为
// 参数，函数体内部返回一个对象，返回对象的属性也会被合并到
// 组件的 props 中
const mapDispatchToProps = dispatch => ({
    
    
  increase() {
    
    
    dispatch(incrementAction())
  },
  decrease() {
    
    
    dispatch(decrementAction())
  }
})

// connect() 调用后，返回的是一个 HOC
const hoc = connect(mapStateToProps, mapDispatchToProps)

export default hoc(App)

connect()La función se utiliza para conectar la tienda redux en el componente.

connect()Recibe dos parámetros opcionales: mapStateToProps,mapDispatchToProps

connect()El valor de retorno de es un HOC(componente de orden superior), llame a la función HOC, pase el componente existente (como: App) como parámetro y devuelva un nuevo componente.

Los componentes de alto nivel de HOC se utilizan para mejorar la función 装饰器模式de componentes de parámetros pasados: fusionar las propiedades del objeto devuelto por mapStateToProps() y mapDispatchToProps() en los accesorios del componente

actualización de estado asíncrona

Puede usar redux-thunkeste middleware para implementar actualizaciones de estado asíncronas

// TODOS…

enrutamiento de front-end

En la aplicación de una sola página SPA, cuando es necesario realizar el efecto de cambio de interfaz (navegación de página), se usa JavaScript para completar el cambio entre diferentes interfaces en la misma página (operación DOM), y luego se realiza el enrutamiento de front-end. requerido

modelo

• hash: use #el identificador , cuando hashel valor cambie (window.onhashchange) para cambiar la visualización de la interfaz
• historial: no hay uno explícito en la URL #, y el formato de la URL es exactamente el mismo que el del enrutamiento del lado del servidor. Por lo tanto, si usa historyel modo , también necesita soporte de configuración del lado del servidor. Utilice la nueva API de la historia en h5 para realizar su función

Independientemente de usar el modo hash o el modo historial, no se enviará ninguna solicitud al servidor durante el cambio de navegación

Reaccionar enrutador

página web oficial

Paquete de recursos:

• enrutador de reacción: paquete principal
• **react-router-dom: **El paquete de enrutamiento utilizado al renderizar en el navegador
• react-router-native: el paquete de enrutamiento utilizado en aplicaciones nativas
• react-router-config: paquete auxiliar utilizado para la configuración de enrutamiento estático

Instalar

$ npm i react-router-dom
# 或
$ yarn add react-router-dom

API de componentes

• HashRouter: enrutamiento en modo hash
• BrowserRouter: enrutamiento en modo historial
• Ruta: configure la ruta de enrutamiento de enrutamiento, el componente de representación del componente. Puede haber componentes y atributos de renderizado para renderizar componentes, no use componente y renderizado al mismo tiempo, cuando aparecen al mismo tiempo, el renderizado será ignorado
• Redirigir: Redirigir
• Enlace: navegación (enlace) salto
• Interruptor: selección de múltiples ramas (ruta de ruta coincidente)

biblioteca de componentes de interfaz de usuario

página web oficial

Instalar

$ npm i antd
# 或
$ yarn add antd

Importar componentes y estilos de antd

import { Button } from 'atnd'

import 'antd/dist/antd.css'

Configuración avanzada - craco

instalar craco

$ npm i @craco/craco -D
# 或
$ yarn add @craco/craco --dev

Modificar package.json en npm scripts:

{
    
    
  "scripts": {
    
    
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
}

Cree craco.config.jsun archivo :

module.exports = {
    
    }

Instale el paquete sin craco:

$ npm i craco-less --save-dev
# 或
$ yarn add craco-less --dev

Modificar craco.config.jsel archivo :

const CracoLessPlugin = require('craco-less')

module.exports = {
    
    
  plugins: [
    {
    
    
      plugin: CracoLessPlugin,
      options: {
    
    
        lessLoaderOptions: {
    
    
          lessOptions: {
    
    
            modifyVars: {
    
     // 自定义主题，修改 antd 使用到的 less 变量值
              '@primary-color': '#1DA57A'
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
}

caso de aula

Sistema de gestión de antecedentes para productos de educación en línea

Interfaz:

Función:

• Acceso
• Inicio-Tablero
• gestión de cursos
  • programa de estudios
  • editar curso
  • papelera de reciclaje

Pila de tecnología:

• crear-reaccionar-aplicación + reaccionar.js + reaccionar-enrutador + redux + reaccionar-redux + redux-thunk
• axios
• y
• echarts
• Editor de texto enriquecido: wangeditor
• …

Proceso de trabajo

• Asigne estaciones de trabajo y computadoras, y familiarícese con las diversas normas y reglamentos de la empresa.

• Configure el entorno de desarrollo e instale las herramientas utilizadas en el proceso de desarrollo front-end, como git, nodejs, vscode (webstorm), herramientas para desarrolladores de programas pequeños, hbuilderx, PS...

Proceso de desarrollo:

• No hay código fuente localmente, descargue el código fuente al local

$ git clone <repo.url>

Si ya existe el código fuente localmente, actualice a la última versión directamente

$ git pull origin xxx

• Implementar la codificación en el espacio de trabajo
• Después de completar una función relativamente completa y pasar la autocomprobación, envíe el repositorio

$ git status
$ git add -A
$ git commit -m 'flag: message'

• Empuje al almacén central remoto

$ git push origin xxx

• Si hay un problema de conflicto de versión, el conflicto debe resolverse

Proceso de construcción del proyecto:

• Use andamios (vue CLI, create-react-app) para construir la estructura básica del proyecto

• Instale los recursos del paquete de los que depende la base del proyecto, como los paquetes relacionados con el enrutamiento de front-end, los paquetes relacionados con la administración del estado, los paquetes relacionados con la solicitud de red y los paquetes relacionados con la biblioteca de componentes de la interfaz de usuario.

  • reaccionar-router-dom, redux, reaccionar-redux, redux-thunk, axios, antd, vant, elemento-ui

• Crear la estructura de directorios del proyecto

project
|--.git # 隐藏目录，git 版本库管理
|--public # SPA 的 index.html
|--src # 项目源代码文件夹
|--|--assets # 静态资源，如图片、音频、视频等媒体资源文件
|--|--api # 与网络请求访问相关的代码，或 requests 目录名
|--|--components # 应用中需要复用的组件
|--|--actions # redux 的 action creator 代码
|--|--reducers # redux 的 reducer 代码
|--|--store # 状态管理库使用到的仓库代码
|--|--router # 路由相关的目录，或 routes 目录名
|--|--utils # 辅助工具代码
|--|--views # 页面组件代码，或 pages 目录名
|--|--styles # 外部样式表文件资源
|--|--scss # css 预处理器资源
|--|--App.vue / App.jsx / App.js # 应用的外层组件
|--|--main.js / index.js # 项目的入口JS文件
|--doc # 项目文档
|--test # 测试代码
|--package.json
|--README.md # 项目描述文件
|--.gitignore # git 在版本管理时需要忽略的资源

• Escriba código general, como: encapsulación secundaria axios, reductor general, creador de acciones, createStore() y otras estructuras en redux, código general relacionado con el enrutamiento
• Implementar la codificación de funciones comerciales