React.jsのデータを変異させる

Question

私は変異しないことに関するReactjsのdocumentを読んでいます。

handleClick() { 
    // This section is bad style and causes a bug 
    const words = this.state.words; 
    words.push('marklar'); 
    this.setState({words: words}); 

}

と：：

handleClick() { 
    this.setState(prevState => ({ 
    words: prevState.words.concat(['marklar']) 
    })); 
} 

なぜ第二のコードがデータを変化させません 私は、文書の例のコードの2枚の違いを理解していませんか？

Answer 1

最初の例では配列があり、この配列にpushを使用して新しい項目を追加しています。

2番目の例では、concatを使用して配列のコピーを作成し、その項目を追加します。つまり、元の配列を変更しません。 concatは新しい配列を返します。

2番目の例では、元の配列を変更していません。 ReactとReduxでは、状態を変更することは重要な原則ではありません。

良い答えはhere explaining the reasons for avoiding mutationです。

Answer 2

単純に言えば、concatは配列の新しいコピーを返します。したがって、以前の配列は変更されません。