Erfahrung beim Schreiben einer Website mit React

Der Zweck der Entwicklung dieser Website besteht hauptsächlich darin, einige Notizen aufzuzeichnen und einige Informationen zusammenzufassen. Sie kann auch als ruhiger Ort in der Online-Welt angesehen werden, an dem Sie einige technische Ideen üben können.

Das Frontend der Website wurde zunächst mit vue entwickelt, da der Entwicklungsfortschritt des Projekts nicht mehr so ​​dringend war, hatte ich etwas Freizeit. Ich hatte React noch nie benutzt und war immer noch besorgt darüber, also habe ich einfach React verwendet, um das Frontend zu rekonstruieren.

Der einfachste Weg, eine neue Technologie zu erlernen, besteht natürlich darin, die relevanten Dokumente zu lesen. Da es sich um eine einseitige Anwendung handelt, kann das Front-End-Routing natürlich nicht weggelassen werden, und die Verwendung von React würde sich umständlich anfühlen wenn Reduce nicht verwendet wird, spielen sie keine Rolle (obwohl sie eigentlich keine notwendige Beziehung haben). Daher werden hier react, react-router verwendet. Ich freue mich, dass Sie diesen Artikel gelesen haben Ich übernehme keine Verantwortung, wenn Sie versehentlich in eine Grube geführt werden. react-reduxReactAls Erstes lesen Sie die Dokumentation von

. Das Dokument verwendet eine große Anzahl von Beispielen, um die Verwendung von

für die Entwicklung vorzustellen, z. B. wie man React und React entwirft , wie man zwischen Komponenten kommuniziert und wie man Komponenten entwirft. Obwohl das Dokument es ausführlich vorstellt, erfordert es oft echte Übung, um die Schönheit zu entdecken. Beispielsweise besteht das Design von state und props aus zwei Komponenten state und props in einer X-Komponente. Angenommen, die Y-Komponente verfügt über ein Eingabefeld und die Z-Komponente benötigt möglicherweise zu verwenden YDer von der Komponente eingegebene Wert ändert sich bis zu einem gewissen Grad. Natürlich ist es nicht unmöglich, sie zusammen zu schreiben, aber unter Berücksichtigung von Faktoren wie der Wiederverwendung von Komponenten und einzelnen Funktionen ist es sinnvoller, sie zu trennen Von welcher Komponente soll dieser Wert stammen? Was ist mit der Speicherung? Die folgenden beiden Komponenten sind Z bzw. Y. Dieses Design entspricht offensichtlich nicht dem Y-Design und enthält zu viele redundante Teile. Xstate

class InputComponent extends Component {
  constructor () {
    super()this.state = {
      value: ''}
  }
  valInput (e) {
    let value =  e.target.valuethis.setState({value})this.props.inputChange(value)
  }
  render () {return <input onChange={this.valInput.bind(this)}/>  }
}

class ParentComponent extends Component {
  constructor () {
    super()this.state = {
      val: ''}
  }
  inputChange (val) {this.setState({val})
  }
  render () {return (      <section>{this.state.val}<InputComponent inputChange={this.inputChange.bind(this)}/>
      </section>    )
  }
}

Es könnte besser aussehen, wenn Sie die folgende Schreibmethode verwenden

