返回顶部
首页 > 资讯 > 前端开发 > node.js >react中immutable.js怎么用
  • 662
分享到

react中immutable.js怎么用

2024-04-02 19:04:59 662人浏览 泡泡鱼
摘要

这篇文章主要介绍React中immutable.js怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、对于react的来说,如果父组件有多个子组件想象一下这种场景,一个父组件下

这篇文章主要介绍React中immutable.js怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

1、对于react的来说,如果父组件有多个子组件

想象一下这种场景,一个父组件下面一大堆子组件。然后呢,这个父组件re-render。是不是下面的子组件都得跟着re-render。可是很多子组件里面是冤枉的啊!很多子组件的props 和 state 然而并没有改变啊!!虽然virtual dom 的diff 算法很快,但是性能也不是这么浪费的啊!下面我们上代码

1).原始代码如下

以下是父组件代码。。负责输入name 和 age 然后循环显示name 和 age

 export default class extends Component {
  constructor(props){
  super(props)
  this.state={
   name:"",
   age :"",
   persons:[]
  }
  }
  render() {
  const {name,age,persons} = this.state
  return (
   <div>
   <span>姓名:</span><input value={name} name="name" onChange={this._handleChange.bind(this)}></input>
   <span>年龄:</span><input value={age} name="age" onChange={this._handleChange.bind(this)}></input>
   <input type="button" onClick={this._handleClick.bind(this)} value="确认"></input>
   {persons.map((person,index)=>(
    <Person key={index} name={person.name} age={person.age}></Person>
   ))}
   </div>
  )
  }
  _handleChange(event){
  this.setState({[event.target.name]:event.target.value})
  }
  _handleClick(){
  const {name,age} = this.state
  this.setState({
   name:"",
   age :"",
   persons:this.state.persons.concat([{name:name,age:age}])
  })
 
  }
 }

以下是子组件代码单纯的显示name和age而已

class Person extends Component {
 componentWillReceiveProps(newProps){
 console.log(`我新的props的name是${newProps.name},age是${newProps.age}。我以前的props的name是${this.props.name},age是${this.props.age}是我要re-render了`);
 }
 render() {
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}

运行起来长下图这个样

react中immutable.js怎么用

好那么问题来了,我们看一下控制台:

react中immutable.js怎么用

天哪,这么多次re-reder..细细观看,不难发现。要re-render这么多次,父组件一re-render,子组件就跟着re-render啊。那么多么浪费性能,好PureRenderMixin出场

2).PureRenderMixin

因为咱用的是es2015的 Component,所以已经不支持mixin了,不过没关系,可以用HOCs,这个比mixin还更受推崇呢。我有空回用代码来展示他俩的异同,鉴于不是本文重点,,大家可以看这两篇文章了解下React Mixin 的前世今生 和Mixins Are Dead. Long Live Composition

所以在这里我们用Pure render decorator代替PureRenderMixin,那么代码如下

import pureRender from "pure-render-decorator"
...

@pureRender
class Person extends Component {
 render() {
 console.log("我re-render了");
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}

加个这东西就完事了?看上去咋这么不令人信服啊。不管怎样,试试吧。

react中immutable.js怎么用

果然可以做到pure render,在必须render 的时候才render。

好我们看看它的神奇之处

@pureRender

是es7的Decorators语法。上面这么写就和下面这么写一样

class PersonOrigin extends Component {
 render() {
 console.log("我re-render了");
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}
const Person = pureRender(PersonOrigin)

pureRender其实就是一个函数,接受一个Component。把这个Component搞一搞,返回一个Component看他pureRender的源代码就一目了然

function shouldComponentUpdate(nextProps, nextState) {
 return shallowCompare(this, nextProps, nextState);
}

function pureRende(component) {
 component.prototype.shouldComponentUpdate = shouldComponentUpdate;
}
module.exports = pureRender;

pureRender很简单,就是把传进来的component的shouldComponentUpdate给重写掉了,原来的shouldComponentUpdate,无论怎样都是return ture,现在不了,我要用shallowCompare比一比,shallowCompare代码及其简单,如下

function shallowCompare(instance, nextProps, nextState) {
 return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
}

一目了然。分别拿现在props&state和要传进来的props&state,用shallowEqual比一比,要是props&state都一样的话,就return false,是不是感觉很完美?不。。这才刚刚开始,问题就出在shallowEqual上了

3).shallowEqual的问题

shallowEqual引起的bug
很多时候,父组件向子组件传props的时候,可能会传一个复杂类型,比如我们改下。

