React es el framework front-end más popular hoy en día. ¿Tiene alguna experiencia que compartir?

Los usuarios de Zhihu,

Zhan Yanqiao, Zhu Chaoqiang, Zhao Peng y otros están de acuerdo.

Si se trata de una encuesta de selección de tecnología, además de los beneficios, usted También debe saber algunas cosas a las que debe prestar atención. Las preguntas se enumeran a continuación solo como referencia.

1. No caigas en la trampa de las herramientas enredadas

Cuando nuestro equipo comenzó a usar React por primera vez, la pila de herramientas debería ser gruñido-react después de escribir por un tiempo; Sentí que era limitado, y luego el jefe tomó la iniciativa de cambiar la herramienta para tragar browserify watchify reaccionar, y luego lo escribí felizmente durante aproximadamente medio año y descubrí que todas las bibliotecas populares estaban en el paquete web; se convirtió en gulp webpack babel-loader. Al final, todos estuvieron de acuerdo en que gulp era redundante, por lo que nuestra pila de herramientas se reconstruyó en torno a webpack. Recientemente, para un proyecto interno del que era responsable, se crearon juntos hot-module-replacement y extract-text-plugin (cosas que te permiten requerir('style.scss') en js; escrito así). Por supuesto, más tarde, debido a las necesidades del negocio, construimos nuestra propia herramienta de construcción basada en webpack, que es una historia más adelante...

Este casi año y medio de arduo trabajo te dice que 1) el frente El final es un gran problema. 1 Si no aprendes nuevos conocimientos durante un mes, la comunidad te olvidará. 2) Estoy muy feliz de usar React ahora. La pila de herramientas es básicamente estable (¿por qué no?). ¡No entiendes cómo usar webpack!), y no tienes que perder demasiado tiempo luchando.

PD. HMR es así. Aunque Dan se jacta de ello, de hecho, en el proyecto, descubrí que todos todavía están acostumbrados a usar Cmd R manualmente, porque cuando el El proyecto se vuelve grande, la reconstrucción también requerirá 1, 2 segundos.

2. Las operaciones DOM son inevitables

Pero para cualquier proyecto front-end de cierta escala, es básicamente imposible sin operaciones DOM. Sin mencionar los "puntos enterrados" de back-end más comunes, debe usar la API DOM para obtener el valor. Tomemos el más simple, como el botón "Volver al principio" en el lado derecho. escribiéndolo puramente en React. Por supuesto, hablará sobre requestAnimationFrame y ReactCSSTransitionGroup, bla, bla, bla. Cuando ingrese al proyecto, encontrará que la API DOM es simple.

3. Adopte ES 6, adopte React v0.14

¿Por qué se mencionan estos dos juntos? Es porque React v0.14 propone un nuevo concepto de componente llamado: Ninguno Componentes funcionales sin estado. . Probablemente se vea así:

var Aquarium = ({species}) =gt (

{getFish(species)}

); >

¿Has notado que el método tradicional createClass es mucho más simplificado? Por supuesto, escribir componentes de esta manera también tiene muchas limitaciones, como no poder declarar varios métodos de ciclo de vida, etc. En los escenarios comerciales finales, no hay pocos componentes de renderizado puro. Una vez que se introduce dicha sintaxis, podemos extraer estos componentes de manera más conveniente y reutilizarlos.

Además, adoptar ES 6 tiene muchos beneficios. Por ejemplo, al cargar dependencias, no es necesario primero var xxx = require('xxx'); ; en su lugar, puede importar directamente { y} desde 'xxx'; Conciso y claro.

4. El entorno ecológico sigue creciendo y hay muchos obstáculos.

Lo primero que hay que criticar verbalmente y verbalmente es reaccionar-router. Comenzamos a usarlo desde v0. .10 hasta ahora v1.0. ¿Sabe cuántas veces hemos cambiado el código comercial para actualizar esto? La API debe cambiarse cada vez que actualizamos y no me puedo quejar. Finalmente entendí la versión 0.11 en ese entonces y escribí un artículo técnico para compartir en mi blog. Como resultado, me instaron constantemente a realizar actualizaciones en los días siguientes... Hace un mes me tomé el tiempo para reescribir el tutorial para la versión. 0.13. ¡Esta no es la versión 1.0! ¡Está disponible nuevamente y la API es básicamente diferente! ! ¡Es diferente! ! ¡Mismo! ! ¡Eso es todo!

Por supuesto, además de los fosos, también existen muchos productos ecológicos y medioambientales de alta calidad, como Ant Design.

5. La representación del lado del servidor es hermosa, pero todavía no he visto ningún producto a gran escala que la use.

Tal vez sea un ignorante, haga un seguimiento en los comentarios. Busqué y escribí la representación del lado del servidor más simple, pero si este conjunto de lógica se aplica a nuestra lógica de negocios actual, casi se puede eliminar directamente. Hay demasiadas compensaciones que es necesario hacer para lograr la representación del lado del servidor.

6. React es muy simple, pero también difícil.

Es simple porque React tiene muy pocas API. Puedes leer todos los documentos en el sitio web oficial en una tarde. Mire Angular nuevamente en este momento...). Pero cuando crea que realmente comprende React, eche un vistazo a la serie de análisis del código fuente de React - Descifrando setState - renderizado puro - columna Zhihu La pregunta formulada al principio de este artículo, ¿cuántas personas pueden responderla correctamente sin pensar (por el cierto, Amway, la columna Zhihu de nuestro equipo, actualmente obsesionada con React)

Cuando realmente usas React en proyectos comerciales, encontrarás que su ciclo de vida es más complicado de lo que piensas. La lógica detrás de la API es; Más complicado de lo que crees. Por supuesto, primero debes entrar en este pozo.

7. Con respecto a la respuesta de alguien de arriba que dijo que el libro "React: A User Interface Development Framework Leading the Future" es demasiado difícil, como uno de los traductores, lo siento por usted. Como compensación, todos los estudiantes que compren este libro pueden enviarme un mensaje privado con fotos para consultar sobre temas relacionados con React.

Finalmente, echemos un vistazo a la columna de nuestro equipo: renderizado puro - columna Zhihu

8. Desperté de mi sueño y agregué que, hasta ahora, Babel 6 es un gran pozo. , y no es adecuado para su uso en los negocios. Asegúrese de prestar atención a la gran diferencia entre este y Babel 5. (En cuanto a este punto complementario, permítame explicarlo más. Debe entenderse que Babel 5 ha realizado algunas conversiones no estándar para permitir que todos puedan usar felizmente ES 6. Estas conversiones se eliminaron en Babel 6. Así que estás en Babel 5 El código que se compila normalmente a continuación puede fallar cuando se compila con Babel 6. Este problema no puede considerarse definitivamente como un error de Babel, pero afectará el progreso de su desarrollo)