Apakah kaedah bertindak balas terhadap perubahan keadaan?

Kaedah untuk bertindak balas kepada menukar keadaan ialah: 1. Ubah suai keadaan melalui "this.setState({title:'React'});" => ;counter:preState.quantity+1)" kaedah untuk mengubah suai keadaan; 3. Tukar keadaan komponen melalui kaedah "replaceState".

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah cara untuk menukar keadaan dalam tindak balas?

Ubah suai keadaan dalam tindak balas dengan betul

Pertama, sebagai tindak balas, anda boleh terus mendapatkan negeri melalui this.state.{property}, tetapi apabila kita ingin mengubah suai negeri, terdapat banyak perangkap yang perlu diberi perhatian Berikut ialah tiga perangkap biasa:

tidak boleh mengubah suai keadaan secara langsung.

Komponen secara langsung mengubah suai keadaan dan tidak mencetuskan semula pemaparan. Contohnya:

this.state.title='React';

Kaedah pengubahsuaian yang betul ialah:

this.setState({title:'React'});

keadaan dikemas kini secara tak segerak

Apabila setState dipanggil, komponen state Ia tidak berubah serta-merta, tetapi meletakkan keadaan untuk diubah suai ke dalam baris gilir acara React mengoptimumkan masa pelaksanaan sebenar, dan atas sebab prestasinya sendiri, beberapa pengubahsuaian keadaan setState boleh digabungkan menjadi satu pengubahsuaian keadaan. Oleh itu, jangan bergantung pada keadaan semasa untuk mengira keadaan seterusnya, kerana apabila pengubahsuaian keadaan benar-benar dilakukan, kadangkala keadaan bergantung ini tidak dijamin sebagai keadaan terkini, kerana tindak balas itu sendiri akan menggabungkan beberapa keadaan menjadi satu, maka ini. Keadaan masih keadaan lama, jadi anda tidak boleh bergantung pada prop semasa untuk mengira keadaan seterusnya, kerana kemas kini prop juga tidak segerak. Sebagai contoh: dalam contoh tindak balas yang biasa digunakan, terdapat operasi mengklik tanda tambah untuk meningkatkan nilai sebanyak satu Jika anda mengklik + sekali, nombor akan meningkat sebanyak 1. Jika anda mengklik dua kali berturut-turut, ia akan masih meningkat sebanyak 1. Ini adalah apabila tindak balas digabungkan dan diubah suai kepada sekali , yang bersamaan dengan melaksanakan kod berikut:

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

Kemudian operasi sebelumnya ditimpa, dan nilai akhir hanya menambah 1. Pada masa ini, anda boleh menggunakan fungsi lain sebagai parameter setState Fungsi ini mempunyai dua parameter, parameter Satu pertama ialah keadaan komponen sebelum pengubahsuaian ini, dan parameter kedua ialah prop terkini.

Kaedah pengubahsuaian yang betul ialah:

this.setState((preState, props)=>counter:preState.quantity+1)

Kemas kini keadaan ialah proses gabungan

Apabila memanggil ssetState untuk mengubah suai Apabila bercakap tentang keadaan komponen, anda hanya perlu lulus dalam keadaan berubah, bukan keadaan lengkap, kerana kemas kini keadaan komponen ialah proses penggabungan Contohnya, keadaan komponen ialah:

this.state={

title:'React',

content:'React is an wondeful JS library'

}

Nota : Apabila anda hanya perlu mengubah suai tajuk, hantarkan tajuk yang diubah suai kepada setState:

this.setState({title:'ReactJs'});

react akan menggabungkan tajuk terbaharu kepada keadaan asal manakala mengekalkan kandungan keadaan asal , keadaan gabungan terakhir ialah:

this.state={
title:'ReactJs,
content:''React is an wondeful Js library
}

2. Nyatakan dan objek tidak berubah

