Inspirado por los artículos leídos en el medio, decidí escribir mi artículo y decirte cómo evitar los errores más comunes en tu aplicación React y por qué necesitas hacer esto.
Todo el código está escrito en estilo ES6, por lo que para repetirlo debe usar Babel en su proyecto (¿y hay otros que no lo usan?).
Traté de explicar cada error con el mayor detalle posible, por lo tanto, mi artículo está más enfocado en desarrolladores jóvenes que todavía están en busca de nuevos conocimientos. Aunque, me parece, un desarrollador experimentado puede encontrar un par de cosas interesantes para sí mismo en este artículo.
Si estás interesado, entonces bienvenido a cat.
Entre paréntesis antes de cada párrafo, dejé un enlace a la regla eslint. Más tarde puede encontrarlos en git y agregarlos a su proyecto.
(reaccionar / prohibir-componentes-accesorios)
El primer error común es pasar 'style' y 'className' como accesorios a su componente. Evite esto ya que agrega mucha complejidad a sus componentes.
En cambio, puede usar la biblioteca 'classnames' y agregar variaciones interesantes a su componente (si usa clases css):
const { hasError, hasBorder } = this.props; const componentClasses = classnames({ 'your-component-main-class': true, 'your-component-main-class_with-error': hasError, 'your-component-main-class_with-border': hasBorder, });
(reaccionar / prohibir-prop-tipos)
El siguiente error no es propTypes informativos. No utilice PropTypes.any, PropTypes.array y PropTypes.object. Describe tus accesorios lo más detallado posible. Esto le permitirá dejar buena documentación para el futuro, y usted (u otro desarrollador) se lo agradecerá muchas veces.
class MyComponent extends React.Component { static propTypes = { user: PropTypes.shape({ id: PropTypes.number, name: PropTypes.string, }), policies: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, type: PropTypes.string, value: PropTypes.string, }), } }
(reaccionar / prohibir-tipos-prop-extranjeros)
Continuemos con propTypes. No use propTypes de otro componente:
import SomeComponent from './SomeComponent'; SomeComponent.propTypes;
Cree un archivo en el que mantendrá sus propTypes globales en orden:
import { userShape, policiesArray } from '../common/global_prop_types';
Esto ayudará a babel-plugin-transform-react-remove-prop-types a eliminar propTypes del código de producción y hacer que su aplicación sea un poco más fácil.
(reaccionar / no-access-state-in-setstate)
El siguiente error es muy interesante:
class MyComponent extends React.Component { state = { counter: 1, }; incrementCounter = () => this.setState({ counter: this.state.counter + 1 }); massIncrement = () => { // this code will lead to not what you expect this.incrementCounter(); this.incrementCounter(); } }
Debido a que setState es una función de estado asíncrona, en ambos casos será la misma.
this.state.counter será 1 y obtendremos:
incrementCounter = () => this.setState({ counter: 1 + 1 }); incrementCounter = () => this.setState({ counter: 1 + 1 });
Para evitar esto, puede usar la devolución de llamada setState que recibe el estado como argumento:
incrementCounter = () => this.setState((prevState) => ({ counter: prevState.counter + 1 }));
(reaccionar / no-array-index-key)
Este error también es muy común, por lo tanto, lea cuidadosamente y evítelo en el futuro:
users.map((user, index) => ( <UserComponent {...user} key={index} /> ));
React usa la clave de apoyo como un enlace al elemento DOM, y esto lo ayuda a encontrar y representar rápidamente el componente necesario (todo, por supuesto, es más complicado, pero lo simplifiqué a propósito).
¿Qué sucede si agrega un nuevo usuario en el medio de la matriz? React se verá obligado a volver a representar todos los componentes de usuario después de agregar uno nuevo, ya que el índice se cambiará para una gran cantidad de componentes. Use claves únicas en su lugar. Una salida muy simple es la identificación que obtienes de tu base de datos:
users.map((user) => ( <UserComponent {...user} key={user.id} /> ));
(react / no-did-mount-set-state), (react / no-did-update-set-state)
Este error también es muy común en mi práctica. Si intenta actualizar el estado en el método componentDidUpdate, obtendrá un bucle de renderizado infinito. React inicia una comprobación para volver a representar cuando el componente cambia de estado o de accesorios. Si cambia de estado después de que el componente esté montado en el DOM o ya se haya actualizado, ejecutará la verificación una y otra vez ...
Al actualizar el estado en componentDidMount, puede llamar al componente re-render una vez más, ya que la función se llama una vez después de que el componente se monte en el DOM.
Si necesita actualizar los datos después de montar el componente, sugiero usar variables de clase:
class MyComponent extends React.Component { componentDidMount() { this.veryImportantDataThatCanBeStoredOnlyAfterMount = 'I'll be back!'; } veryImportantDataThatCanBeStoredOnlyAfterMount = void 0; render() { return <div /> } }
(estado de reacción / no-mutación directa)
La mutación estatal es un gran error. Una mutación estatal no controlada conducirá a errores indetectables y, como resultado, a grandes problemas. Mi opinión personal es el uso de inmutable-js , como una biblioteca que agrega estructuras inmutables. Y puede usarlos con Redux / MobX / Any biblioteca de administración de estado. También puede usar deepClone de lodash a clonar y luego mutar el clon, o usar la nueva función JS: desestructuración:
updateStateWrong = () => this.state.imRambo = true; updateStateRight = () => { const clonedState = cloneDeep(this.state); clonedState.imAGoodMan = true; this.setState(clonedState); } updateWithImmutabelJS = () => { const newState = this.state.data.set('iUseImmutableStructure', true); this.setState(data: newState); } updateWithDestructuring = () => this.setState({ ...this.state, iUseDestructuring: true });
(reaccionar / preferir-función sin estado)
Esta regla describe más mejoras en su código y aplicación que un error, pero le recomiendo que siga esta regla. Si su componente no usa estado, conviértalo en un componente sin estado (prefiero el término 'componente puro'):
class MyComponentWithoutState extends React.Component { render() { return <div>I like to write a lot of unneeded code</div> } } const MyPureComponent = (props) => <div>Less code === less support</div>
(reaccionar / prop-types)
Agregue siempre la comprobación del tipo de accesorios (propTypes) si su componente recibe accesorios. Piense en ello como documentar su código. Más de una vez te dirás a ti mismo 'gracias' por esto (y tal vez a mí :)). PropTypes lo ayudará a comprender y comprender lo que su componente puede representar, así como lo que necesita para la representación.
MyPureComponent.propTypes = { id: PropTypes.number.isRequired, // And I know that without id component will not render at all, and this is good. }
(reaccionar / jsx-no-bind)
Un error muy común y grande que vi en el código muchas veces. No utilice la función de enlace y flecha en Jsx. Nunca Más.
El lugar más caluroso del infierno espera al que escribe .bind (esto) en JSX en el controlador de eventos.
Cada vez que se procesa un componente, su función se volverá a crear, y esto puede ralentizar en gran medida su aplicación (esto se debe al hecho de que el recolector de basura se verá obligado a ejecutarse con mucha más frecuencia). En lugar de .bind (esto), puede usar las funciones de Flecha de cierta manera:
class RightWayToCallFunctionsInRender extends React.Component { handleDivClick = (event) => event; render() { return <div onClick={this.handleDivClick} /> } } const handleDivClick = (event) => event; const AndInPureComponent = () => { return <div onClick={handleDivClick} /> }
(reaccionar / jsx-no-target-blank)
Error de seguridad Me parece muy extraño que la gente todavía cometa este error. Mucha gente escribió muchos artículos sobre este tema en 2017.
Si crea un enlace con el atributo target = '_ blank', asegúrese de agregar rel = 'noreferrer noopener'. Muy simple:
<a href="https://example.com" target="_blank" rel="noreferrer noopener" />
Gracias
Eso es todo lo que me gustaría decirte como parte de este artículo. Estaré muy agradecido si ustedes, mis lectores, me dejan sus comentarios o comentarios y comparten su opinión sobre los problemas que describí en este artículo. Además, puede contarme acerca de mis errores y sus errores en el código y sobre todo lo que considere necesario contar. Gracias de nuevo!