Eine Sammlung einfacher und praktischer Wissenspunkte zu React (mit Beispielcode)

In diesem Artikel geht es hauptsächlich um eine Sammlung einfacher und praktischer Kenntnisse über reagieren. Werfen wir nun einen Blick auf den konkreten Inhalt dieses Artikels

1: Lebenszyklus reagieren

1.1 Anzeige von drei Zuständen des Komponentenlebenszyklus:
- Montage: Die echte Domstruktur wurde eingefügt
- Aktualisierung: Wird neu gerendert
- Unmounting: Die eigentliche Dom-Struktur wurde verschoben

1.2 Verarbeitungsfunktionen über den Lebenszyklus (will bedeutet, vor Eintritt in den Zustand aufgerufen zu werden, did bedeutet, nach Eintritt in den Zustand aufgerufen zu werden)

componentWillMount() //Die Komponente wird auf den echten Dom-Knoten gerendert;

componentDidMount()//Die Komponente wurde auf den echten Dom-Knoten gerendert

componentWillUpdate()//Der Statuswert ändert sich und die Komponente wird neu gerendert;

componentDidUpdate()//Die Komponente hat das erneute Rendern abgeschlossen;

componentWillUnmout()//Entladen Sie die Komponente, z. B. beim Springen zu einer Route

componentWillReceiveProps() //Die Komponenten-Requisiten wurden aufgerufen, wenn eine Änderung vorliegt;

shouldComponentUpdate() // Wird aufgerufen, wenn die Komponente ermittelt, ob sie erneut gerendert werden soll

1.3 Die Ausführungssequenz des Komponentenlebenszyklus ist wie in der folgenden Abbildung dargestellt:

Zwei: Dom-Knoten-Operation suchen (Ref)

1 In reagieren , fügen Sie dem Dom-Knoten über ref einen Namen hinzu, und dann erhalten wir ihn über this.refs.ref name

z. B.:

render(){    return (
        <p ref = "demo">this is a test</p>
    )
}

Wie im obigen Code gezeigt, wenn wir ihn erhalten müssen Mit dem p-Tag können wir eine Reihe von Vorgängen über this.refs.demo ausführen, genau wie in nativem Javascript über document. Dasselbe wird mit getElementById erhalten. Drei: Kontrollierte Formularkomponente

1. Der Wert in der kontrollierten Formularkomponente muss an das Statusattribut gebunden sein und muss an die Methode onChange übergeben werden, um den Wert zu ändern:

export default class Demo extends React.Component{
            constructor(props){                super(props)                this.state = {
                    testInput: ''
                }
            }
            handleInput = (e) => {
                let str = ''
                if(e.target.value.length >= 8){                    str = e.target.value.splice(0,5) + '...'
                }                this.setState({
                    testInput: str
                })
            }
            render(){                return (
                    <p>
                        <input type="text" value={ this.state.testInput } onChange={ this.handleInput }>
                    </p>
                )
            }
        }

Viertens: Informationen zur Attributüberprüfung

static: propTypes = {
     userName: React.PropTypes.bool.isRequired, //表示是必填项且是布尔类型
     passWord: React.PropTypes.number //表示必须是数值类型
}

Weitere Methoden zur Attributüberprüfung...

Fünf: Über Requisiten

Die Requisiten in der Komponente implementieren hauptsächlich die Übertragung von Daten von der übergeordneten Komponente zur untergeordneten Komponente

Wie in der Demo unten gezeigt

DemoTest.js

import React,{Component} from 'react'import Test from './Test.js'export default class Demo extends Component{
    constructor(props){        super(props)        this.state={
        }
    }
    render(){        return(
            <p>
                <Test wenzi="按钮"/>
                <p>内容</p>
            </p>
        )
    }
}

Test.js

import React,{Component} from 'react'export default class Demo extends Component{
    constructor(props){        super(props)        this.state={
        }
    }
    render(){        return(
            <input type="button" value={ this.props.wenzi }/>
        )
    }
}

