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
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
}
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']))
this.setState(preState=>books:[...preState,''React Guide])
this.setState(preState=>books:preState.books.slice(1,3))
this.setState(preState => {
books: preState.books.filter(item => {
return item != 'React';
})
})
this.setState({
onwer:Object.assgin({},preState.onwer,{name:'Jason'});
})this.setState(preState=>{
owner:{...preState.owner,name:'Jason'}
})
总结：
创建新的状态的关键是，避免使用会直接修改原对象的方法而是使用可以返回一个新对象的方法，当然可以使用Immutable的JS库（Immutable.js）实现类似的效果。
思考：
为什么React推荐组件状态的修改时不可变对象呢？
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
}Atas ialah kandungan terperinci Apakah kaedah bertindak balas terhadap perubahan keadaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
