Enseñó usted utiliza Reaccionar ganchos extremos desarrollo de sitios web para móviles, desde la entrada a la práctica

Ya reaccionar uno de los marcos de front-end para el ecosistema de JavaScript de los más populares . A pesar de que ha estado llena de alegría en ella, pero que reaccionan equipo sigue tratando de hacerlo mejor.

En 2018 rueda ReactConf, Reaccionar lanzamiento oficial de la ganchos , y luego se envolvió a toda la comunidad de desarrollo React.

Reaccionar Reaccionar Los ganchos son nueva biblioteca, que le permite escribir Reaccionar lógica de estado y utilizar otras funciones mientras que sin escribir componentes de clase. Incluso puede utilizar un ganchos separados para crear sus propias aplicaciones, esto es un cambio importante Reaccionar profesionales relacionados.

Hoy en día nos dan una Reaccionar Ganchos supuesto Reaccionar gancho a partir de la entrada a la práctica , el curso va a reaccionar Ganchos hacer todo el análisis y desarrollo de la página extremo móvil del sitio por los componentes de la función Ganchos cNodo puros, el proceso real se introducir usando técnicas utilizadas comúnmente en pila de desarrollo de extremo frontal.

Por supuesto uso en combate de la tecnología de pila + Reaccionar Reaccionar-Router + ANTD-Mobile + Axios, forma práctica de hacerlo parte del lado móvil de la última adaptación de VW, en forma de cambio reales abandonado abrazo. Axios petición de reescritura de la biblioteca, por lo que la solicitud se devuelve de forma centralizada. Configuración del entorno de desarrollo puede ser utilizado como un proyecto de semillas, el uso directo cuando comenzar un nuevo proyecto práctico en el trabajo.

representaciones del proyecto:

Tutorial de inicio:

Uno del bastidor delantero Reaccionar de corriente como Facebook lanzó en la actualización de la versión ha estado utilizando el modo suave actualización. Cuando litros nueva versión, o bien añadir o eliminar una cierta API, Reaccionar versión compatible hacia atrás puede hacer, es utilizar una versión anterior de la redacción, el último paquete de React puede hacer soporte básico. Esta no es una excepción, en los introduce liberación v16.8 una nueva API, llamada Reaccionar ganchos. La explicación oficial es que los tres puntos de referencia

• Completamente opcional. No es necesario volver a escribir el código existente puede tratar ganchos en algunos componentes. Pero si usted no quiere, usted no tiene que ir ahora a aprender o utilizar ganchos.
• 100% compatible hacia atrás. Ganchos no contiene cambios destructivos.
• Ahora está disponible. Ganchos publicado en v16.8.0.

Reaccionar Reaccionar oficial no hay planes para eliminar de la clase, pero creo que el futuro cercano, los ganchos será utilizado por una amplia gama. Hooks pueden abarcar escenarios en contraste Clase todos los componentes y proporciona una mayor capacidad de flexibilidad, la capacidad de prueba y la reutilización de código. Ganchos no afectarán su comprensión del concepto de React. Por el contrario, los ganchos proporciona una API más directa se conoce Reaccionar concepto: puntales, el estado, el contexto, los árbitros y ciclo de vida. En capítulos posteriores, se presentó al autor de una en una API que aparece arriba.

Dan Abramov en el social, su generosa sitio de redes sociales también da su opinión.

Ganchos serán el futuro de React.

¿Por qué ya no se necesita Componentes de Clase

No es razonable, Reaccionar Ganchos problema a resolver es la participación del Estado, siguientes render-accesorios y componentes de orden superior del tercer sistema de distribución del estado, el infierno no JSX problema de anidación. Este estado se refiere a la lógica de estado, el estado lógico de la llamada reutilización sería más apropiado, ya que sólo los datos compartidos procesamiento lógico, no comparten datos en sí.

Antes Reaccionar ganchos puso en marcha, Reaccionar habría sido una función de los componentes, el componente ya ha una función, ¿por qué debería empezar a introducir componentes de clase que?

Reaccionar montaje anterior estado ausencia (estado) se divide en dos, como sigue.

// 有状态组件
class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: 'Hello World'
    }

    render() {
      return <div>{text}</div>
    }
  }
}

// 无状态组件
// 状态通过父组件传入
const Hello = (props) => <div>{props.text}</div>

Podemos pasar este contexto ensamblaje de clase para guardar y estado de acceso (estado), pero la función de este componente es difícil de sostener el estado en su alcance, imagina si ejecuta la función de nuevo, entonces todo el estado se restablecerá. Así hemos sido preparados por el estado de montaje para su uso en forma de clase.

Ganchos escribir componentes de la función, cómo se va a mantener el estatus que

Reaccionar fibra averiguar sobre los alumnos deben saber que, de hecho, los componentes de la clase de estado almacenadas en la propiedad memoizedState fibra, no en la clase de this.state. Por lo tanto, en el estado retrospectiva Reaccionar componentes Hooks, de hecho, es visitar propiedades memoizedState sobre la fibra, al parecer, el problema está resuelto.

La comparación de estos dos tipos de escritura

la escritura pesada.

Aquí es un montaje sencillo del código escrito en forma de clase.

import React, { Component } from "react";

export default class MyButton extends Component {
  constructor() {
    super();
    this.state = {
      text: "点击"
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      text: "改变"
    });
  }
  render() {
    const { text } = this.state;
    return <button onClick={this.handleClick}>{text}</button>;
  }
}

