Was müssen Sie über die React-Projektentwicklung wissen? Spezifische Themen für die React-Projektentwicklung (mit Beispielen)

In diesem Artikel geht es hauptsächlich darum, worauf Sie bei der Entwicklung von React-Projekten achten müssen. Wenn Sie es wissen möchten, lesen Sie diesen Artikel jetzt gemeinsam

对react项目开发，我大概对它的知识点进行了分类，主要由以下几个部分组成。

Grundlegende Schreibmethode

Eingabeseite-Schreibmethode

import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main';

render(<Main />,document.getElementById(&#39;app&#39;));

Komponenten-Schreibmethode

import React,{ Component } from 'react';
export default class Main extends Component{
    render(){        return (
            <p>
                组件
            </p>
        )
    }
}

Komponentenübergabewert

Übergeordnete Komponente wird an untergeordnete Komponente übergeben

父组件传给子组件靠props

import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
    render(){        return (
            <p>
                <Child  title="我是父组件"/>
            </p>
        )
    }
}class Child extends Component{
    render(){        return(
            <h2 id="this-props-title">{this.props.title}</h2>
        )
    }
}
render(<Main />,document.getElementById(&#39;app&#39;));

Untergeordnete Komponente wird an übergeordnete Komponente übergeben

子组件传给父组件靠事件
子组件传递给父组件的过程描述，父组件传递给子组件一个函数，子组件执行这个函数，然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值，进行相应的操作。

import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
    constructor(props){        super(props);        this.state = {
            value:'init value'
        }
    }
    render(){        return (
            <p>
                <p>{this.state.value}</p>
                <Child  onClick={(value)=>{this.setState({value:value})}}/>
            </p>
        )
    }
}class Child extends Component{
    render(){        return(
            <button onClick={()=>this.props.onClick("子组件的值")}>点击传值</button>
        )
    }
}
render(<Main />,document.getElementById(&#39;app&#39;));

Webpack

webpack的配置一般分为这么几个部分，entry、output、plugin、devServer、module等。

entry告诉webpack入口在哪。
output告诉webpack将来把文件打包到哪。
plugin代表一些其他的操作，如打开浏览器、文件压缩等处理。
devServer代表开发的时候启动一个本地服务器
module代表各种loader用来解析你的代码。

Eine allgemeine Webpack-Konfigurationsdatei ist wie folgt:

var webpack = require('webpack');module.exports = {    entry:"./src/index.js",    output:{        path:'public',        filename:'bundle.js'
    },    devServer:{        historyApiFallback:true,        hot:true,        inline:true
    },    plugins:[        new webpack.DefinePlugin({            'process.env.NODE.ENV': "development"
        }),        new webpack.HotModuleReplacementPlugin(),        new OpenBrowserPlugin({            url: 'http://localhost:8080'
        })
    ],    module:{        loaders:[{            test:/\.js[x]?$/,            exclude:/node_modules/,            loader:'babel-loader',            query:{                presets:['es2015','react','stage-1']
            }
        },{            test:/\.css$/,            loaders:['style',css]
        },{            test:/\.(png|jpg)$/,            loader:"url-loader"
        }]
    }
}

es6-Teil

In React müssen Sie im Allgemeinen einige es6-Syntax kennen. Für React sind hier einige grundlegende Verwendungs- und Schreibmethoden von es6 aufgeführt.

Import und Export

Import führt etwas ein

import webpack from 'webpack';import React from 'react';import { Component } from 'react';

Die mit „{}“ eingeführte Variable ist eine Variable mit demselben Namen, die in dieser Datei vorhanden sein muss.

Variablen, die ohne „{}“ eingeführt werden, sind die Variablen, die standardmäßig in dieser Datei exportiert werden, und die Variablennamen können unterschiedlich sein.

Export wirft etwas.

function a(){    console.log(1);
}let b = 1;export a;export b;export default a;

Export kann mehrmals ausgelöst und mehrfach verwendet werden.

Es kann nur ein Exportstandard verwendet werden, was bedeutet, dass dieser standardmäßig ausgelöst wird.

Klasse und Erweiterungen

Die Essenz von Klasse ist ein Schlüsselwort, das eine Klasse deklariert. Seine Existenzbedeutung ist dieselbe wie var, let, const, function usw.

Verwendung:

class Main{}

extends stellt Vererbung dar, Verwendung:

class Main extends Component{}

constructor stellt den Konstruktor dar, Super erbt Eigenschaften und Methoden von der übergeordneten Klasse.

class Main extends Component{
    constructor(props){        super(props)
    }
}

Lebenszyklusfunktion

Grundlegende Lebenszyklusfunktion

Unterteilt in drei Zustände

Montage
Aktualisieren
Unmounten

---

Montagephase – im Allgemeinen in dieser Lebenszyklusfunktion Wird nur einmal ausgeführt
1. constructor()

   componentWillMount()
   componentDidMount()
   render()
   
   

Aktualisierungsphase – wird mehrmals ausgeführt
2. ComponentWillReceiveProps()

   shouldComponentUpdate()
   render()
   componentDidUpdate()
   
   

Unmountint-Phase – Komponenten-Unmount-Zeitraum
3. componentWillUnmount()

   Dies ist die aktuelle Komponentenlebenszyklusfunktion. Bisher gab es zwei Lebenszyklusfunktionen namens getDefaultProps und getInitialState.
   Aber ihre Funktionalität wird jetzt durch den Konstruktor ersetzt.
   
   

Lebenszyklus-Nutzungsszenarien von Komponenten

Konstruktor
1. Eine häufige Verwendungsmethode ist die Initialisierung des Zustands

   constructor(props){
       super(props);
       this.state = {
           value:''
       }}

   
   

componentWillMount
2. Führen Sie einige Initialisierungsvorgänge durch. Oder laden Sie einige Daten.

   <br>componentWillMount(){ <br> this.fetchData(); <code> <br>componentWillMount(){ <br>    this.fetchData(); <br>} <br>}

3. 
   componentDidMount

   Ein häufiges Szenario ist die Datenanforderung

componentWillMount(){    this.fetchData();
}

4. 
   render

   Eine Funktion, die in einer Reaktionskomponente enthalten sein muss und das dom-Element in jsx-Syntax zurückgibt

render(){    return (
        <p>123</p>
    )
}

5. 
   componentWillReceiveProps
   Wenn Requisiten übergeben werden, kann vor dem Rendern eine gewisse Verarbeitung durchgeführt werden. SetState wird nicht zweimal ausgelöst.

   Es gibt nur einen Parameter. Stellt das Requisitenobjekt

6. 
   shouldComponentUpdate
   dar Es gibt zwei Parameter, die props und state
   darstellen Muss „true“ oder „false“ zurückgeben. Andernfalls wird ein Syntaxfehler gemeldet.

   Sehr nützlich bei der Leistungsoptimierung

7. 
   componentDidUpdate

   Die Komponente wird geladen und einige Vorgänge werden ausgeführt

8. 
   componentWillUnmount
   Das häufigste Szenario besteht darin, die an die Komponente angehängten setInterval- und setTimeout-Werte zu löschen. <br>componentWillUnMount(){ <br>    clearInterval(this.timer); <br>} <br>

   componentWillUnMount(){
clearInterval(this.timer);

}

componentWillReceiveProps-Analyse

常见的使用场景是，根据传递不同的props，渲染不同的界面数据。
项目比较复杂的情况下，一个页面的值发生变化，就要导致另一个页面的值发生改变，这样需要通过props的方式来告知对方，你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props，从而根据这个props进行相应的数据处理。

shouldComponentUpdate-Analyse

这个函数的返回值是一个布尔值。返回一个true。
返回一个false的情况下，它的的状态不会进行更新。

Leistungsoptimierung Teil

immutable.js

Datenanforderungsteil

ajax

In React können Sie das herkömmliche XMLHttpRequest-Objekt verwenden, um Datenanforderungen zu stellen.
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onReadyStateChange = ()=>{

if (xhr.readyState == 4 && xhr.status == 200) {

sucess(xhr.responseText);

}

}

Versprechen

Versprechen ist die von es6 vorgeschlagene Datenanforderungsmethode. Derzeit ist dies in vielen Browsern noch nicht implementiert. Aber es gibt Polyfills für Versprechen, wie zum Beispiel blueBird.js

Die grundlegende Verwendung ist: Promise-Objekt

const Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => {    return new Promise((resolve, reject) => {        if(res){
            resolve(res);
        }else if(err){
            reject(err);
        }
    })}

fetch

Die grundlegende Verwendung von fetch:

 fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{        method: 'POST',        headers: {            'Content-Type': 'application/x-www-form-urlencoded'
        },        mode: 'cors',        body: "page=1&rows=10"
    }).then(res =>{        console.log(res);        return res.json()
    }).then(res => {        console.log(res);
    })

react Routing

Grundlegende Verwendung

import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom';
export default class Main extends Component{
    render(){        return(
            <Router>
                <p>
                    <Switch>
                        <Route path=&#39;/&#39; component={page1}>
                        <Route path=&#39;/home&#39; component={page2}>
                        <Route path=&#39;/age&#39; component={page3}>
                    </Switch>
                </p>
            </Router>
        )
    }
}

Einfache und praktische Verwendung von Redux

Aktionen

const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT";

export function addtask(task){
    return {
        type: ADD_TASK,
        task
    }
}
export function addContent(content){
    return {
        type: ADD_CONTENT,
        content
    }
}

Reduzierer

import { addtask,addContent } from 'actions';export function(state = '',action){
    switch (action.type){        case ADD_TASK:            return action.task;            break;        case ADD_CONTENT:            return action.content;            break;        default:            return state;
    }
}

So schreiben Sie die Eingangsseite

对react项目开发，我大概对它的知识点进行了分类，主要由以下几个部分组成。

So schreiben Sie die Komponente

import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main';

render(<Main />,document.getElementById(&#39;app&#39;));

Die Komponente übergibt den Wert

Die übergeordnete Komponente übergibt ihn an die untergeordnete Komponente

import React,{ Component } from 'react';

export default class Main extends Component{
    render(){        return (
            <p>
                组件
            </p>
        )
    }
}

父组件传给子组件靠props

Die untergeordnete Komponente wird an die übergeordnete Komponente übergeben

import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
    render(){        return (
            <p>
                <Child  title="我是父组件"/>
            </p>
        )
    }
}class Child extends Component{
    render(){        return(
            <h2 id="this-props-title">{this.props.title}</h2>
        )
    }
}
render(<Main />,document.getElementById(&#39;app&#39;));

子组件传给父组件靠事件
子组件传递给父组件的过程描述，父组件传递给子组件一个函数，子组件执行这个函数，然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值，进行相应的操作。

Webpack

import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
    constructor(props){        super(props);        this.state = {
            value:'init value'
        }
    }
    render(){        return (
            <p>
                <p>{this.state.value}</p>
                <Child  onClick={(value)=>{this.setState({value:value})}}/>
            </p>
        )
    }
}class Child extends Component{
    render(){        return(
            <button onClick={()=>this.props.onClick("子组件的值")}>点击传值</button>
        )
    }
}
render(<Main />,document.getElementById(&#39;app&#39;));

Eine allgemeine Webpack-Konfigurationsdatei lautet wie folgt:

webpack的配置一般分为这么几个部分，entry、output、plugin、devServer、module等。

entry告诉webpack入口在哪。
output告诉webpack将来把文件打包到哪。
plugin代表一些其他的操作，如打开浏览器、文件压缩等处理。
devServer代表开发的时候启动一个本地服务器
module代表各种loader用来解析你的代码。

es6-Teil

In React ist die Syntax von es6 allgemein. Sie müssen etwas über React wissen. Einige grundlegende Verwendungs- und Schreibmethoden von es6 sind hier aufgeführt.

Import und Export

Import führt etwas ein

import webpack from 'webpack';import React from 'react';import { Component } from 'react';

其中使用“{}”引入的变量是那个文件中必须存在的变量名相同的变量。
不使用“{}”引入的变量是那个文件中export default默认抛出的变量，其中变量名可以不一样。

export抛出一个东西。

function a(){    console.log(1);
}let b = 1;export a;export b;export default a;

其中export可以抛出多个，多次使用。
export default只能使用一个，表示默认抛出。

class和extends

class的本质是一个申明类的关键字。它存在的意义和var、let、const、function等都是一样的。
使用方式：

class Main{}

extends代表继承，使用方式：

class Main extends Component{}

constructor代表构造函数，super是从父类继承属性和方法。

class Main extends Component{
    constructor(props){        super(props)
    }
}

生命周期函数

基本生命周期函数

分三个状态

• Mounting

• Updating

• Unmounting

---

1. Mounting阶段–一般在这个阶段生命周期函数只会执行一次
   constructor()
   componentWillMount()
   componentDidMount()
   render()

2. Updating阶段–会执行多次
   componentWillReceiveProps()
   shouldComponentUpdate()
   render()
   componentDidUpdate()

3. Unmountint阶段–组件卸载期
   componentWillUnmount()
   这就是现阶段的组件生命周期函数。之前还有两个生命周期函数叫 getDefaultProps 以及 getInitialState。
   但是它们的功能现在被constructor代替。

组件的生命周期使用场景

1. constructor
   常见的一个使用方式就是state的初始化

   constructor(props){
       super(props);
       this.state = {
           value:''
       }}

2. componentWillMount
   进行一些初始化的操作。或者进行一些数据加载。
   <br>componentWillMount(){ <br>    this.fetchData(); <br>} <br>

3. componentDidMount
   常见场景就是数据请求

   componentWillMount(){    this.fetchData();
   }

4. render
   一个react组件中必须包含的函数，返回jsx语法的dom元素

   render(){    return (
           <p>123</p>
       )
   }

5. componentWillReceiveProps
   在props传递的时候，可以在render之前进行一些处理。不会触发二次setState。
   只有一个参数。代表的是props对象

6. shouldComponentUpdate
   有两个参数，分别代表props和state
   必须返回一个true或者false。否则会语法报错。
   在进行一些性能优化的时候非常有用

7. componentDidUpdate
   组件加载完毕，进行某些操作

8. componentWillUnmount
   最常见的场景，对组件附加的setInterval、setTimeout进行清除。
   <br>componentWillUnMount(){ <br>    clearInterval(this.timer); <br>} <br>

componentWillReceiveProps解析

常见的使用场景是，根据传递不同的props，渲染不同的界面数据。
项目比较复杂的情况下，一个页面的值发生变化，就要导致另一个页面的值发生改变，这样需要通过props的方式来告知对方，你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props，从而根据这个props进行相应的数据处理。

shouldComponentUpdate解析

这个函数的返回值是一个布尔值。返回一个true。
返回一个false的情况下，它的的状态不会进行更新。

性能优化部分

immutable.js

数据请求部分

ajax

在react中，可以使用传统的XMLHttpRequest对象进行数据请求。
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onReadyStateChange = ()=>{
   if (xhr.readyState == 4 && xhr.status == 200) {
       sucess(xhr.responseText);
   }
}

promise

promise是es6提出的数据请求方式。目前很多浏览器还没有实现。但是有promise的polyfill，如blueBird.js
基本的使用方式是：Promise对象

const Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => {    return new Promise((resolve, reject) => {        if(res){
            resolve(res);
        }else if(err){
            reject(err);
        }
    })}

fetch

fetch的基本使用方式：

 fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{        method: 'POST',        headers: {            'Content-Type': 'application/x-www-form-urlencoded'
        },        mode: 'cors',        body: "page=1&rows=10"
    }).then(res =>{        console.log(res);        return res.json()
    }).then(res => {        console.log(res);
    })

react 路由

基本使用

import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom';
export default class Main extends Component{
    render(){        return(
            <Router>
                <p>
                    <Switch>
                        <Route path=&#39;/&#39; component={page1}>
                        <Route path=&#39;/home&#39; component={page2}>
                        <Route path=&#39;/age&#39; component={page3}>
                    </Switch>
                </p>
            </Router>
        )
    }
}

redux的简单实用

actions

const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT";

export function addtask(task){
    return {
        type: ADD_TASK,
        task
    }
}
export function addContent(content){
    return {
        type: ADD_CONTENT,
        content
    }
}

reducers

import { addtask,addContent } from 'actions';export function(state = '',action){
    switch (action.type){        case ADD_TASK:            return action.task;            break;        case ADD_CONTENT:            return action.content;            break;        default:            return state;
    }
}

Das obige ist der detaillierte Inhalt vonWas müssen Sie über die React-Projektentwicklung wissen? Spezifische Themen für die React-Projektentwicklung (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!