 render() {
 const {name,age,persons} = this.state
 return (
  <div>
...省略.....
  {persons.map((person,index)=>(
   <Person key={index} detail={person}></Person>
  ))}
  </div>
 )
 }

person是一个复杂类型。这就埋下了隐患,在演示隐患前,我们先说说shallowEqual,是个什么东西,shallowEqual其实只比较props的第一层子属性是不是相同,就像上述代码,props 是如下

{
 detail:{
  name:"123",
  age:"123"}
}

他只会比较props.detail ===nextProps.detail
那么问题来了,
如果我想修改detail的时候考虑两种情况

情况一,我修改detail的内容,而不改detail的引用

这样就会引起一个bug,比如我修改detail.name,因为detail的引用没有改,所以props.detail ===nextProps.detail 还是为true。
所以我们为了安全起见必须修改detail的引用,(redux的reducer就是这么做的)

情况二,我修改detail的引用

这种虽然没有bug,但是容易误杀,比如如果我新旧两个detail的内容是一样的,岂不是还要,render。所以还是不完美,你可能会说用深比较就好了,但是 深比较及其消耗性能,要用递归保证每个子元素一样。

以上是“react中immutable.js怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网node.js频道!

--结束END--

本文标题: react中immutable.js怎么用

本文链接: https://lsjlt.com/news/78197.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react中immutable.js怎么用
    这篇文章主要介绍react中immutable.js怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、对于react的来说,如果父组件有多个子组件想象一下这种场景,一个父组件下...
    99+
    2024-04-02
  • 怎么用Immutable.js实现撤销重做功能
    这篇文章主要介绍了怎么用Immutable.js实现撤销重做功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用Immutable.js实现撤销重做功能文章都会有所收获,下...
    99+
    2024-04-02
  • react中swipe怎么用
    这篇文章主要介绍了react中swipe怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 react swi...
    99+
    2024-04-02
  • react中的forceupdate怎么用
    本文小编为大家详细介绍“react中的forceupdate怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“react中的forceupdate怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深...
    99+
    2024-04-02
  • react中的canvas怎么用
    这篇“react中的canvas怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“rea...
    99+
    2024-04-02
  • react中的context怎么用
    这篇“react中的context怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“re...
    99+
    2024-04-02
  • react中的modal怎么用
    这篇文章主要介绍了react中的modal怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react中的modal怎么用文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • react中的switch怎么用
    这篇文章主要介绍“react中的switch怎么用”,在日常操作中,相信很多人在react中的switch怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react中的s...
    99+
    2024-04-02
  • react中怎么使用super
    今天小编给大家分享的是react中怎么使用super,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。 react中可以使用...
    99+
    2024-04-02
  • react中context怎么使用
    今天小编给大家分享一下react中context怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2024-04-02
  • React中key怎么使用
    这篇文章给大家分享的是有关React中key怎么使用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在渲染列表时,React的差异比较算法需要一个在列表范围内的唯一key来提高性能...
    99+
    2024-04-02
  • React-Native中props怎么用
    这篇文章将为大家详细讲解有关React-Native中props怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。props就是属性,是为了描述一个组件的特征而存在的。...
    99+
    2024-04-02
  • redux在react中怎么用
    这篇文章主要介绍redux在react中怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Redux是一个数据状态管理插件,当使用React或是vue开发组件化的SPA程序时,组件之间共享信息是一个非常大的问题。例...
    99+
    2023-06-15
  • react中map怎么使用
    这篇文章主要介绍了react中map怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react中map怎么使用文章都会有所收获,下面我们一起来看看吧。react中map的用法:1、使用“{this.sta...
    99+
    2023-07-04
  • react中的key怎么使用
    这篇“react中的key怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react...
    99+
    2024-04-02
  • props怎么在react中使用
    这篇文章给大家介绍props怎么在react中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。组件的props( props是一个对象 )作用:接收传递给组件的数据特点:可以给组件传递任意类型的数据props是只读的...
    99+
    2023-06-14
  • Hook怎么在React中使用
    Hook怎么在React中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1、useState:让函数式组件拥有状态用法示例:// 计数器impor...
    99+
    2023-06-14
  • 怎么在React中使用Hooks
    这篇文章给大家介绍怎么在React中使用Hooks,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、State Hook1、基础用法function State(){  const&nbs...
    99+
    2023-06-14
  • hooks怎么在react中使用
    hooks怎么在react中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。State Hooks案例:import { useState }&...
    99+
    2023-06-14
  • Context怎么在React中应用
    本篇文章给大家分享的是有关Context怎么在React中应用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Context定义和目的Context 提供了一种在组件之间共享数据...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作