Heim Web-Frontend js-Tutorial Tatsächliche Nutzungsanalyse des React-Redux-Plug-In-Projekts

Tatsächliche Nutzungsanalyse des React-Redux-Plug-In-Projekts

Jun 07, 2018 am 11:38 AM
react redux 入门 插件

Dieses Mal werde ich die tatsächliche Verwendung des React-Redux-Plug-In-Projekts analysieren. Was sind die Vorsichtsmaßnahmen für die tatsächliche Verwendung des React-Redux-Plug-In-Projekts? Werfen wir einen Blick darauf.

Sie können sich zuerst meine einfache Einführung in Redux ansehen

Einführung in React-Redux

React-Redux verwendet Redux Um React zu entwickeln, ist Redux kein React-Produkt. Hier finden Sie eine kurze Erklärung, wie React-Redux zum Entwickeln verwendet wird .

Beschreibung

Dieses Plug-in kann unseren Redux-Code prägnanter und schöner machen. Ich gehe davon aus, dass Sie bereits über eine Reaktionsumgebung verfügen, die „Hello World“ anzeigen kann, die mit „create-react-app“ erstellt wurde, und dass Sie Redux installiert haben.

Hinweis: Wenn es gerade mit „create-react-app“ erstellt wurde, müssen Sie npm run eject ausführen, um die personalisierten Einstellungen anzuzeigen, damit Sie die Konfiguration anpassen können.

Installation

npm i react-redux --save
Nach dem Login kopieren

Nutzung

react-redux stellt zwei wichtige Schnittstellen zur Verfügung: Provider, Connect, Using Mit diesem Plug- In können Sie das Abonnieren und Versenden von React-Redux vergessen, sie werden nicht mehr benötigt.

Codestruktur

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reducer } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer, applyMiddleware(thunk));
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();
Nach dem Login kopieren
Die äußerste Schicht der Anwendung im Provider, übergeben Sie den Store an sie und verwenden Sie ihn nur dieses Mal.

//app.js
import React, { Component } from 'react';
import { addCreator, removeCreator, addAsync } from './index.redux';
import { connect } from 'react-redux';
class App extends Component {
 render() {
  return (
   <p className="App">
    <h1>现在有美女{this.props.num}个。</h1>
    <button onClick={this.props.addCreator}>add</button>
    <button onClick={this.props.removeCreator}>remove</button>
    <button onClick={this.props.addAsync}>addAsync</button>
   </p >
  );
 }
}
//定义把state中哪个属性放到props中
 function mapStateToProps(state) {
  return { num: state }
 }
 //定义把哪些方法放到props中
 const actionCreators={ addCreator, removeCreator, addAsync };
 //connect其实就是一个高阶组件,把app传进去,返回一个新的app组件
 App = connect(mapStateToProps, actionCreators)(App);
export default App;
Nach dem Login kopieren
connect ist dafür verantwortlich, die von der Komponente benötigten Parameter von außen zu erhalten. Nach der Definition über connect können die in Requisiten platzierten Eigenschaften und Methoden direkt über this.props abgerufen werden.

Das Folgende ist die Definition von Reduzierer.

//react.redux.js
const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
  switch (action.type) {
    case Add:
      return state + 1;
    case Remove:
      return state - 1;
    default:
      return 10;
  }
}
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}
Nach dem Login kopieren

Verwenden Sie Dekoratoren, um Conect eleganter zu schreiben

Zuerst müssen Sie babel-plugin-transform-decorators-legacy installieren und in package.json konfigurieren.

Installieren

npm i babel-plugin-transform-decorators-legacy --save-dev Dies ist nur für Entwicklungszwecke, also installieren Sie es, um --save- dev

Konfiguration

Konfigurieren Sie das Plugins-Attribut von babel

 "babel": {
  "presets": [
   "react-app"
  ],
  "plugins": [
   ["transform-decorators-legacy"]
  ]
 }
Nach dem Login kopieren
Ändern Sie die ursprüngliche Schreibmethode

