快捷導(dǎo)航

react中使用antd及immutable示例詳解

更新時間：2022年08月08日 09:40:00 作者：你華還是你華

這篇文章主要為大家介紹了react中使用antd及immutable示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、react中使用antd組件庫

運(yùn)行命令create-react-app antd-react創(chuàng)建新項目：

運(yùn)行命令npm i antd安裝：

使用：

import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css';
import { Button } from 'antd';
ReactDOM.render(
    <div>
        <Button type="primary">Primary Button</Button>
    </div>, 
    document.getElementById("root"));

二、Immutable

每次修改一個immutable對象時都會創(chuàng)建一個新的不可變的對象，在新對象上操作并不會影響到原對象的數(shù)據(jù)。

2.1 深拷貝和淺拷貝的關(guān)系

1、Object.assign或者... 只是一級屬性賦值，比淺拷貝多拷貝了一層而已。

2、const obj1 = JSON.parse(JSON.stringify(obj)) 數(shù)組，對象都好用（缺點(diǎn)：不能有字段為undefined）。

2.2 immutable優(yōu)化性能方式

immutable實(shí)現(xiàn)的原料是Persistent Data Structure（持久化數(shù)據(jù)結(jié)構(gòu)），也就是使用舊數(shù)據(jù)創(chuàng)建新數(shù)據(jù)時，要保準(zhǔn)舊數(shù)據(jù)同時可用且不變。同時為了避免deepCopy把所有節(jié)點(diǎn)都復(fù)制一遍帶來的性能損耗，immutable使用了structural sharing（結(jié)構(gòu)共享），即如果對象樹中一個節(jié)點(diǎn)發(fā)生變化，只修改這個節(jié)點(diǎn)和受它影響的父節(jié)點(diǎn)，其它節(jié)點(diǎn)則進(jìn)行共享。

安裝輸入命令npm i immutable：

2.3 immutable的Map使用

map使用（map只能套一層，如果屬性還是對象或者數(shù)組的話就再套一層）：

import React from 'react'
import { createRoot } from 'react-dom/client';
import 'antd/dist/antd.css'
import { Button } from 'antd'
import {Map} from 'immutable'
var obj = {
    name: 'immutable'
}
var oldObj = Map(obj)
console.log(oldObj)
// 更改值
var newObj = oldObj.set('name', 'react')
// 1.獲取值：get獲取
console.log(oldObj.get('name'), newObj.get('name'))
// 2.獲取值：普通對象
console.log(oldObj.toJS(), newObj.toJS())
const container = document.getElementById('root')
const root = createRoot(container)
root.render(
    <div>
        <Button type="primary">Primary Button</Button>
    </div>
)

效果：

state中使用：

import React, { Component } from 'react'
import { Map } from 'immutable'
export default class imMap extends Component {
  state = {
    info: Map({
      name: 'immutable',
      key: 100
    })
  }
  render() {
    return (
      <div>
        <button onClick={() => {
          this.setState({
            info: this.state.info.set('name', 'react').set('key', 101)
          })
        }}>onclick</button>
        {this.state.info.get('name')} -- 
        {this.state.info.get('key')}
      </div>
    )
  }
}

可以看到多個值時，immutable可以鏈?zhǔn)讲僮鳌?/p>

2.4 immutable的List使用

import React, { Component } from 'react'
import {List} from 'immutable'
var arr = List([1,2,3])
var arr1 = arr.push(4)
var arr2 = arr1.concat([5])
console.log(arr.toJS(), arr1.toJS(), arr2.toJS())
export default class ImList extends Component {
  render() {
    return (
      <div>ImList</div>
    )
  }
}

效果：

2.5 實(shí)際場景formJS

在實(shí)際開發(fā)中我們的state中數(shù)據(jù)結(jié)構(gòu)一般來自后端返回的，那么我們將使用formJS：

import React, { Component } from 'react'
import { fromJS } from 'immutable'
export default class ImFromJs extends Component {
    state = {
        info: fromJS({
            list: ['1', '2', '3'],
            obj: {
                name: 'immutable',
                key: 100,
            }
        })
    }
    render() {
        return (
            <div>ImFromJs
                <div><button onClick={() => {
                    this.setState({
                        info: this.state.info.setIn(['obj', 'name'], 'react')
                    })
                }}>改變標(biāo)題</button></div>
                <div><button onClick={() => {
              this.setState({
                  info: this.state.info.updateIn(['list'], (oldList) => {
                    return oldList.push(oldList._tail.array.length + 1)
                  })    
              })
          }}>改變數(shù)組</button></div>
                <div>{this.state.info.getIn(['obj', 'name'])}</div>
                <div>
                    <ul>
                        {
                            this.state.info.get('list').map((item, index) => {
                                return <li key={index}>{item} 
                                <button onClick={() => {
                                    this.setState({
                                        info: this.state.info.updateIn(['list'], (oldList) => {
                                            return oldList.splice(index, 1)
                                        })
                                    })
                                }}>del</button>
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

效果：