Sólo tiene un componente de botón, la cantidad de código ha estado cerca tanto como 20 líneas, 20 líneas se puede sentir que no es mucho, pero cuando los componentes internos necesitan controlar algunos de estado cuando no es sólo la cantidad de código en la línea 20 de manera sencilla. Reaccionar incluyendo todo el proyecto por los diversos componentes se ensamblan entre sí, las capas anidadas, junto con los plug-ins de gestión de estado tales como Redux, MOBX, etc., sería un "desastre".

En contraste Ganchos redacción:

import React from "react";

export default const MyButton = () => {
  const [text, setText] = useState('点击')
  return <button onClick={setText('改变')}>{text}</button>
}

Antes de que aparezca ganchos, Reaccionar También es posible componentes de la función de escritura, pero sólo se puede escribir algunos componentes puros sin estado (componente puro), que es, no puede tener sus propias variables de estado internas. Ganchos superiores a los implementos de código en función de su componente de gestión de estado, no sólo de la cantidad de código se controla, sino también el sencillo escribir mucho. Restringido a los navegadores modernos, todas las últimas ES6 + redacción, no todos los navegadores apoyarán. componentes clase de escritura después de babel compiladas compilados en ES5 escrito a todos los principales navegadores de apoyo y de ejecución. Esto conduce a una multi-capa de ensamblaje después de la código compilado clase herencia de componente función React.Component, desde esta perspectiva, el código Hooks fraseología compilado se reduce para reducir el tamaño del paquete de haz.

componentes complejos se vuelven difíciles de entender.

Con el aumento en código ensamblador, el estado está estrechamente relacionada con el estado, tratando de dividir el cuidadoso montaje se convertiría en difícil. Repita la lógica emergente entre los diferentes componentes del ciclo de vida y la función, momento en el cual el proyecto se convierte en imposible de mantener.

Entorno de desarrollo para construir

Cursos para un total de 10 capítulos, capítulos 1 a 8 y ejemplos para explicar los principios de los principales capítulos 9 a 10 para la sección de combate.

Así Capítulo 1-8 sólo tiene que completar el código interno para explicar el curso del proyecto a través de la herramienta de inicialización crear una reacción aplicación proporcionada por el funcionario.

En primer lugar, el equipo debe ser instalado ambiente Nodo.

Nodo y detecta la versión actual de la versión MNP, utilizan la línea de comandos.

node -v
npm -v

Si ya ha instalado los estudiantes se imprimirá la versión nodo correspondiente, por supuesto, la construcción también de laboratorio proporciona un entorno de desarrollo front-end construida de nodo y MNP, el paquete CNPM se ha instalado en el mundial, los estudiantes hacen uso de la instalación CNPM node_modules paquete, ya que algunos paquetes son en el servidor extranjera utilizando NPM puede instalarse directamente sobre o no requerir un largo período de tiempo, por la experiencia de desarrollo de todo el mundo no es bueno.

Instalación Global crear una reacción aplicación.

cnpm install create-react-app -g

Después de la instalación, la instrucción puede ser generada por el proyecto.

// my-app 为项目文件夹的名字，可自定义
npx create-react-app my-app
or
npm init react-app myapp

Después de la inicialización del proyecto, entró en la carpeta de ejecución NPM empezar a iniciar el proyecto, será el puerto por defecto 3000, y el laboratorio de la construcción de entorno de desarrollo en línea único puerto abierto 8080, por lo que vamos a presentar una secuencia de comandos para hacer algunos cambios.

Hay dos formas de cambiar el entorno de crear una reacción aplicación el desarrollo del programa de inicialización habilitar el puerto.

• secuencias de comandos modifican package.json de la propiedad.

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

Tenga en cuenta que, si se recomienda que los usuarios de Windows antes de PUERTO además de una cruz-env, necesidad -D para descargar el desarrollo de dependencia devDependencies por CNPM instalación cruzada env.

cruz-env se está ejecutando una multiplataforma establecer las variables de entorno y el uso de la escritura .cross-env le permite utilizar un solo comando, sin tener que preocuparse de ajustar o utilizar las variables de entorno correctas para la plataforma.

• Mediante la modificación de node_modules / reaccionan-scripts / guiones del número de puerto / línea 60 start.js guión, de la siguiente manera.

// line 60
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8080;

Después de modificar el puerto, la apertura de la derecha de la "Web Services", se abrirá una página de Internet en un navegador, como se muestra a continuación.

Abra su navegador, se encontrará con el siguiente error.

La razón es que el entorno de edificios de laboratorio se activa en línea en el protocolo https, y actualizaciones del proyecto mediante un acuerdo de ws caliente, por lo que necesitamos el cambio WSS WS protocolo de acuerdo. Abrir el proyecto node_modules directorio, encontrar node_modules / reaccionar-dev-utils / webpackHotDevClient.js guión, la línea 60 será modificado para WSS siguiente figura.

Npm inicio de ejecución de re-iniciar el proyecto, una vez más la apertura de los "Servicios Web", tal como se muestra a continuación, el experimento tiene éxito entorno de configuración.

Cuando el proyecto se está ejecutando estudiantes con TOC puede apagar eslint, el método específico de comandos ejecuta en primer lugar:

npm run eject

Un directorio raíz será más carpeta de configuración, la carpeta en las webpack.config.js guión abierto, el eslint configuración cerrada, como se muestra en la figura.

Después de que los contenidos de las notas caja roja, reiniciar el proyecto, no se mostrará error de sintaxis de línea de comandos eslint.

El espacio es limitado, ha presentado hoy aquí, los estudiantes en el frente y reaccionar Ganchos interesado, bienvenido al edificio del laboratorio lado golpear Código mientras estudiaba ~