En función Reaccionar componentes personalizados y clase de uso de los componentes

1, Reaccionar montaje concepto

1.1, el concepto de ensamblaje

aplicaciones reaccionar se construyen en la parte superior del componente.

Reaccionar componente como un núcleo, y es una parte importante de la vista, Ver cada página consta de uno o más componentes que se puede decir es la piedra angular Reaccionar componentes de la aplicación. Reaccionar en la configuración de montaje, los puntos se pueden dividir de acuerdo con la stateful estado y el componente sin estado de montaje.

1.2, las características de los componentes

En el concepto basado en componentes de fondo ya existía desde hace muchos años, pero en los últimos años con el desarrollo de la parte delantera, el concepto comenzó a ser mencionado con frecuencia en la parte delantera, sobre todo en el marco MV *.

Front-end "componentes" de la palabra, esta capa está típicamente en la interfaz de usuario se refiere como "etiquetado", es decir, la mayor parte de la interfaz de tráfico, dividida en varios trozos pequeños y luego ensamblada.

Estrechamente componentización generalmente se refiere etiquetada, es un mecanismo para la etiqueta personalizada (propiedades personalizadas) como el núcleo.

El peine generalizada incluye el conjunto de datos de servicio de las capas lógicas, diferentes niveles de capacidad de formación de paquete.

• normativo

  Cualquiera de los componentes deben cumplir con un conjunto de normas, los desarrolladores pueden hacer diferentes regiones de este estándar para desarrollar un estándar unificado componentes.

• combinación de

  Antes del montaje se debe combinar. Sabemos que los espectáculos de combinación la primera página son algunos de los DOM de HTML, y los componentes de la forma final también puede entenderse como uno de los fragmentos de HTML. Luego formar una pantalla de interfaz completa, ciertamente depende combinación entre los diferentes componentes, anidadas, y la comunicación.

• reutilización

  Cualquier componente debería ser es una entidad separada, de modo que se puede aplicar en diferentes escenarios.

• mantenibilidad

  Cualquier componente debería tener su propio conjunto de estabilidad completa de características, incluyendo la auto-única, independiente de los otros componentes de la lógica, para que sea más fácil de entender, para que sea más fácil de entender, al tiempo que reduce significativamente la posibilidad del error.

2, los componentes personalizados

2.1, componentes de función

componente funcional Stateless mostró una forma que tiene sólo unos render()métodos de clase de componente, o por una función en forma de ES6flechas functionformas creado, y el conjunto es ninguna condición de estado. La creación de formas específicas como sigue

import React from 'react';

//定义一个React组件
function App() {
  return (
    <div>
      hello React...
    </div>
  );
}

export default App;

2.2, componentes de clase

React.ComponentEs una ES6forma de crear componentes reaccionan es extremadamente Reaccionar ha recomendado actualmente manera de crear un componente de estado en forma cambiado de React.Componentla siguiente forma

import React from 'react';

//定义一个React组件
class App extends React.Component{
  render(){
    return (
      <div>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

componente de referencia en otros archivos

import React from 'react';
import ReactDOM from 'react-dom';
//App组件，组件要求大写字母开头
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

2,3 distinción, componentes de clase y funciones de montaje

Creado a partir de un componente constructor llamado "componentes" sin estado;

Con componentes creados a partir de la clase de palabras clave, llamada "componentes con estado";

Hay diferencias esenciales entre el estado del componente de componentes y sin estado es la propiedad estatal presencia o ausencia .

nota:

Use classcomponentes palabras clave crean con sus propios datos privados (this.state) y funciones del ciclo de vida;

Use functioncomponentes creados solamente props, y no tener sus propias funciones de ciclo de vida de los datos privados;

componentes de clases de componentes de función y, por supuesto, hay una diferencia, componentes de clase y rendimiento que el rendimiento del componente función es superior, debido a que los componentes utilizados cuando la clase que se crea una instancia, y la función devuelve el conjunto a tomar resultado de la ejecución directa de la función. Para mejorar el rendimiento, hacer uso de los componentes de la función

diferencia	Componente función	componentes de clase
¿hay this	no	Tienes
¿Hay ciclo de vida	no	Tienes
¿Hay un estado state	no	Tienes