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

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

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

Nach dem Login kopieren

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

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

(Spalte zum Lernen)

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:

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

Grundlegende Verwendung:

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

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

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

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. . .

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

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

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!