immutable、lazy

immutable、lazy

immutable.js

持久性的数据 （persistent data）

结构共享（structure sharing）

每次更新数据都返回新的对象

let map = Map({x:5,y:6})
let map2 = map//获取和设置值
let map3 = map.set('x',60)
let value = ('x')//判断值相等,返回Boolean值
map.equals(map2)
is(map,map2) //创建List
const list = List(['a','b','c'])
const list1 = list
const array = [ 7, 8, 9 ];console.log(list.size)
console.log(list === list2); //true
console.log(map2.join(',')); //5,6
console.JS()); //转化js的数据const map4 = (map3) //合并后的数据，不会扁平化数据
const list = const list3 = at(list2, array);//只可以连接一维数组const obj = {x:5}
const seq = Seq(obj)
console.log(seq); //对象化//===========================
//实现数据懒处理，用多少处理多少
const arr = [1, 2, 3, 4, 5, 6, 7, 8]
const seq = Seq(arr)
const newSeq = seq.filter((v) => {console.log("f:", v)return v % 2 !== 0
}).map((v) => {console.log('m:', v)return v * v
})
console.JS())const map6 = Map({ a: 1, b: 2, c: 3 });
const lazySeq = Seq(map6);
const newMap = lazySeq.flip().map(key => UpperCase()).flip()console.('A'))
//===========================
//懒处理2const aRange = Range(1, Infinity) //1到无穷大的大数.skip(1000) // 1001, Infinity.map(n => -n) // -1001, -Infinity.filter(n => n % 2 === 0) // -1002, -1004, ... -Infity.take(2) // -1002, -duce((r, n) => r * n, 1);console.log(aRange) 
//==============================
const map = Map({x: 100,y: Map({a: 200,b: List(['w', 'w', 'w'])})
})
console.('y').get('a'))
console.In(['y', 'a'])) //获取深层数据
const map2 = map.setIn(['y', 'a'], 300) //查找到深层并设置值const map2 = map.updateIn(['y', 'a'], (v) => {return v * v
}) //更新深层数据

lazy-suspense

数据未加载完成时显示的数据

父文件

import React, { Component, Suspense, lazy } from 'react'
const Child = lazy(() => import('./Child'))export default class Index extends Component {render() {return (<Suspense fallback={<div&</div>}><Child></Child></Suspense>)}
}

子文件

import React, { Component } from 'react'export default class Child extends Component {render() {return (<div>child</div>)}
}

forwardRef

父组件通过ref属性操作子组件的dom

//子组件
import React, { Component, forwardRef } from 'react'
export default forwardRef((props, ref) => {return (<div><input type="text" ref={ref} /></div>)
})
//父组件componentDidMount() {this.inputRef.current.focus()}<Input abc="abc" ref={this.inputRef} />