为什么我们要在对引用类型进行变异之前，在react中复制它们

Question

我是react世界的新手。这里有一个示例代码，使用deletePersonHandler方法，我将从数组中删除一些对象。

class App extends Component {
state = {
persons: [
{ name: "peter", age: 24 },
{ name: "john", age: 25 },
{ name: "jake", age: 30 }
],
showPersons: true
}
deletePersonHandler = index => {
const persons = this.state.persons;
persons.splice(index,1);
this.setState({persons:persons})
}

togglePersonsHandler = () => {
this.setState({ showPersons: !this.state.showPersons })
}
render() {
let persons = null;
if (this.state.showPersons) {
persons = (
<div>
{this.state.persons.map((person, index) => {
return <Person
click={() => this.deletePersonHandler(index)}
name={person.name}
age={person.age}
key={index}
/>
})}
</div>
);
}
return (
<div className="App">
{persons}
<button onClick={this.togglePersonsHandler}>Click to hide/show</button>
</div>
)
}
}
export default App;

而且运行良好。我的问题是：

当这起作用时-在这种情况下，不在人员上复制

deletePersonHandler = index => {
const persons = this.state.persons;
persons.splice(index,1);
this.setState({persons:persons})
}

为什么推荐的方法是先复制，然后修改参考类型？

deletePersonHandler = index => {
const persons = [...];
persons.splice(index,1);
this.setState({persons:persons})
}

Answer 1

我是根据我在JavaScript中使用对象的经验来解释这一点的。我有一个发布者和订阅者代码，其中有一个对象数组，用于跟踪一些消息编号和它们的处理程序，如

let observer = {"8000":[handler1, handler2]};

所以当发生什么事情时，我发布8000条消息，所有的处理程序都像这样执行

for(var item in observer[8000]){
//execute handler/
}

直到现在，一切都很顺利。然后我开始在处理完处理程序后删除它。因此，在移除处理程序后，数组观察器[8000]的长度减少了1。所以在下一个序列中，它找不到下一个没有执行的处理程序(对象在JavaScript中是通过引用传递的(。所以为了解决这个问题，我必须在直接修改之前复制数组对象。简而言之，若对象有很多依赖项，那个么在处理之前先复制它，然后进行处理，或者只在一个地方使用，然后使用就地处理。这取决于情况，并没有任何严格的规则可以遵循，如复制然后处理。