Después MixinLos componentes de alto orden de HOC asumen una gran responsabilidad y se convierten en la solución recomendada para la reutilización lógica entre componentes. Los componentes de alto orden revelan una atmósfera de alto orden por sus nombres. De hecho, este concepto debería derivarse de funciones de orden superior de JavaScript. La función de orden superior es una función que acepta una función como entrada o salida. Se puede pensar que el curry es una función de orden superior. La definición de componentes de orden superior también se da en el React documento. Los componentes de orden superior reciben componentes y devuelven componentes nuevos. función. El significado específico es: Los componentes de alto orden pueden verse como una implementación de React patrón de decoración. Los componentes de orden superior son una función y la función acepta un componente como parámetro y devuelve un nuevo componente. Devolverá un mejorado React componentes. Los componentes de alto orden pueden hacer que nuestro código sea más reutilizable, lógico y abstracto, pueden secuestrar el render método, y también puede controlar propsy state.
Comparando Mixin y HOC, Mixin es un modo mixto. En uso actual, Mixin Sigue siendo muy poderoso y nos permite compartir el mismo método en múltiples componentes, pero también continuará agregando nuevos métodos y atributos a los componentes. El componente en sí no solo puede percibir, sino que también necesita realizar procesamientos relacionados (como conflictos de nombres, mantenimiento de estado, and so forth.). Una vez que aumentan los módulos mixtos, todo el componente se vuelve difícil de mantener. Mixin puede introducir atributos invisibles, como en el Mixin El método utilizado en el componente de renderizado aporta una propiedad invisible. props y states al componente. Mixin pueden depender entre sí y estar acoplados entre sí, lo que no favorece el mantenimiento del código. Además, los métodos en diferentes Mixin pueden entrar en conflicto entre sí. Previamente React recomendado oficialmente el uso Mixin para resolver problemas relacionados con preocupaciones transversales, sino porque utilizar Mixin puede causar más problemas, la recomendación oficial ahora es usar HOC. Componente de alto orden HOC pertenecen a la concept de purposeful programming. Los componentes empaquetados no se darán cuenta de la existencia de componentes de alto orden, y los componentes devueltos por componentes de alto orden tendrán un efecto de mejora funcional en los componentes originales. En base a esto, React recomienda oficialmente el uso de componentes de alto nivel.
A pesar de HOC No tiene tantos problemas fatales, también tiene algunos defectos menores:
- Restricción de escalabilidad:
HOCno puede reemplazar completamenteMixin. En algunos escenarios,Mixinpuede peroHOCno puedo. Por ejemplo,PureRenderMixinporqueHOCno puede acceder alStatede subcomponentes desde el exterior y, al mismo tiempo, filtrar actualizaciones innecesarias a través deshouldComponentUpdate. Por lo tanto,ReactDespués de apoyarES6Class,React.PureComponentse proporciona para resolver este problema. Refproblema de transferencia:Refestá cortado. El problema de la transferencia deRefEs bastante molesto debajo de las capas de embalaje. la funcionRefpuede aliviar parte del mismo (permitiendoHOCpara aprender sobre la creación y destrucción de nodos), por lo que elReact.forwardRef APILa API se introdujo más tarde.WrapperHell:HOCestá inundado yWrapperHellAparece (no hay problema que no pueda resolverse con una capa, si lo hay, entonces con dos capas). La abstracción multicapa también aumenta la complejidad y el costo de comprensión. Este es el defecto más crítico. EnHOCmodo No hay una buena solución.
Ejemplo
Específicamente, un componente de orden superior es una función cuyo parámetro es un componente y el valor de retorno es un componente nuevo. Un componente se convierte props en un UI pero un componente de orden superior convierte un componente en otro componente. HOC es muy común en React bibliotecas de terceros, como Redux‘s join y Relay‘s createFragmentContainer.
Se debe prestar atención aquí, no intente modificar el prototipo del componente en el HOC de cualquier manera, pero debe usar el método combinado para realizar la función empaquetando el componente en el componente contenedor. En circunstancias normales, hay dos formas de implementar componentes de alto orden:
- Agente inmobiliario
Props Proxy. - herencia inversa
Inheritance Inversion.
Agente de propiedad
Por ejemplo, podemos agregar un almacenado id valor del atributo al componente entrante. Podemos agregar un props a este componente a través de componentes de alto orden. Por supuesto, también podemos operar en el props en el WrappedComponent componente en JSX. Tenga en cuenta que no es para manipular el mensaje entrante. WrappedComponent clase, no debemos modificar directamente el componente entrante, pero podemos operar sobre él en el proceso de combinación.
También podemos utilizar componentes de alto orden para cargar el estado de nuevos componentes en los componentes empaquetados. Por ejemplo, podemos utilizar componentes de alto orden para convertir componentes no controlados en componentes controlados.
O nuestro propósito es envolverlo con otros componentes para lograr el propósito de diseño o estilo.
herencia inversa
La herencia inversa significa que el componente devuelto hereda el componente anterior. En herencia inversa, podemos hacer muchas operaciones, modificar state, props e incluso voltear el Factor Tree. Hay un punto importante en la herencia inversa: la herencia inversa no puede garantizar que se analice el árbol de subcomponentes completo. Eso significa que si el árbol de elementos analizado contiene componentes (operate tipo o Class tipo), los subcomponentes del componente ya no se pueden manipular.
Cuando utilizamos la herencia inversa para implementar componentes de alto orden, podemos controlar la representación mediante el secuestro de representación. Específicamente, podemos controlar conscientemente el proceso de renderizado de WrappedComponent para controlar los resultados del management de renderizado. Por ejemplo, podemos decidir si renderizar componentes según algunos parámetros.
Incluso podemos secuestrar el ciclo de vida del componente authentic reescribiéndolo.
Dado que en realidad es una relación de herencia, podemos leer la props y state del componente. Si es necesario, incluso podemos agregar, modificar y eliminar el props y state. Por supuesto, la premisa es que usted mismo debe controlar los riesgos provocados por la modificación. En algunos casos, es posible que necesitemos pasar algunos parámetros para los atributos de orden superior, luego podemos pasar los parámetros en forma de curry y cooperar con los componentes de orden superior para completar una operación related al cierre del componente.
nota
No cambies los componentes originales.
No intente modificar el prototipo del componente en HOCo cambiarlo de otras maneras.
Hacerlo tendrá algunas consecuencias indeseables. Una es que el componente de entrada ya no se puede utilizar como antes. HOC realce. Lo que es más grave es que si usas otro HOC eso también modifica componentDidUpdate para potenciarlo, el anterior HOC será inválido, y esto HOC no se puede aplicar a componentes funcionales que no tienen ciclo de vida.
Modificando el HOC del componente entrante es una mala abstracción, y la persona que llama debe saber cómo se implementan para evitar conflictos con otros HOC. HOC no debe modificar los componentes entrantes, pero debe utilizar una combinación de componentes para lograr funciones empaquetando los componentes en componentes contenedores.
Accesorios de filtro
HOC agrega características a los componentes y no debería cambiar significativamente la convención en sí. Los componentes devueltos por HOC Debe mantener interfaces similares con los componentes originales. HOC debe transmitir de forma transparente props que no tienen nada que ver consigo mismo, y la mayoría HOC debe incluir un render método related al siguiente.
Máxima componibilidad
No todos HOCs son iguales. A veces sólo acepta un parámetro, que es el componente empaquetado.
const NavbarWithRouter = withRouter(Navbar);
HOC Por lo common, puede recibir múltiples parámetros. Por ejemplo, en RelayHOC recibe además un objeto de configuración para especificar la dependencia de datos del componente.
const CommentWithRelay = Relay.createContainer(Remark, config);
Las firmas HOC más comunes son las siguientes: join es una función de orden superior que devuelve componentes de orden superior.
Esta forma puede parecer confusa o innecesaria, pero tiene una propiedad útil, como el parámetro único HOC devuelto por el join la función tiene la firma Part => Part y funciones con el mismo tipo de salida y tipo de entrada se pueden combinar fácilmente. Los mismos atributos también permiten join y otros HOCs asumir el papel de decorador. Además, muchas bibliotecas de terceros proporcionan funciones de herramientas de redacción, incluidas lodash, Reduxy Ramda.
No makes use of HOC en el método de renderizado.
React ‘s diff El algoritmo utiliza el identificador del componente para determinar si debe actualizar el subárbol existente o descartarlo y montar el nuevo subárbol. Si el componente regresó del render es el mismo que el componente en el render anterior ===, React pasa El subárbol se distingue del nuevo subárbol para actualizar recursivamente el subárbol, y si no son iguales, el subárbol anterior se descarga por completo.
Por lo common, no es necesario tener esto en cuenta al usarlo, pero es muy importante para HOCporque significa que no debes aplicar HOC a un componente en el render método del componente.
Esto no es sólo una cuestión de rendimiento. Volver a montar el componente provocará la pérdida del estado del componente y de todos sus subcomponentes. si el HOC se crea fuera del componente, el componente solo se creará una vez. Así que cada vez que tu render Será el mismo componente. En términos generales, esto es consistente con el desempeño esperado. En casos excepcionales, es necesario llamar HOC dinámicamente, puede llamarlo en el método del ciclo de vida del componente o en su constructor.
Asegúrese de copiar los métodos estáticos
A veces es útil definir métodos estáticos en React componentes. Por ejemplo, el Relay El contenedor expone un método estático. getFragment para facilitar la composición de GraphQL fragmentos. Pero cuando aplicas HOC a un componente, el componente authentic se empaquetará con un componente contenedor, lo que significa que el nuevo componente no tiene ningún método estático del componente authentic.
Para resolver este problema, puede copiar estos métodos al componente contenedor antes de regresar.
Pero para hacer esto, necesita saber qué métodos se deben copiar. puedes usar hoist-non-react-statics para copiar automáticamente todos losReact métodos estáticos.
Además de exportar componentes, otra solución factible es exportar adicionalmente este método estático.
No se pasarán árbitros.
Aunque la convención de los componentes de alto nivel es pasar todos props al componente empaquetado, esto no se aplica a refsporque ref en realidad no es un propal igual que un keyes manejado específicamente por React. si el ref se agrega al componente de retorno del HOCel ref La referencia apunta al componente contenedor, no al componente empaquetado. Este problema se puede remitir explícitamente al componente interno a través del React.forwardRefAPI refs.
