`
liyixing1
  • 浏览: 957127 次
  • 性别: 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高得多
分享到:
评论

相关推荐

    06-react-setState.md

    1. **使用不可变数据**:当你更新状态时,应该创建状态的新副本,并在副本上进行修改,而不是直接修改原有的状态对象。这有助于React进行正确的性能优化。 2. **合并vs不合并**:理解`setState`合并状态的机制对于...

    在ReactComponent中设置本地状态

    最好总是提供一个新的状态对象副本,而不是直接修改现有的`this.state`。 总结一下,在React.Component中设置本地状态的步骤: 1. 在构造函数中初始化状态。 2. 使用`this.setState`来更新状态,提供一个对象描述新...

    React 60 道面试题及答案.docx

    React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树,该变化是由用户或系统完成的各种动作引起的。 Virtual DOM 的工作原理 1. 每当底层数据发生改变时,整个 UI 都将在 ...

    React 中文版

    虚拟 DOM 是一个轻量级的内存中的 DOM 树副本,React 会根据应用的状态变化来更新虚拟 DOM,然后计算出实际 DOM 需要做出的最小更改,最后一次性将这些更改应用到真实的 DOM 上。这种机制极大地提高了 DOM 操作的...

    web前端react框架

    虚拟DOM是在内存中构建的DOM树副本,可以避免频繁直接操作真实的DOM。 - **性能优化**:通过合理地使用`shouldComponentUpdate`方法或PureComponent/React.memo来避免不必要的重新渲染。 #### 九、React Router - *...

    一份关于React框架的框架教程!!!!!

    - **为什么选择React**: - **高效性**:React通过虚拟DOM减少不必要的重绘和布局计算,提高应用性能。 - **组件化**:React强调组件化的开发模式,使得代码易于理解和维护。 - **社区支持**:React拥有庞大的...

    Java前端笔试题目(带答案)

    - `slice()` 不会修改原数组,而是返回一个新的副本。 - `splice()`, `sort()`, `unshift()` 都会直接修改原数组。 2. 字符串方法: - `indexOf()` 可以用来寻找子字符串并返回其在字符串中的位置。 3. JSON...

    object-assign_Objectassign_

    例如,在React中,当需要创建一个新的组件状态时,可以使用`Object.assign`来避免直接修改原有状态,从而遵循不可变数据的原则: ```jsx this.setState(Object.assign({}, this.state, {newKey: newValue})); ``` ...

    uimmutable:以不变的力量对组件进行React

    1. **优化性能**:由于不可变数据不允许直接修改,每次修改都会返回一个新的副本,这看似会增加内存开销,但实际上,由于`Immutable.js`的结构优化,新副本在大部分情况下只需要更新部分数据,而不是复制整个结构。...

    React-Native-Basics:React Native基础知识,包括导航,状态,Reducer,样式

    Reducer必须是确定性的,不直接修改旧state,而是返回一个新的state副本。在React Native中,Redux与React-Redux库结合使用,使得组件可以订阅store,自动获取state的变化并触发组件更新。 4. **样式(Styles)**:...

    百分点(14问).pdf

    与传统的函数表达式不同,箭头函数不会创建自己的this值,而是捕获其所在上下文的this值。 Promise是JavaScript的异步编程解决方案。它代表了一个异步操作的最终完成或失败及其结果值。Promise对象有三种状态:...

    platzi-store-jest:React.js中的项目,其中使用Jest执行单元测试

    虚拟DOM则是React提高性能的关键,它在内存中创建一个DOM的副本,当组件的状态改变时,React会计算出最小的DOM更新,从而提高应用的性能。 Jest提供了丰富的API和集成工具,使得编写测试用例变得简单。它内置了模拟...

    前端Vue常见面试题大全.docx

    - **目的:** 确保每次创建新实例时都能获得一份独立的数据副本,避免多个实例共享同一份数据导致的问题。 #### 6. 说一说scoped样式隔离 **概念:** scoped 属性可以让 CSS 规则仅对当前组件内的元素生效,提高...

    VUE经典面试题目包含答案

    1. **v-show 和 v-if**:v-if 是条件渲染,如果条件为假则不会创建对应的DOM元素;v-show 则是通过CSS的display属性切换元素的可见性,两者在性能上,v-if 更优,因为v-if有更高的切换开销,而v-show有更高的初始...

    level01-concepts-ReactJS:来自Rocketseat的BootCamp GoStack的ReactJS级别01的概念

    在"level01-concepts-ReactJS"中,学员会学习如何使用JSX创建和渲染React元素。 生命周期方法是React组件的重要部分。它们定义了组件在特定时间点执行的函数,例如初始化状态、更新后的处理等。在React 16.8之前,...

Global site tag (gtag.js) - Google Analytics