Die Testkomponente kann den in der DemoTest-Komponente übergebenen Wenzi-Wert empfangen (wenn Sie Wenn Sie mehr wissen möchten, besuchen Sie die chinesische PHP-Website

React Reference Manual

(Spalte zum Lernen)

Sechs: Übertragung von Datenattributen auf untergeordneter Ebene (Kontext)

Erklärung: Dieser Effekt kann auch erzielt werden, wenn wir Requisiten verwenden, aber in diesem Fall wird es zweifellos problematischer sein. Der folgende Code ist

import React,{Component} from 'react'class Child extends Component{
    constructor(props){        super(props)        this.state={
        }
    }    static contextTypes = {
        wenzi: React.PropTypes.string
    }
    render(){        return(
            <p>
                <input type="button" value={ this.context.wenzi }/>
            </p>
        )
    }
}class Son extends Component{
    constructor(props){        super(props)        this.state={
        }
    }
   render(){        return(
            <p>
                <Child />
            </p>
        )
    }
}
export default class Parent extends Component{
    constructor(props){        super(props)        this.state={
        }
    }
    getChildContext = () => {        return{
            wenzi: &#39;测试按钮&#39;
        }
    }    static childContextTypes = {
        wenzi: React.PropTypes.string
    }
    render(){        return(
            <p>
                <Son />
            </p>
        )
    }
}

Effekt, der durch den Kontext erreicht wird:

7: Animation in React hinzufügen (react-addons-css-transition-group)

react-addons-css Die Komponente -transition-group bietet nur die Animationsfunktion zum Anzeigen und Ausblenden des Inhalts ;

Grundlegende Verwendung:

Installieren->importieren

Welchen Teil soll mit dieser Komponente angezeigt und ausgeblendet werden

<ReactCSSTransitionGroup    transitionName="example"
    transitionAppear={true}
    transitionEnterTimeout={500}
    transitionLeaveTimeout={300}>{ items }</ReactCSSTransitionGroup>

Legen Sie einige Anzeige- und ausgeblendete CSS-Stile entsprechend dem angegebenen TransitionName-Wert fest

.example-enter{ 
//此处填写的是进入的样式 eg: opacity: 0;
}.example-enter.example-enter-active{ 
//此处填写的是进入结束的样式 eg: opacity: 1;
    transition: opacity 500ms ease-in;
}.example-leave{ 
//此处填写的是离开的样式 eg: opacity: 1;
}.example-leave.example-leave-active{ 
//此处填写的是离开结束的样式 eg: opacity: 0;
    transition: opacity 500ms ease-in;
}//注意： 下方初始化的状态还要结合transitionAppear={true}为true才可以.example-appear{    //初始化时候的状态
    opacity: 0;
} 
.example-appear.example-appear-active{ 
//初始化结束时候的状态eg: opacity: 1;
    transition: opacity 500ms ease-in;
}

Klicken Sie, um weitere Informationen anzuzeigen...

8: React Router (react-router)

Basic Verwendungscode-Datensatz:

//首先是引入
import { Route,Router,browserHistory } from 'react-router'
render(){
    return(
        //这里使用了browserHistory优化了路径，路径上就不会有＃了        <Router history={browserHistory}>
            <Route path="/" compontent={ AppContainer }>
                //指定默认情况下加载的子组件                <IndexRoute component={ HomeContainer }/>
                <Route path="home" component={ HomeContainer } />
                <Route path="about" component={ AboutContainer } />
                <Route path="list" component={ ListContainer }>
                    <Route path="detail" component={ DetailContainer }/>
                </Route>
            </Route>
        </Router>
    )
}

Hinweis: Über den Unterschied zwischen browserHistory und hashHistory

1.browserHistory wird in Browsern niedrigerer Versionen nicht unterstützt, aber hashHistory unterstützt

2. Mit browserHistory können Sie Sie können nicht darauf zugreifen, indem Sie den Link direkt kopieren und in eine neue Seite einfügen, aber hashHistory kann

3. Bei Verwendung von browserHistory wird # nicht in der Adressleiste angezeigt, aber bei Verwendung von hashHistory wird ein #-Zeichen angezeigt

4. Die Die browserHistory-Komponente wird bei der Ausführung nur einmal ausgeführt, während die hashHistory-Komponente zweimal ausgeführt wird. In diesem Fall kann es zu Problemen mit der Ausführung einiger Lebenszyklusfunktionen kommen.

Voraussetzung: Kooperations-Webpack
realisiert -Nachfrageladen: Das heißt, zusätzlich zu den auf der Homepage benötigten Komponenten werden weitere Komponenten erst nach dem Zugriff geladen. . .

Die Code-Implementierung besteht darin, die Komponente in der zuvor geschriebenen Route neu zu schreiben: Lassen Sie uns diese auflisten

import { Route,Router,browserHistory } from 'react-router'render(){    return(        //这里使用了browserHistory优化了路径，路径上就不会有＃了
        <Router history={browserHistory}>
            <Route path="/" compontent={ AppContainer }>                //指定默认情况下加载的子组件
                <IndexRoute component={ HomeContainer }/>
                <Route path="home" getComponent={ 
                    (nextState,callback) => {                        require.ensure([],(require) => {
                            callback(null,require(&#39;组件路径地址&#39;).default)
                        },"自定义一个名字")
                    }
                }
                 />
                <Route path="list" component={ ListContainer }>
                    <Route path="detail" component={ DetailContainer }/>
                </Route>
            </Route>
        </Router>
    )
}

Erfahren Sie mehr über das Laden bei Bedarf~

Neun: Abrufanforderung Service

Über fetch

Wenn Sie jsonp verwenden möchten, installieren Sie fetch-jsonp

Zehn: Pfadparameter und Abfragezeichenfolge abrufen

Pfadparameter:

this.props.params.参数名

Abfragezeichenfolge:

this.props.location.query.参数名

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte

React User Manual

der PHP-Chinese-Website, um mehr zu erfahren), wenn Sie Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonEine Sammlung einfacher und praktischer Wissenspunkte zu React (mit Beispielcode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!