当前位置：首页 > news >正文

面试题-React(十二)：React中不可变数据的力量

news 2025/7/1 22:35:46

一、不可变数据的概念

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

二、Props中的不可变数据

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

代码示例：

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。

代码示例：

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.countthis.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对象。