您现在的位置是：网站首页> 编程资料编程资料

react中使用antd及immutable示例详解_React_

2023-05-24 335人已围观

简介 react中使用antd及immutable示例详解_React_

一、react中使用antd组件库

运行命令create-react-app antd-react创建新项目：

运行命令npm i antd安装：

使用：

import React from 'react' import ReactDOM from 'react-dom' import 'antd/dist/antd.css'; import { Button } from 'antd'; ReactDOM.render( 
, document.getElementById("root"));

二、Immutable

每次修改一个immutable对象时都会创建一个新的不可变的对象，在新对象上操作并不会影响到原对象的数据。

2.1 深拷贝和浅拷贝的关系

1、Object.assign或者... 只是一级属性赋值，比浅拷贝多拷贝了一层而已。

2、const obj1 = JSON.parse(JSON.stringify(obj)) 数组，对象都好用（缺点：不能有字段为undefined）。

2.2 immutable优化性能方式

immutable实现的原料是Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保准旧数据同时可用且不变。同时为了避免deepCopy把所有节点都复制一遍带来的性能损耗，immutable使用了structural sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

安装输入命令npm i immutable：

2.3 immutable的Map使用

map使用（map只能套一层，如果属性还是对象或者数组的话就再套一层）：

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

效果：

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 (  {this.state.info.get('name')} -- {this.state.info.get('key')} 
 ) } }

可以看到多个值时，immutable可以链式操作。

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

效果：

2.5 实际场景formJS

在实际开发中我们的state中数据结构一般来自后端返回的，那么我们将使用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 ( ImFromJs 
{this.state.info.getIn(['obj', 'name'])}
 { this.state.info.get('list').map((item, index) => { return {item} 
 }) } 
 ) } }

效果：