Verwenden Sie @connect, um es neu zu definieren und zu schreiben über der Klasse.

//App.js
@connect((state) => ({ num: state }),{ addCreator, removeCreator, addAsync })
class App extends Component {
.....//省略
// function mapStateToProps(state) {
//  return { num: state }
// }
// App = connect(mapStateToProps, { addCreator, removeCreator, addAsync })(App);
Nach dem Login kopieren

Lösung für die VS Code-Decorator-Eingabeaufforderung „experimentalDecorators“

Klicken Sie auf die Konfigurationsschaltfläche in der unteren linken Ecke von Visual Studio Code (oder Datei > Einstellungen > Konfiguration, Windows-Umgebung), öffnen Sie das Benutzereinstellungsfenster, geben Sie „experimentalDecorators“ in das Suchfeld ein und finden Sie die Option wie folgt:

"javascript.implicitProjectConfig.experimentalDecorators": false
Nach dem Login kopieren
Ändern Sie sie einfach in „true“.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Vue bedient, um einen Proxy zu erstellen

Verwenden Sie JQuery, um den spezifischen Inhalt des zu erhalten hochgeladene Datei

Das obige ist der detaillierte Inhalt vonTatsächliche Nutzungsanalyse des React-Redux-Plug-In-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ein Diffusionsmodell-Tutorial, das Ihre Zeit wert ist, von der Purdue University Ein Diffusionsmodell-Tutorial, das Ihre Zeit wert ist, von der Purdue University Apr 07, 2024 am 09:01 AM

Diffusion kann nicht nur besser imitieren, sondern auch „erschaffen“. Das Diffusionsmodell (DiffusionModel) ist ein Bilderzeugungsmodell. Im Vergleich zu bekannten Algorithmen wie GAN und VAE im Bereich der KI verfolgt das Diffusionsmodell einen anderen Ansatz. Seine Hauptidee besteht darin, dem Bild zunächst Rauschen hinzuzufügen und es dann schrittweise zu entrauschen. Das Entrauschen und Wiederherstellen des Originalbilds ist der Kernbestandteil des Algorithmus. Der endgültige Algorithmus ist in der Lage, aus einem zufälligen verrauschten Bild ein Bild zu erzeugen. In den letzten Jahren hat das phänomenale Wachstum der generativen KI viele spannende Anwendungen in der Text-zu-Bild-Generierung, Videogenerierung und mehr ermöglicht. Das Grundprinzip dieser generativen Werkzeuge ist das Konzept der Diffusion, ein spezieller Sampling-Mechanismus, der die Einschränkungen bisheriger Methoden überwindet.

Generieren Sie PPT mit einem Klick! Kimi: Lassen Sie zuerst die „PPT-Wanderarbeiter' populär werden Generieren Sie PPT mit einem Klick! Kimi: Lassen Sie zuerst die „PPT-Wanderarbeiter' populär werden Aug 01, 2024 pm 03:28 PM

Kimi: In nur einem Satz, in nur zehn Sekunden ist ein PPT fertig. PPT ist so nervig! Um ein Meeting abzuhalten, benötigen Sie einen PPT; um einen wöchentlichen Bericht zu schreiben, müssen Sie einen PPT vorlegen, auch wenn Sie jemanden des Betrugs beschuldigen PPT. Das College ähnelt eher dem Studium eines PPT-Hauptfachs. Man schaut sich PPT im Unterricht an und macht PPT nach dem Unterricht. Als Dennis Austin vor 37 Jahren PPT erfand, hatte er vielleicht nicht damit gerechnet, dass PPT eines Tages so weit verbreitet sein würde. Wenn wir über unsere harte Erfahrung bei der Erstellung von PPT sprechen, treiben uns Tränen in die Augen. „Es dauerte drei Monate, ein PPT mit mehr als 20 Seiten zu erstellen, und ich habe es Dutzende Male überarbeitet. Als ich das PPT sah, musste ich mich übergeben.“ war PPT.“ Wenn Sie ein spontanes Meeting haben, sollten Sie es tun

Teilen Sie drei Lösungen mit, warum der Edge-Browser dieses Plug-in nicht unterstützt Teilen Sie drei Lösungen mit, warum der Edge-Browser dieses Plug-in nicht unterstützt Mar 13, 2024 pm 04:34 PM

Wenn Benutzer den Edge-Browser verwenden, fügen sie möglicherweise einige Plug-Ins hinzu, um weitere Anforderungen zu erfüllen. Beim Hinzufügen eines Plug-Ins wird jedoch angezeigt, dass dieses Plug-In nicht unterstützt wird. Heute stellt Ihnen der Herausgeber drei Lösungen vor. Methode 1: Versuchen Sie es mit einem anderen Browser. Methode 2: Der Flash Player im Browser ist möglicherweise veraltet oder fehlt, sodass das Plug-in nicht unterstützt wird. Sie können die neueste Version von der offiziellen Website herunterladen. Methode 3: Drücken Sie gleichzeitig die Tasten „Strg+Umschalt+Entf“. Klicken Sie auf „Daten löschen“ und öffnen Sie den Browser erneut.

Alle CVPR 2024-Auszeichnungen bekannt gegeben! Fast 10.000 Menschen nahmen offline an der Konferenz teil und ein chinesischer Forscher von Google gewann den Preis für den besten Beitrag Alle CVPR 2024-Auszeichnungen bekannt gegeben! Fast 10.000 Menschen nahmen offline an der Konferenz teil und ein chinesischer Forscher von Google gewann den Preis für den besten Beitrag Jun 20, 2024 pm 05:43 PM

Am frühen Morgen des 20. Juni (Pekinger Zeit) gab CVPR2024, die wichtigste internationale Computer-Vision-Konferenz in Seattle, offiziell die besten Beiträge und andere Auszeichnungen bekannt. In diesem Jahr wurden insgesamt 10 Arbeiten ausgezeichnet, darunter zwei beste Arbeiten und zwei beste studentische Arbeiten. Darüber hinaus gab es zwei Nominierungen für die beste Arbeit und vier Nominierungen für die beste studentische Arbeit. Die Top-Konferenz im Bereich Computer Vision (CV) ist die CVPR, die jedes Jahr zahlreiche Forschungseinrichtungen und Universitäten anzieht. Laut Statistik wurden in diesem Jahr insgesamt 11.532 Arbeiten eingereicht, von denen 2.719 angenommen wurden, was einer Annahmequote von 23,6 % entspricht. Laut der statistischen Analyse der CVPR2024-Daten des Georgia Institute of Technology befassen sich die meisten Arbeiten aus Sicht der Forschungsthemen mit der Bild- und Videosynthese und -generierung (Imageandvideosyn

Von Bare-Metal bis hin zu einem großen Modell mit 70 Milliarden Parametern finden Sie hier ein Tutorial und gebrauchsfertige Skripte Von Bare-Metal bis hin zu einem großen Modell mit 70 Milliarden Parametern finden Sie hier ein Tutorial und gebrauchsfertige Skripte Jul 24, 2024 pm 08:13 PM

Wir wissen, dass LLM auf großen Computerclustern unter Verwendung umfangreicher Daten trainiert wird. Auf dieser Website wurden viele Methoden und Technologien vorgestellt, die den LLM-Trainingsprozess unterstützen und verbessern. Was wir heute teilen möchten, ist ein Artikel, der tief in die zugrunde liegende Technologie eintaucht und vorstellt, wie man einen Haufen „Bare-Metals“ ohne Betriebssystem in einen Computercluster für das LLM-Training verwandelt. Dieser Artikel stammt von Imbue, einem KI-Startup, das allgemeine Intelligenz durch das Verständnis der Denkweise von Maschinen erreichen möchte. Natürlich ist es kein einfacher Prozess, einen Haufen „Bare Metal“ ohne Betriebssystem in einen Computercluster für das Training von LLM zu verwandeln, aber Imbue hat schließlich erfolgreich ein LLM mit 70 Milliarden Parametern trainiert der Prozess akkumuliert

KI im Einsatz |. AI hat einen Lebens-Vlog eines allein lebenden Mädchens erstellt, der innerhalb von drei Tagen Zehntausende Likes erhielt KI im Einsatz |. AI hat einen Lebens-Vlog eines allein lebenden Mädchens erstellt, der innerhalb von drei Tagen Zehntausende Likes erhielt Aug 07, 2024 pm 10:53 PM

Herausgeber des Machine Power Report: Yang Wen Die Welle der künstlichen Intelligenz, repräsentiert durch große Modelle und AIGC, hat unsere Lebens- und Arbeitsweise still und leise verändert, aber die meisten Menschen wissen immer noch nicht, wie sie sie nutzen sollen. Aus diesem Grund haben wir die Kolumne „KI im Einsatz“ ins Leben gerufen, um detailliert vorzustellen, wie KI durch intuitive, interessante und prägnante Anwendungsfälle für künstliche Intelligenz genutzt werden kann, und um das Denken aller anzuregen. Wir heißen Leser auch willkommen, innovative, praktische Anwendungsfälle einzureichen. Videolink: https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ Vor kurzem wurde der Lebens-Vlog eines allein lebenden Mädchens auf Xiaohongshu populär. Eine Animation im Illustrationsstil, gepaart mit ein paar heilenden Worten, kann in nur wenigen Tagen leicht erlernt werden.

Eine Pflichtlektüre für technische Anfänger: Analyse der Schwierigkeitsgrade von C-Sprache und Python Eine Pflichtlektüre für technische Anfänger: Analyse der Schwierigkeitsgrade von C-Sprache und Python Mar 22, 2024 am 10:21 AM

Titel: Ein Muss für technische Anfänger: Schwierigkeitsanalyse der C-Sprache und Python, die spezifische Codebeispiele erfordert. Im heutigen digitalen Zeitalter ist Programmiertechnologie zu einer immer wichtigeren Fähigkeit geworden. Ob Sie in Bereichen wie Softwareentwicklung, Datenanalyse, künstliche Intelligenz arbeiten oder einfach nur aus Interesse Programmieren lernen möchten, die Wahl einer geeigneten Programmiersprache ist der erste Schritt. Unter vielen Programmiersprachen sind C-Sprache und Python zwei weit verbreitete Programmiersprachen, jede mit ihren eigenen Merkmalen. In diesem Artikel werden die Schwierigkeitsgrade der C-Sprache und von Python analysiert

Der leitende NVIDIA-Architekt zählt die 12 Schwachstellen von RAG auf und vermittelt Lösungen Der leitende NVIDIA-Architekt zählt die 12 Schwachstellen von RAG auf und vermittelt Lösungen Jul 11, 2024 pm 01:53 PM

Retrieval-Augmented Generation (RAG) ist eine Technik, die Retrieval nutzt, um Sprachmodelle zu verbessern. Bevor ein Sprachmodell eine Antwort generiert, ruft es insbesondere relevante Informationen aus einer umfangreichen Dokumentendatenbank ab und verwendet diese Informationen dann zur Steuerung des Generierungsprozesses. Diese Technologie kann die Genauigkeit und Relevanz von Inhalten erheblich verbessern, das Problem der Halluzinationen wirksam lindern, die Geschwindigkeit der Wissensaktualisierung erhöhen und die Nachverfolgbarkeit der Inhaltsgenerierung verbessern. RAG ist zweifellos einer der spannendsten Bereiche der Forschung im Bereich der künstlichen Intelligenz. Weitere Informationen zu RAG finden Sie im Kolumnenartikel auf dieser Website „Was sind die neuen Entwicklungen bei RAG, das sich darauf spezialisiert hat, die Mängel großer Modelle auszugleichen?“ Diese Rezension erklärt es deutlich. Aber RAG ist nicht perfekt und Benutzer stoßen bei der Verwendung oft auf einige „Problempunkte“. Kürzlich die fortschrittliche generative KI-Lösung von NVIDIA

See all articles