immutable、lazy-suspense、forwardRef

recol1

已于 2022-06-01 14:52:44 修改

阅读量132

点赞数

文章标签： react

于 2021-06-22 21:23:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42454057/article/details/118117989

版权

本文介绍了immutable.js库如何处理持久数据，强调了其结构共享特性，并展示了使用场景，如Map和List操作、惰性加载和数据处理。探讨了数据懒加载、序列化与高级操作，以及在React中应用的懒 Suspense 和 forwardRef 技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

immutable.js

持久性的数据（persistent data）

结构共享（structure sharing）

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

let map = Map({x:5,y:6})
let map2 = map

//获取和设置值
let map3 = map.set('x',60)
let value = map.get('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.log(map2.toJS()); //转化js的数据

const map4 = map.merge(map3) //合并后的数据，不会扁平化数据
const list = const list3 = list.concat(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.log(newSeq.toJS())


const map6 = Map({ a: 1, b: 2, c: 3 });
const lazySeq = Seq(map6);
const newMap = lazySeq
  .flip()
  .map(key => key.toUpperCase())
  .flip()

console.log(newMap.get('A'))
//===========================
//懒处理2
 const 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, -1004
  .reduce((r, n) => r * n, 1);
  
console.log(aRange) 
//==============================
const map = Map({
  x: 100,
  y: Map({
    a: 200,
    b: List(['w', 'w', 'w'])
  })
})
console.log(map.get('y').get('a'))
console.log(map.getIn(['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>loading...</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} />