React-ace: Der Browser hängt fest und der Speicher wird nach der Eingabe im Editor weiter erhöht

Erstellt am 6. Juli 2017  ·  4Kommentare  ·  Quelle: securingsincity/react-ace

Problem

setze maxLines als 1 oder 2, mit onLoad setze gleichzeitig den Umbruchmodus auf true, klicke vor der letzten geschweiften Klammer und tippe die Eingabetaste ein, damit der Editor automatisch formatiert wird Browser stecken und die Speichererhöhung.

Beispielcode zum Reproduzieren Ihres Problems

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

oder besuchen Sie das einfache Projekt response-ace-editor-issuse

Verweise

Initialspeicher und CPU
tim 20170706095723
10 Sekunden nach Eingabe der Eingabetaste
tim 20170706095813

Fortschritt bei: #
Win 10 / Chrome 58 & IE 11 / Reagieren 15.6.1

bug unable to reproduce

Hilfreichster Kommentar

Ich verwende React v16.4, React-ace v6.1.2

  1. Einrichtung mit create-react-app
  2. und testen Sie mit dem folgenden Code, indem Sie AceEditor mit maxLines und wrapEnabled festlegen
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>
    );
  }
}

und es wird CPU und Speicher erhöhen
image

Alle 4 Kommentare

Wir haben überlegt, von https://github.com/JedWatson/react-codemirror wegzukommen, weil es zumindest im Moment nicht gut gepflegt wird (auch bekannt als der Betreuer nicht zusammenführt oder auf PRs reagiert), aber dies hier ist ein Blocker, der das stoppt .

@SecMao Ich kann auf meinem Mac nicht reproduzieren. Ich muss einen Windows-Laptop finden, um ihn zu reproduzieren.

@inoas konnten Sie dieses Problem reproduzieren? Ich sehe einige Kommentare, in denen erwähnt wird, dass Sie von Codemirror wechseln wollten, aber es ist unklar, ob Sie diese Probleme lokal gesehen haben.

Wir haben den Schritt noch nicht gemacht und werden versuchen, dies zu reproduzieren, wenn wir dies tun, und in beiden Fällen Bericht erstatten (kein Leck oder "sieht aus wie" Leck)

Ich verwende React v16.4, React-ace v6.1.2

  1. Einrichtung mit create-react-app
  2. und testen Sie mit dem folgenden Code, indem Sie AceEditor mit maxLines und wrapEnabled festlegen
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>
    );
  }
}

und es wird CPU und Speicher erhöhen
image

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen