Expérience en rédaction d'un site Web avec React

Le site Web est un projet de fin d'études. Le but du développement de ce site Web est principalement d'enregistrer quelques notes et de regrouper certaines informations. Il peut également être considéré comme un endroit calme dans le monde en ligne, où vous pouvez mettre en pratique certaines idées techniques.

Le front-end du site a été initialement développé avec vue Il y a quelque temps, comme l'avancement du développement du projet n'était plus si urgent, j'avais du temps libre. Je n'avais jamais utilisé React et j'en étais toujours inquiet, alors j'ai simplement utilisé React pour reconstruire l'avant.

La façon la plus élémentaire d'apprendre une nouvelle technologie est bien sûr de lire les documents pertinents. En tant qu'application d'une seule page, le routage frontal est bien sûr impossible à omettre, et l'utilisation de React semblerait gênante. s'ils n'utilisent pas Reduce, ils ne jouent aucun rôle (bien qu'ils n'aient en réalité aucune relation nécessaire). Par conséquent, react, react-router et react-redux sont utilisés ici. Voici quelques expériences d'utilisation de React dans le développement. Je suis honoré que vous ayez lu cet article. S'il y a quelque chose qui ne va pas, veuillez le signaler. Si vous êtes, je ne serai pas tenu responsable si vous êtes accidentellement entraîné dans un piège.

La première chose est de lire la documentation de React. Le document utilise un grand nombre d'exemples pour présenter comment utiliser React pour le développement, comme comment concevoir state, props. , comment communiquer entre les composants et comment concevoir des composants en attente. Bien que le document le présente en détail, il nécessite souvent une réelle pratique pour en découvrir la beauté. Par exemple, la conception de state et props comporte deux composants X et Y dans un composant Z Supposons que le composant Y ait une zone de saisie et que le composant Z puisse en avoir besoin. utiliser YLa valeur entrée par le composant changera dans une certaine mesure. Bien sûr, il n'est pas impossible de les écrire ensemble, mais compte tenu de facteurs tels que la réutilisation des composants et la fonction unique, il est plus raisonnable de les séparer. de quel composant cette valeur doit-elle provenir ? Qu'en est-il du stockage ? Les deux composants suivants sont respectivement Y et X. Cette conception n'est évidemment pas conforme à la conception state et comporte trop de pièces redondantes.

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>    )
  }
}

Cela pourrait paraître mieux si vous utilisez la méthode d'écriture suivante

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>    )
  }
}

react-router fournit les exigences de base pour le routage frontal. Vous pouvez trouver les méthodes d'utilisation spécifiques dans l'introduction du document de projet en fonction des fonctions dont vous avez besoin. La configuration de base est similaire à celle des autres frameworks, mais l'utilisation de nombreuses API est assez différente (par rapport à vue). Vous devez quand même lire attentivement le document pour éviter de perdre du temps à résoudre des problèmes lors du développement, par exemple. > IndexRoute peut être utilisé comme vue par défaut en utilisant un caractère vide comme '' dans la sous-route. 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))

Une brève introduction dans Comprendre Redux à partir de la présentation. L'utilisation de react-redux réduit le temps de réflexion pendant le développement et évite également certains problèmes possibles. Certains problèmes ont également été découverts lors de l'utilisation. L'utilisation de Redux entraînera inévitablement l'apparition d'un grand nombre de Redux dans les composants. Il convient également de réfléchir à la manière d'éviter que le projet ne devienne difficile à maintenir lorsque l'entreprise devient complexe et importante. Développée à l'aide de la méthode page + composant dans le site Web révisé, une page représente le composant le plus avancé à l'exception des composants. Seule une page peut initier dispatch à reducer, qui est partagé par tous les composants multiples. Les données sont transmises au sous-composant via action dans la page. Si le sous-composant doit mettre à jour les données, la commande est transmise vers le haut en appelant la méthode transmise par le composant parent via l'attribut props Utiliser. props dans la page pour spécifier dispath appeler action pour la mise à jour des données. Bien sûr, il est parfois également nécessaire de traiter en reducer puis de passer de actiondispath à action (tel. comme requêtes réseau). Il est à noter qu'à chaque fois reducer un dispath, action parcourra tous les Redux inscrits (les réducteurs sont souvent composés de plusieurs sous-réducteurs), ce qui signifie que tous les reducer seront appelés (depuis le projet Les performances et la documentation sont les suivantes), ci-dessous se trouve la partie reducer du code utilisée par le site Web révisé. reducer

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})
  }
}

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
}

, car c'est la première fois d'utiliser vraiment un outil de gestion de statut comme React Développement (Bien que vuex soit également utilisé, mais il n'est pas basé sur l'ensemble du projet), le processus de développement devient plus contrôlable, la direction du flux de données devient claire et le couplage de divers outils pendant le développement devient généralement plus faible. essayer. Cependant, je pense personnellement que quelle que soit la technologie utilisée, la complexité augmentera certainement à mesure que l'activité se développera, et il deviendra plus difficile de maintenir un projet stable, robuste et facile à entretenir. Redux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!