class InputComponent extends Component {
  render () {
    let {val, inputChange} = this.props// 这里的val并不是必须的，但是当一个值来自非输入控件的时候，如可编辑的div，ace在每次执行render函数的时候都会导致原来输入的值被清空。return <input value={val} onChange={inputChange}/>  }
}

class ParentComponent extends Component {
  constructor () {
    super()this.state = {
      val: ''}
  }
  inputChange (e) {this.setState({val: e.target.value})
  }
  render () {
    let val = this.state.valreturn (      <section>{val}<InputComponent val={val} inputChange={this.inputChange.bind(this)}/>
      </section>    )
  }
}

stellt die Grundvoraussetzungen für das Front-End-Routing bereit. Die spezifischen Verwendungsmethoden finden Sie in der Projektdokumenteinleitung entsprechend den von Ihnen benötigten Funktionen. Die Grundkonfiguration ist ähnlich wie bei anderen Frameworks, die Verwendung vieler APIs unterscheidet sich jedoch erheblich (im Vergleich zu

). Sie müssen das Dokument dennoch sorgfältig lesen, um Zeitverschwendung bei der Lösung von Problemen während der Entwicklung zu vermeiden > react-router kann als Standard-vue verwendet werden, indem in der Unterroute ein Leerzeichen wie IndexRoute verwendet wird. vue''UI

function root () {  this.path = '/'  this.component = require('pages/index').default}function demo () {  this.path = 'demo'  this.getComponent = (nextstate, cb) => {
    require.ensure([], (require) => {
      cb(null, require('pages/demo').default)
    })
  }
}
const createRoute = (R) => {
  let route = new R()
  route.childRoutes = route.childRoutes && route.childRoutes.map(r => createRoute(r))  return route
}

export default [root, demo].map((route) => createRoute(route))

Es wird kurz in „Redux von der Oberfläche aus verstehen“ vorgestellt. Die Verwendung von

verkürzt die Denkzeit während der Entwicklung und vermeidet außerdem einige mögliche Probleme. Bei der Verwendung von

wurden auch einige Probleme festgestellt. Es lohnt sich auch darüber nachzudenken, wie verhindert werden kann, dass das Projekt schwierig zu warten ist. Eine Seite wurde mit der Methode „Seite + Komponente“ in der überarbeiteten Website entwickelt und stellt mit Ausnahme von Komponenten die fortschrittlichste Komponente dar. Nur die Seite kann react-redux bis Redux initiieren, was von allen mehreren Komponenten gemeinsam genutzt wird. Die Daten werden über Redux auf der Seite an die Unterkomponente übergeben. Wenn die Unterkomponente Daten aktualisieren muss, wird der Befehl nach oben weitergeleitet, indem die von der übergeordneten Komponente über das Attribut dispatch übergebene Methode aufgerufen wird reducer auf der Seite, um action anzugeben, um props für die Datenaktualisierung aufzurufen. Natürlich ist es manchmal auch notwendig, props einzugeben und dann von dispathaction zu reducer zu wechseln (z als Netzwerkanfragen). Es ist erwähnenswert, dass action jedes Mal, wenn dispath ein action ist, alle registrierten reducer durchläuft (Reduzierer bestehen häufig aus mehreren Unterreduzierern), was bedeutet, dass alle dispath aufgerufen werden (von Projekt Die Leistung und Dokumentation sind wie folgt. Unten finden Sie den action Teil des Codes, der von der überarbeiteten Website verwendet wird. Reduxreducerreducerreducer

export default class ArticleReducer {
  [AAS.ARTICLE_REQUEST_STATE] (state, action) {return Object.assign({}, state, {loading: action.loading})
  }
  [AAS.ARTICLE_SEARCH_STATE] (state, action) {return Object.assign({}, state, {searching: action.searching})
  }
}

Das Gefühl nach der Verwendung von

, weil es das erste Mal ist, dass man ein Statusmanagement-Tool wie

const reducers = {}
const AR = new ArticleReducer()
const NR = new NewsReducer()
reducers.articles = (state = initState.article, action) => {  return AR[action.type] ? AR[action.type](state, action) : state
}
reducers.editor = (state = initState.editor, action) => {  return ER[action.type] ? ER[action.type](state, action) : state
}

Development wirklich nutzt (Vuex wird zwar ebenfalls verwendet, basiert jedoch nicht auf dem gesamten Projekt.) Der Entwicklungsprozess wird kontrollierbarer, die Datenflussrichtung wird klarer und die Kopplung verschiedener Tools während der Entwicklung wird geringer versuchen. Ich persönlich bin jedoch der Meinung, dass unabhängig von der verwendeten Technologie die Komplexität mit zunehmendem Geschäft definitiv höher wird und es schwieriger wird, ein Projekt aufrechtzuerhalten, das stabil, robust und einfach zu warten ist.

Abschließend muss ich die Bedeutung guter Programmiergewohnheiten beklagen. React

Das obige ist der detaillierte Inhalt vonErfahrung beim Schreiben einer Website mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!