Le chemin de l'apprentissage immutable - - Adieu à la copie traditionnelle

Premier départ:CSDNToc - toc!,Apprendre sans fin

---

Nuageux30°

---

The greatest test of courage on earth is to bear defaet without losing heart.

---

2022/6/24

---

immutable

Il s'agit d'une bibliothèque tierce qui remplace les méthodes traditionnelles de copie

Avantages:

• L'opération sur un nouvel objet n'affecte pas les données de l'objet original
• Bonne performance

Installation et utilisation

1.Télécharger npm i immutable

2.Importer import {Map} from 'immutable'

Map

Syntaxe:Map(Objet)

Affectation:set("Nom de la propriété","Nouvelles valeurs")

Valeur:get("Nom de la propriété")

toJS()Retourner à l'objet normal

import React, {
     Component } from 'react';
/** * 1.Télécharger npm i immutable * 2.Importer import {Map} from 'immutable' */
import {
    Map} from 'immutable'

var obj={
    
    name:"Toc - toc!",
    age:20
}
var objImmu=Map(obj);
var newobjImmu=objImmu.set("name","pengkeStudy");
// console.log(objImmu,newobjImmu)
//get('Propriétés')Obtenir la valeur
console.log(objImmu.get("name"),newobjImmu.get("name"));

//toJSRetourner à l'objet normal
console.log(objImmu.toJS(),newobjImmu.toJS());
/* //Écrire un class Immu02 extends Component { state={ info:Map({ name:"Toc - toc!", age:20 }) } render() { return ( <div> Immu02 <button onClick={()=>{ this.setState({ info:this.state.info.set('name',"pengkeStudy").set('age',1000) }) }}>Modifier leurs valeurs</button> {this.state.info.get("name")}---- {this.state.info.get("age")} </div> ); } }*/
//écriture II
class Immu02 extends Component {
    
    state={
    
        info:{
    
            name:"Toc - toc!",
            age:20
        }
    }
    render() {
    
        return (
            <div>
                Immu02
                <button onClick={
    ()=>{
    
                    let old=Map(this.state.info)
                    let newImmu=old.set("name","pengkeStudy").set("age",10000)
                    this.setState({
    
                        info:newImmu.toJS()
                    })
                    
                }}>Modifier leurs valeurs</button>
                {
    this.state.info.name}----
                {
    this.state.info.age}
            </div>
        );
    }
}

export default Immu02;

NidificationMap

Map L'objet dans l'objet doit également être enveloppé Map

Peut passermapDeget Méthode pour obtenir la valeur à transmettre au composant ., Cela résout parfaitement la mise à jour invalide des composants

shouldComponentUpdate Pour déterminer si un rafraîchissement est nécessaire

import React, {
     Component } from 'react';
import {
    Map} from 'immutable'

class Immu03 extends Component {
    
    state={
    
        info:Map({
    
            name:"Toc - toc!",
            age:20,
            hobbit:Map({
    
                likeone:"Sports",
                liketwo:"Apprendre"
            })
        })
    }
    render() {
    
        return (
            <div>
                Immu03
                <button onClick={
    ()=>{
    this.setState({
    
                    info:this.state.info.set("name"," Apprendre ah ah ah ")
                })}}>Modifier</button>
                {
    this.state.info.get("name")}
                <Child hobbit={
    this.state.info.get("hobbit")} ></Child> 
            </div>
        );
    }
}
class Child extends Component{
    
    shouldComponentUpdate(nextProps,nextState){
    
        //Jugementhobbit Si la valeur de est mise à jour 
        if(this.props.hobbit===nextProps.hobbit){
    
            return false;
        }
        return true;
    }
    render(){
    
        return(
            <div>Child</div>
        );
    }
    componentDidUpdate(){
    
        console.log(" Sous - composants mis à jour ");
    }
}
export default Immu03;

List

Vous pouvez utiliser la méthode des propriétés du tableau

import React, {
     Component } from 'react';
import {
    List} from 'immutable'
