React-ace: O navegador está travado e a memória continua aumentando após digitar no editor

Criado em 6 jul. 2017 · 4Comentários · Fonte: securingsincity/react-ace

Problema

defina maxLines como 1 ou 2, com onLoad defina o modo de quebra automática como verdadeiro ao mesmo tempo, clique antes da última chave e digite o botão Enter para fazer a formatação do editor automaticamente, você encontrará o o navegador travou e a memória aumentou.

Amostra de código para reproduzir seu problema

<AceEditor
      mode="json" maxLines={2} value={"{\"a\":\"b\"}"}
      onLoad={editor => editor.getSession().setUseWrapMode(true)}
/>

ou visite o projeto simples react-ace-editor-issuse

Referências

Memória inicial e CPU
tim 20170706095723
10 segundos após digitar o botão Enter
tim 20170706095813

Progresso em: #
Win 10 / Chrome 58 e IE 11 / React 15.6.1

bug unable to reproduce

Fonte

SecMao

👍1

Comentários muito úteis

Estou usando o React v16.4, react-ace v6.1.2

configuração com create-react-app
e teste com o código abaixo, definindo AceEditor com maxLines e wrapEnabled

class App extends React.Component {
  render() {

    const props = {
      mode: 'javascript',
      theme: 'monokai',
      value: 'const test = \'hello loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text\'',
      maxLines: 1,
      wrapEnabled: true,
    };

    return (
      <div>
        <AceEditor {...props} />
      </div>
    );
  }
}

e isso causará aumento da CPU e da memória

hirohe em 28 jun. 2018

👍2

Todos 4 comentários

Consideramos sair de https://github.com/JedWatson/react-codemirror porque pelo menos no momento não é bem mantido (também conhecido como o mantenedor não se funde ou reage aos PRs), mas este aqui é um bloqueador que impede isso .

inoas em 12 jul. 2017

@SecMao Não consigo reproduzir no meu mac. Precisarei encontrar um laptop Windows para reproduzir.

@inoas você conseguiu reproduzir este problema? Vejo alguns comentários mencionando que você estava pensando em mudar do codemirror, mas não está claro se você viu esses problemas localmente.

securingsincity em 18 jul. 2017

Ainda não fizemos a mudança e tentaremos reproduzi-lo se o fizermos e relatar em qualquer um dos casos (sem vazamento ou "parece que" vazamento)

inoas em 19 jul. 2017

Estou usando o React v16.4, react-ace v6.1.2

configuração com create-react-app
e teste com o código abaixo, definindo AceEditor com maxLines e wrapEnabled

class App extends React.Component {
  render() {

    const props = {
      mode: 'javascript',
      theme: 'monokai',
      value: 'const test = \'hello loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text\'',
      maxLines: 1,
      wrapEnabled: true,
    };

    return (
      <div>
        <AceEditor {...props} />
      </div>
    );
  }
}

e isso causará aumento da CPU e da memória

hirohe em 28 jun. 2018

👍2

Esta página foi útil?

0 / 5 - 0 avaliações