「SETSTATEを（）」を呼び出すとき、なぜリアクトに拡散演算子を使うのか？

Terchilăマリアン：

私はちょうど拾っ開始react.jsを私はチュートリアルの多くを通り抜けたので、私は基本的に状態から項目を削除することを意図し、このビットにつまずいてきました。

これは、男は私に削除機能を導入する方法であります

  delTodo = id => {
    this.setState({
      todos: [...this.state.todos.filter(todo => todo.id !== id)]
    });
  };

私はJavaScriptを使用それほど慣れていないよので、私は何を考え出す苦労していた...彼は与えられたシナリオで、それを使用している理由を正確に演算子がやっとされます。だから、それがどのように動作するかをよりよく理解しているために、私は、コンソール内のビットを演奏し、私はそれを実現しましたarray = [...array]。しかし、それは本当ですか？このビットは、上記のものとまったく同じことをやっていますか？

  delTodo = id => {
    this.setState({
      todos: this.state.todos.filter(todo => todo.id !== id)
    });
  };

彼はそのアプローチの代わりに、私が作ってみたものを使用することにすることを選択した理由を、より経験豊富な誰かが私に明確にもらえますか？

goto1：

ドキュメントごとのように：

変異することはありませんthis.state呼び出すと、直接setState()その後はあなたが作った突然変異を交換することができます。トリートthis.stateそれはであるかのようにimmutable。

reactjs.org/docs/react-component.html#state

だから、あなたが言及したチュートリアルの例では、あなたの状態を更新するために、配列のコピーを作成する必要はありません。

// GOOD
delTodo = id => {
  this.setState({
    todos: this.state.todos.filter(...)
  })
}

Array.filterこの方法は、新しい配列を作成し、元の配列を変異させていない、したがって、それは直接あなたの状態を変化させません。同じことは、次のような方法に適用されますArray.mapかArray.concat。

あなたの状態が配列され、あなたが変更可能な方法を適用している場合は、あなたの配列をコピーする必要があります。

これを把握する多くの参照Array方法が変更可能です。

doesitmutate.xyz

しかし、あなたは次のような何かをした場合：

// BAD
delTodo = id => {
  const todos = this.state.todos
  todos.splice(id, 1)
  this.setState({ todos: todos })
}

そして、あなたはので、直接あなたの状態を変異されると思いArray.splice、既存の配列の内容を変更するのではなく、特定の項目を削除した後に新しい配列を返します。したがって、あなたは、拡散演算子を使って配列をコピーする必要があります。

// GOOD
delTodo = id => {
  const todos = [...this.state.todos]
  todos.splice(id, 1)
  this.setState({ todos: todos })
}

同様にしてobjects、あなたは同じ手法を適用すべきです。

// BAD
updateFoo = () => {
  const foo = this.state.foo // `foo` is an object {}
  foo.bar = "HelloWorld"
  this.setState({ foo: foo })
}

上記の直接変異し、あなたの状態、あなたがコピーを作成して、あなたの状態を更新する必要がありますので。

// GOOD
updateFoo = () => {
  const foo = {...this.state.foo} // `foo` is an object {}
  foo.bar = "HelloWorld"
  this.setState({ foo: foo })
}

お役に立てれば。

「SETSTATEを（）」を呼び出すとき、なぜリアクトに拡散演算子を使うのか？

おすすめ