var arr=List([1,231,1])
let arr2=arr.push(4)// N'affecte pas la structure originale de l'objet 
let arr3=arr2.concat([12,323,123])
console.log(arr,arr2,arr3);
class Immu04 extends Component {
    
    state={
    
        favor:List(['Manger','Dormez.','Apprendre','Sports'])
    }
    render() {
    
        return (
            <div>
                Immu04
                {
    
                    this.state.favor.map(item=>{
    
                        return <li key={
    item}>{
    item}</li>
                    })
                }
            </div>
        );
    }
}
export default Immu04;

Mise en œuvre des cas individuels de modification

import {
     List,Map } from 'immutable';
import React, {
     Component } from 'react';
class Immu05 extends Component {
    
    state={
    
        info:Map({
    
            name:"Toc - toc!",
            location:Map({
    
                province:"Jiangxi",
                city:"Gian."
            }),
            hobbit:List(['Dormez.','Apprendre','Frappe au clavier'])
        })
    }
    render() {
    
        return (
            <div>
                <h1>Modifier les renseignements personnels</h1>
                <div>
                    <button onClick={
    ()=>{
    
                        this.setState({
    
                            info:this.state.info.set("name","L'amour de l'apprentissage").set("location",this.state.info.get("location").set("city","Nanchang"))
                        })
                    }}>Modifier</button>
                    {
    this.state.info.get("name")}
                    <br />
                    {
    this.state.info.get("location").get("province")}-
                    {
    this.state.info.get("location").get("city")}
                    {
    
                        this.state.info.get("hobbit").map((item,index)=><li key={
    item}>{
    item}<button onClick={
    ()=>{
    
                            // console.log(index);
                            this.setState({
    
                                info:this.state.info.set("hobbit",this.state.info.get("hobbit").splice(index,1))
                            })
                        }}>Supprimer</button></li>)
                    }
                </div>
            </div>
        );
    }
}

export default Immu05;

AdoptionfromJS、setIn、updateInApporter des améliorations

• fromJS Convertir des objets normaux en Immutable
• setIn() Affectation de profondeur , Paramètre 1 pour remplir le tableau à modifier , Paramètre II valeur modifiée
• updateIn() Changement de profondeur , Paramètre 1 pour remplir le tableau à modifier , Argument 2 fonction de rappel ( Le paramètre est l'objet original )

import {
     fromJS } from 'immutable';
import React, {
     Component } from 'react';
class Immu06 extends Component {
    
    state={
    
        info:fromJS({
    
            name:"Toc - toc!",
            location:{
    
                province:"Jiangxi",
                city:"Gian."
            },
            hobbit:['Dormez.','Apprendre','Frappe au clavier']
        })
    }

    render() {
    
        return (
            <div>
                <h1>Modifier les renseignements personnels</h1>
                <div>
                    <button onClick={
    ()=>{
    
                        this.setState({
    
                            info:this.state.info.setIn(["name"],"L'amour de l'apprentissage").setIn(["location","city"],"Nanchang")//setIn(" Le paramètre 1 est un tableau ","Valeur modifiée")
                        })
                    }}>Modifier</button>
                    {
    this.state.info.get("name")}
                    <br />
                    {
    this.state.info.get("location").get("province")}-
                    {
    this.state.info.get("location").get("city")}
                    {
    
                        this.state.info.get("hobbit").map((item,index)=><li key={
    item}>{
    item}<button onClick={
    ()=>{
    
                            // console.log(index);
                            // this.setState({
    
                            // info:this.state.info.setIn(["hobbit",index],"")
                            // })
                            //updateIn( Objet à modifier ,Fonction de rappel( Le paramètre est l'objet original ))
                            this.setState({
    
                                info:this.state.info.updateIn(["hobbit"],(list)=>list.splice(index,1))
                            })
                        }}>Supprimer</button></li>)
                    }
                </div>
            </div>
        );
    }
}

export default Immu06;

C'est comme ça que les frais de scolarité Immutable~