Inspirado pelos artigos lidos no meio, decidi escrever meu artigo e explicar como evitar os erros mais comuns no aplicativo React e por que você precisa fazer isso.
Todo o código é escrito no estilo ES6, portanto, para repeti-lo, você precisa usar o Babel no seu projeto (e existem outros que não o usam?).
Tentei explicar cada erro da maneira mais detalhada possível, portanto, meu artigo é mais focado em jovens desenvolvedores que ainda estão em busca de novos conhecimentos. Embora, me pareça, um desenvolvedor experiente possa encontrar algumas coisas interessantes para ele neste artigo.
Se você estiver interessado, bem-vindo ao gato.
Entre parênteses antes de cada parágrafo, deixei um link para a regra de exclusão. Mais tarde, você pode encontrá-los no git e adicioná-los ao seu projeto.
(reagir / proibir adereços de componentes)
O primeiro erro comum é passar 'style' e 'className' como acessórios para o seu componente. Evite isso, pois você adiciona muita complexidade aos seus componentes.
Em vez disso, você pode usar a biblioteca 'classnames' e adicionar variações interessantes ao seu componente (se você usar classes 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, });
(reagir / proibir prop-tipos)
O próximo erro não é propTypes informativo. Não use PropTypes.any, PropTypes.array e PropTypes.object. Descreva seus objetos o mais detalhado possível. Isso permitirá que você deixe uma boa documentação para o futuro, e você (ou outro desenvolvedor) agradecerá várias vezes.
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, }), } }
(reagir / proibir tipos de prop estrangeiros)
Vamos continuar com propTypes. Não use propTypes de outro componente:
import SomeComponent from './SomeComponent'; SomeComponent.propTypes;
Crie um arquivo no qual você manterá seus propTypes globais em ordem:
import { userShape, policiesArray } from '../common/global_prop_types';
Isso ajudará o babel-plugin-transform- react -remove-prop-types a remover propTypes do código de produção e tornar seu aplicativo um pouco mais fácil.
(estado de reação / sem acesso no estado)
O seguinte erro é muito interessante:
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(); } }
Como setState é uma função de estado assíncrona, nos dois casos será a mesma.
this.state.counter será 1 e obteremos:
incrementCounter = () => this.setState({ counter: 1 + 1 }); incrementCounter = () => this.setState({ counter: 1 + 1 });
Para evitar isso, você pode usar o retorno de chamada setState, que recebe o estado do estado como argumento:
incrementCounter = () => this.setState((prevState) => ({ counter: prevState.counter + 1 }));
(react / no-array-index-key)
Este erro também é muito comum, portanto, leia com atenção e evite-o no futuro:
users.map((user, index) => ( <UserComponent {...user} key={index} /> ));
O React usa a chave prop como um link para o elemento DOM, e isso ajuda a encontrar e renderizar rapidamente o componente necessário (tudo, é claro, é mais complicado, mas eu o simplifiquei de propósito).
O que acontece se você adicionar um novo usuário no meio da matriz? O React será forçado a renderizar novamente todos os UserComponents após a adição de um novo, pois o índice será alterado para um grande número de componentes. Use chaves exclusivas. Uma saída muito simples é a identificação que você obtém do seu banco de dados:
users.map((user) => ( <UserComponent {...user} key={user.id} /> ));
(reagir / não-montou-definir-estado), (reagir / não-atualizar-conjunto-estado)
Este erro também é muito comum na minha prática. Se você tentar atualizar o estado no método componentDidUpdate, obterá um loop infinito de renderização. React inicia uma verificação de nova renderização quando o componente altera o estado ou os props. Se você alterar o estado após o componente ser montado no DOM ou já ter sido atualizado, você executará a verificação novamente e novamente ...
Ao atualizar o estado em componentDidMount, é possível chamar a renderização novamente do componente mais uma vez, pois a função é chamada uma vez após a montagem do componente no DOM.
Se você precisar atualizar os dados após montar o componente, sugiro usar variáveis de classe:
class MyComponent extends React.Component { componentDidMount() { this.veryImportantDataThatCanBeStoredOnlyAfterMount = 'I'll be back!'; } veryImportantDataThatCanBeStoredOnlyAfterMount = void 0; render() { return <div /> } }
(estado de reação / sem mutação direta)
A mutação de estado é um erro muito grande. Uma mutação de estado descontrolada levará a erros indetectáveis e, como resultado, a grandes problemas. Minha opinião pessoal é o uso do immutable-js , como uma biblioteca que adiciona estruturas imutáveis. E você pode usá-los com a biblioteca de gerenciamento de estado Redux / MobX / Any. Você também pode usar o deepClone de lodash para clonar o estado e depois alterar o clone ou usar o novo recurso JS - destructuring:
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 });
(função reagir / preferir sem estado)
Esta regra descreve mais melhorias no seu código e aplicativo do que um erro, mas eu ainda recomendo que você siga esta regra. Se o seu componente não usa state, torne-o um componente sem estado (prefiro o termo '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>
(tipos reag / prop)
Sempre adicione a verificação do tipo de adereços (propTypes) se o seu componente receber adereços. Pense nisso como documentar seu código. Mais de uma vez, você dirá para si mesmo 'obrigado' por isso (e talvez para mim :)). O PropTypes ajudará você a entender e entender o que seu componente pode renderizar, bem como o que ele precisa para renderizar.
MyPureComponent.propTypes = { id: PropTypes.number.isRequired, // And I know that without id component will not render at all, and this is good. }
(react / jsx-no-bind)
Um erro muito comum e grande que eu vi no código várias vezes. Não use a função Bind And Arrow no Jsx. Nunca. Mais.
O lugar mais quente do inferno aguarda quem escreve .bind (this) em JSX no manipulador de eventos.
Cada vez que um componente é renderizado, sua função será recriada, e isso pode tornar o aplicativo muito mais lento (devido ao fato de o coletor de lixo ser forçado a executar com muito mais frequência). Em vez de .bind (this), você pode usar as funções de seta de uma certa maneira:
class RightWayToCallFunctionsInRender extends React.Component { handleDivClick = (event) => event; render() { return <div onClick={this.handleDivClick} /> } } const handleDivClick = (event) => event; const AndInPureComponent = () => { return <div onClick={handleDivClick} /> }
(react / jsx-no-target-blank)
Bug de segurança. Parece-me muito estranho que as pessoas ainda cometam esse erro. Muitas pessoas escreveram muitos artigos sobre esse tópico em 2017.
Se você criar um link com o atributo target = '_ blank', certifique-se de adicionar rel = 'noreferrer noopener' a ele. Muito simples:
<a href="https://example.com" target="_blank" rel="noreferrer noopener" />
Obrigada
É tudo o que gostaria de lhe dizer como parte deste artigo. Ficarei muito grato se vocês, meus leitores, me deixarem seus comentários ou comentários e compartilharem sua opinião sobre os problemas que descrevi neste artigo. Além disso, você pode me contar sobre meus e seus erros no código e sobre tudo o que considerar necessário. Mais uma vez obrigado!