javascript - props - Función de flecha React.createClass vs. ES6

react getdefaultprops

Question

Soy nuevo en React y trato de manejar la sintaxis.

Estoy desarrollando en un entorno React 15 (usando la plantilla reaccionar-iniciar) y he estado usando la sintaxis en la VERSIÓN 2 a continuación, pero la mayoría de los ejemplos y tutoriales que encuentro en las páginas React de Facebook son VERSIÓN 1. ¿Cuál es la diferencia entre los dos y cuando debería usar el uno sobre el otro?

VERSIÓN 1

var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        // some list
      </ul>
    );
  }
});

module.exports = MyOtherComponent;

VERSIÓN 2

const MyComponent = () => (
  <ul>
    // some list
  </ul>
);

export default MyComponent;

Answer 1

Para agregarse, a partir de la reacción 15.5.0, React.createClass quedará obsoleto. Le recomiendan que se mueva a la clase ES2015 o use la función de flecha.

Cuando se lanzó inicialmente React, no había una forma idiomática de crear clases en JavaScript, por lo que proporcionamos la nuestra: React.createClass.

Más tarde, las clases se agregaron al lenguaje como parte de ES2015, por lo que agregamos la capacidad de crear componentes de React utilizando clases de JavaScript. Junto con los componentes funcionales, las clases de JavaScript son ahora la forma preferida de crear componentes en React.

Para sus componentes createClass existentes, le recomendamos que los migre a clases de JavaScript.

Answer 2

El segundo código es un componente funcional sin estado y es una nueva sintaxis / patrón para definir componentes en función de los props . Fue introducido en React v0.14.

Puede leer más sobre esto en el Blog de React oficial, aquí , en la Documentación de Reacción oficial, aquí .

Estos componentes se comportan como una clase React con solo un método de renderizado definido. Como no se crea ninguna instancia de componente para un componente funcional, cualquier ref añadida a uno evaluará null. Los componentes funcionales no tienen métodos de ciclo de vida, pero puede establecer .propTypes y .defaultProps como propiedades en la función.

Este patrón está diseñado para fomentar la creación de estos componentes simples que deben comprender grandes porciones de sus aplicaciones. En el futuro, también podremos realizar optimizaciones de rendimiento específicas para estos componentes al evitar controles innecesarios y asignaciones de memoria.

• ¿Cual es la diferencia?

  Este patrón es similar al "tradicional", excepto por el hecho de que está utilizando funciones simples en lugar de métodos definidos en una clase. Esto puede ser útil cuando desee extraer funciones de la clase (por ejemplo, para legibilidad y limpieza).

  Una cosa importante a tener en cuenta es que un componente funcional es solo eso, una función . No es una clase. Como tal, no hay global this objeto. Esto significa que cuando estás haciendo un render , básicamente estás creando una nueva instancia de un ReactComponent , dejando de lado la posibilidad de que estos objetos javascript se comuniquen entre sí a través de this . Esto también hace que el uso del state y de cualquier método de ciclo de vida sea imposible como consecuencia.

• ¿Cómo se beneficia mi aplicación?

  Actuación
  Cuando se utilizan componentes funcionales sin estado, React es lo suficientemente astuto como para omitir todos los métodos de ciclo de vida "tradicionales", lo que resulta ser una buena cantidad de optimizaciones. El equipo de React ha declarado que planean implementar más optimizaciones en el futuro para las asignaciones de memoria y reducir la cantidad de cheques.

  Adaptabilidad
  Como solo estamos hablando de una función (y no de una clase), no tenemos que preocuparnos por el state , los métodos del ciclo de vida u otras dependencias. Dado los parámetros, la función siempre dará el mismo resultado. Como tal, es muy fácil adaptar dichos componentes donde queramos, lo que también facilita las pruebas.

  Con los componentes funcionales sin estado de React, cada componente se puede probar fácilmente de forma aislada. No se necesitan burlas, manipulaciones de estado, bibliotecas especiales o arneses de prueba complicados.

  Alienta las mejores prácticas
  React se compara a menudo con el patrón V del MVC porque está diseñado para crear vistas. Las formas "tradicionales" de crear componentes hacen que sea más fácil "piratear" la lógica comercial (por ejemplo, con el state o el ref ) en componentes que realmente solo deberían manejar la lógica de representación. Fomentan la pereza y escriben un código maloliente. Sin embargo, los componentes funcionales sin estado hacen que sea casi imposible tomar tales atajos y forzar el mejor enfoque.

• ¿Cuándo debería usar uno sobre el otro?

  En general, ¡se recomienda usar el nuevo patrón siempre que sea posible! Si solo necesita un método de render , pero no métodos o state ciclo de vida, use este patrón. Por supuesto, a veces necesitas usar el state , en cuyo caso estás bien usando el patrón tradicional.

  Facebook recomienda usar componentes sin estado cada vez que represente componentes de presentación estáticos. Luego, si se necesita algún tipo de estado, simplemente envuelva esos en un componente con estado para administrarlos usando su state y enviando props a los componentes sin estado.