React secara rasmi menganggap keadaan sebagai objek tidak berubah. . Di satu pihak, ia secara langsung mengubahsuai this.state , komponen tidak akan dipaparkan semula, semua keadaan yang terkandung dalam keadaan harus menjadi objek yang tidak boleh diubah dicipta semula dan bukannya mengubah secara langsung keadaan keadaan asal, kemudian apabila keadaan berubah, bagaimana untuk mencipta keadaan baharu? 🎜>

Jenis keadaan ialah Jenis tidak berubah (nombor, rentetan, bool, lembu jantan, tidak ditentukan)

Keadaan ini adalah yang paling mudah, kerana keadaan adalah jenis tidak berubah, jadi anda boleh terus memberikan nilai baharu kepada keadaan untuk diubah suai, seperti berikut Kiraan yang ingin kita ubah suai adalah daripada jenis nombor, dengan tiga keadaan tajuk (rentetan) dan kejayaan (bool):

this.setState({
count:1,
title:'React',
success:true
})

Jenis status ialah Array

Jika terdapat buku status jenis tatasusunan, apabila anda ingin menambah buku pada buku, anda boleh menggunakan kaedah concat tatasusunan atau sintaks lanjutan es6 (sintaks termaklum)

Kaedah 1: Gunakan praState, concat untuk mencipta tatasusunan baharu

 this.setState((preState)=>books:preState.books.concat(['React Guide']))

Kaedah 2: Sintaks penyebaran ES6

this.setState(preState=>books:[...preState,''React Guide])

Apabila kita memintas beberapa elemen daripada buku sebagai keadaan baharu, kita boleh menggunakan kaedah hirisan daripada tatasusunan:

this.setState(preState=>books:preState.books.slice(1,3))

Apabila menapis beberapa elemen daripada buku sebagai keadaan baharu, anda boleh menggunakan kaedah penapis:

 this.setState(preState => {
        books: preState.books.filter(item => {

        return item != 'React';

        })
    })

Nota: Jangan gunakan push, pop, shift, Kaedah unshift dan splice mengubah suai status jenis tatasusunan kerana kaedah ini mengubah suai tatasusunan asal, manakala concat, slice, dan penapis akan mengembalikan tatasusunan baharu.

Kaedah 3: Jenis keadaan ialah objek biasa (tidak termasuk: rentetan, tatasusunan)

Gunakan kaedah Object.assgin() daripada es6

this.setState({

onwer:Object.assgin({},preState.onwer,{name:'Jason'});

})

Gunakan sifat hamparan Objek:

this.setState(preState=>{
owner:{...preState.owner,name:'Jason'}
})

 

总结：

创建新的状态的关键是，避免使用会直接修改原对象的方法而是使用可以返回一个新对象的方法，当然可以使用Immutable的JS库（Immutable.js）实现类似的效果。

 

思考：

为什么React推荐组件状态的修改时不可变对象呢？

1. 不可变对象的修改会返回一个新的对象，不用担心原对象在不小心的情况下修改导致的错误，方便程序的管理和调试
2. 处于性能的考虑，对象组件的状态是不可变对象时，在组件的shouldComponentUpdate方法中仅需要比较前后两次状态对象的引用就可以判断状态是否真的改变，从而避免不必要的render调用

三：除了以上方法修改react组件的状态之外，我们还经常会用到replaceState改变组件的状态

 

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。使用语法：

replaceState(object nextState,[, function callback])

nextState，将要设置的新状态，该状态会替换当前的state。

callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

如：

 class App extends React.Component{

     constructor(props);

      this.state={

      count:1

      title:'数字计算'

      }

}

handleClick=()=>{

  this.replaceState({

    count:this.state.count+1

  })

}

render(){
    return(
      <button onClick={this.onClick}>点我</button>
      )
  }

}

 

结果为：

 

{
count：1
}

推荐学习：《react视频教程》

Atas ialah kandungan terperinci Apakah kaedah bertindak balas terhadap perubahan keadaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!