`
liyixing1
  • 浏览: 942042 次
  • 性别: Icon_minigender_1
  • 来自: 江西上饶
社区版块
存档分类
最新评论

为什么React中this.state不要直接修改,而是创建新的副本

阅读更多
不要修改 state。 使用 Object.assign() 新建了一个副本。不能这样使用 Object.assign(state, { visibilityFilter: action.filter }),因为它会改变第一个参数的值。一定要把第一个参数设置为空对象。也可以使用 ES7 中还在试验阶段的特性 { ...state, ...newState },参考 对象展开语法。

在 default 情况下返回旧的 state。遇到未知的 action 时,一定要返回旧的 state。
与React推崇的immutability有关。
在其他framework如angular中,侦知一个变量变化通过watch和deepwatch,尤其deepwatch在判断一个数据量大的变量是否变化时会消耗很多资源,导致应用性能下降。

在React中,通过“有变化,就一定返回一个新对象;没变化,原对象不做变化直接返回”的原则,永远可以通过判断“新旧变量是否对同一内存内容的引用”来侦测变化,效率上比deepwatch高得多
分享到:
评论

相关推荐

    react.js、react-dom.js、babel.js文件包下载

    React.js所需的三个js文件

    react-dom.js

    如果是要直接在HTML上编辑,需要下载react.js与react-dom.js。如果要使用JSX语法,则需要使用转换JSX语法的插件 react-dom.js:提供操作DOM相关的功能

    react-native之RNGestureHandlerModule.State

    react-native错误之RNGestureHandlerModule.State错误,超详细,符合新手看,对于不知道怎么解决的开发者是一片很棒的文档

    Packt.React.and.React.Native.4th.Edition

    Over the years, React and React Native has proven itself among JavaScript developers as a popular choice for a complete and practical guide to the React ecosystem. This fourth edition comes with the ...

    3D-react-giojs.zip

    3D-react-giojs.zip,用3.js构建的声明式三维地球数据可视化库——针对gio.js的react版本,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序...

    3D-react-tilt.zip

    3D-react-tilt.zip,react js-tilt.js的视差倾斜悬停效果,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。

    深入理解React中es6创建组件this的方法

    在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的。 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中。...this.state = { like

    Learning.React.Native.Building.Native.Mobile.Apps.with.JavaScript.149192

    By bringing the advantages of ReactJS to mobile, React Native transforms every web developer into a potential mobile developer. Unlike existing JavaScript-for-mobile approaches, React Native actually ...

    react学习笔记之state以及setState的使用

    React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作原理 常用的通知React数据变化的方法是调用setState(data,callback).这个方

    React.js Essentials

    Chapter 1, Installing Powerful Tools for Your Project, outlines the goal of this book and explains what modern tools you need to install in order to build React applications efficiently. It introduces...

    react面试题.md

    上述的React面试题涵盖了React框架的核心概念和常用...5. **props和state:** props和state是React中用于管理数据的两种机制,面试者需要了解它们的区别和作用,以及如何在组件中使用props和state来实现数据的传递和管

    React中组件的props.children

    props.children是用于将从父组件传递过来的标签放置到子组件中 1.创建父组件 首先引入react和reactdom import React from 'react' ... this.state={ } } render(){ return ( 这是在父组件添加的标签 )

    react最新教程(包含初级-中级-高级)

    理解react中的this 10. 使用refs操作DOM元素 11. 子组件children属性 12. 组件的生命周期之创建 13. 组件的生命周期之销毁 14. 高阶组件 第二章: 使用React-router玩转路由管理 1. react路由...

    React开发实战.pdf

    React开发实战.pdf,中文版,电子版,完整版,清晰版,

    React开发实战.pdf 分卷压缩 002

    React开发实战 介绍如何成功构建日益复杂的前端应用程序与接口,深入分析React库,并详述React生态系统中的其他工具与库,从而指导你创建完整的复杂应用程序. React开发实战 主要内容 ◆ 如何创建可组合的用户...

    react-linkState将事件绑定至state支持Preact和React

    linkState 将事件绑定至state,支持Preact和React.

    最新React架构全套高质量视频课程

    9. 理解react中的this 10. 使用refs操作DOM元素 11. 子组件children属性 12. 组件的生命周期之创建 13. 组件的生命周期之销毁 14. 高阶组件 第二章: 使用React-router玩转路由管理 1. react路由介绍 2. 跑通基本的...

    React.js Essentials [PDF EPUB Mobi Code]

    Building web applications with maintainable and performant user interfaces is a challenge that many have faced for more than a decade, but no one has risen to this challenge quite like React.js....

    React.js Succinctly

    React.js Succinctly Published on : August 08, 2016 Description Developed by Facebook engineers, React is a JavaScript library that has revolutionized how developers design and think about views in ...

Global site tag (gtag.js) - Google Analytics