react中数据不可变

先看官网


一、不可变数据的概念

不可变数据意味着数据一旦创建,就不能被更改。在React中,每次对数据的修改都会返回一个新的数据副本,而不会改变原始数据。这种方式确保了数据的稳定性和一致性。

二、Props中的不可变数据

在React中,组件的Props应该始终保持不可变。这意味着在父组件向子组件传递Props时,不应该直接修改传递的数据。

javascript 复制代码
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello',
    };
  }

  render() {
    return <ChildComponent message={this.state.message} />;
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

在上述代码中,父组件向子组件传递了message属性。由于Props是不可变的,子组件不能直接修改message属性的值。

三、State中的不可变数据

在React中,组件的State也应该保持不可变。每次更新State时,都应该返回一个新的State对象,而不是直接修改原始State。

javascript 复制代码
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount() {
    //this.setState({ count: this.state.count + 1 }); // 不推荐的方式
    let count = this.state.count
    this.setState({ count: count + 1 }); //推荐
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

上述代码中,虽然可以直接修改this.state.count,但这样的做法不是推荐的。应该使用setState来返回一个新的State对象。

四、不可变数据的优势

使用不可变数据有许多优势:

1、易于追踪变化: 当数据不可变时,每次变化都会生成新的数据对象,更容易跟踪和理解数据的变化过程。

2、性能优化: React可以通过比较新旧数据对象,确定何时进行渲染,从而提升性能。

3、避免副作用: 直接修改数据可能导致副作用和难以预料的错误。不可变数据可以减少这些问题。

4、时间旅行调试: 使用不可变数据,可以更轻松地实现时间旅行调试,即查看应用在不同时间点的状态。

相关推荐
理想不理想v2 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫3 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.8 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store