Une collection de points de connaissances simples et pratiques sur React (avec exemple de code)-js tutoriel-php.cn

Cet article parle principalement d'un ensemble de quelques connaissances simples et pratiques sur react. Jetons maintenant un œil au contenu spécifique de cet article

1 : Cycle de vie de React

1.1 Affichage de trois états du cycle de vie des composants :
- Montage : La véritable structure dom a été insérée
- Mise à jour : en cours de rendu
- Démontage : la structure Real dom a été déplacée

1.2 Fonctions de traitement sur le cycle de vie (will signifie appelé avant d'entrer dans l'état, did signifie appelé après être entré dans l'état)

componentWillMount() //Le composant sera rendu au nœud dom réel ;

componentDidMount()//Le composant a été rendu au nœud dom réel

componentWillUpdate()//La valeur d'état change ; et le composant sera restitué ;

componentDidUpdate()//Le composant a terminé le nouveau rendu

componentWillUnmout()//Décharger le composant, par exemple lors du passage à un itinéraire ;

componentWillReceiveProps() //Les accessoires du composant ont été chargés lorsqu'il y a un changement ;

shouldComponentUpdate() // Appelé lorsque le composant détermine s'il doit effectuer un nouveau rendu ;

1.3 La séquence d'exécution du cycle de vie du composant est comme indiqué dans la figure ci-dessous :

Une collection de points de connaissances simples et pratiques sur React (avec exemple de code)

Deux : Rechercher l'opération du nœud dom (réf)

1 En réaction , ajoutez un nom au nœud dom via ref, puis nous l'obtenons via this.refs.ref name

par exemple :

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

Copier après la connexion

Comme indiqué dans le code ci-dessus, lorsque nous avons besoin pour obtenir la balise p, nous pouvons effectuer une série d'opérations via this.refs.demo, tout comme en javascript natif. La même chose est obtenue par document.getElementById

Trois : composant de formulaire contrôlé

1. La valeur dans le composant de formulaire contrôlé doit être liée à l'attribut state, et la valeur doit être modifiée via la méthode onChange

par exemple :

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

Copier après la connexion

Quatre : À propos de la vérification de l'attribut ;

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

Copier après la connexion

Plus de méthodes sur la vérification des attributs...

Cinq : À propos des accessoires

Les accessoires du composant implémentent principalement la transmission des données du composant parent au composant enfant

Comme indiqué dans la démo ci-dessous

DemoTest.js

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

Copier après la connexion

Test.js

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

Copier après la connexion

Le composant de test peut recevoir le wenzi valeur passée dans le composant DemoTest (si vous voulez en voir plus, rendez-vous sur le site PHP chinois

React Reference ManualLearning dans la colonne)

Une collection de points de connaissances simples et pratiques sur React (avec exemple de code)

Six : Transfert d'attributs de données de niveau descendant (contexte)

Explication : Cet effet peut également être obtenu si nous utilisons des accessoires, mais dans ce cas, ce sera sans aucun doute plus gênant. Le code ci-dessous est implémenté via le contexte

<. 🎜>

Effet :

import React,{Component} from &#39;react&#39;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>
        )
    }
}

Copier après la connexion

Une collection de points de connaissances simples et pratiques sur React (avec exemple de code) Sept : Ajouter une animation dans React (react-addons-css-transition-group)

Le composant React-addons-css-transition-group fournit uniquement la fonction d'animation pour afficher et masquer le contenu ;

Utilisation de base :

1 Installer->importer

2. ce composant

Définissez certains styles CSS afficher-masquer en fonction de la valeur transitionName spécifiée

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

Copier après la connexion

Cliquez pour afficher plus d'informations...

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

Copier après la connexion

Huit : Routage dans React (react-router)

Enregistrement du code d'utilisation de base :

Remarque : concernant les différences entre BrowserHistory et hashHistory

//首先是引入
import { Route,Router,browserHistory } from &#39;react-router&#39;
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>
    )
}

Copier après la connexion

1. , mais hashHistory est pris en charge

2. En utilisant browserHistory, vous ne pouvez pas y accéder en copiant et collant directement le lien dans une nouvelle page, mais hashHistory peut

3. Lorsque vous utilisez browserHistory, # n'apparaîtra pas dans la barre d'adresse, mais lors de l'utilisation de hashHistory, # apparaîtra
4. L'utilisation du composant browserHistory ne sera exécutée qu'une seule fois, tandis que l'utilisation de hashHistory sera exécutée deux fois. Dans ce cas, pour certains, il peut y avoir des problèmes avec le fonctionnement de la fonction de cycle de vie<. 🎜>
Prérequis : coopérer avec webpack
pour obtenir un chargement à la demande : c'est-à-dire qu'à l'exception des composants requis sur la page d'accueil, les autres composants ne sont chargés qu'après leur accès. . .

L'implémentation du code consiste à réécrire le composant dans la route écrite précédemment : ci-dessous se trouve à propos de celui-ci

En savoir plus sur le chargement à la demande~

import { Route,Router,browserHistory } from &#39;react-router&#39;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>
    )
}

Copier après la connexion

Neuf : service de demande de récupération

À propos de fetch

Si vous souhaitez utiliser jsonp, installez fetch-jsonp

Dix : obtenez les paramètres de chemin et les chaînes de requête

Paramètre de chemin :

Chaîne de requête :