本文轉載自微信公眾號「JS每日一題」，作者灰灰 。轉載本文請聯(lián)系JS每日一題公眾號。
創(chuàng)新互聯(lián)專注于黃平企業(yè)網(wǎng)站建設,響應式網(wǎng)站設計,成都做商城網(wǎng)站。黃平網(wǎng)站建設公司,為黃平等地區(qū)提供建站服務。全流程按需網(wǎng)站建設，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務
一、是什么
一個組件的顯示形態(tài)可以由數(shù)據(jù)狀態(tài)和外部參數(shù)所決定，而數(shù)據(jù)狀態(tài)就是state
當需要修改里面的值的狀態(tài)需要通過調用setState來改變，從而達到更新組件內部數(shù)據(jù)的作用
如下例子：
- import React, { Component } from 'react'
-
- export default class App extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- message: "Hello World"
- }
- }
-
- render() {
- return (
-
-
{this.state.message}
- this.changeText()}>面試官系列
-
- )
- }
-
- changeText() {
- this.setState({
- message: "JS每日一題"
- })
- }
- }
通過點擊按鈕觸發(fā)onclick事件，執(zhí)行this.setState方法更新state狀態(tài)，然后重新執(zhí)行render函數(shù)，從而導致頁面的視圖更新
如果直接修改state的狀態(tài)，如下：
- changeText() {
- this.state.message = "JS每日一題";
- }
我們會發(fā)現(xiàn)頁面并不會有任何反應，但是state的狀態(tài)是已經(jīng)發(fā)生了改變
這是因為React并不像vue2中調用Object.defineProperty數(shù)據(jù)響應式或者Vue3調用Proxy監(jiān)聽數(shù)據(jù)的變化
必須通過setState方法來告知react組件state已經(jīng)發(fā)生了改變
關于state方法的定義是從React.Component中繼承，定義的源碼如下：
- Component.prototype.setState = function(partialState, callback) {
- invariant(
- typeof partialState === 'object' ||
- typeof partialState === 'function' ||
- partialState == null,
- 'setState(...): takes an object of state variables to update or a ' +
- 'function which returns an object of state variables.',
- );
- this.updater.enqueueSetState(this, partialState, callback, 'setState');
- };
從上面可以看到setState第一個參數(shù)可以是一個對象，或者是一個函數(shù)，而第二個參數(shù)是一個回調函數(shù)，用于可以實時的獲取到更新之后的數(shù)據(jù)
二、更新類型
在使用setState更新數(shù)據(jù)的時候，setState的更新類型分成：
異步更新
先舉出一個例子：
- changeText() {
- this.setState({
- message: "你好啊"
- })
- console.log(this.state.message); // Hello World
- }
從上面可以看到，最終打印結果為Hello world，并不能在執(zhí)行完setState之后立馬拿到最新的state的結果
如果想要立刻獲取更新后的值，在第二個參數(shù)的回調中更新后會執(zhí)行
- changeText() {
- this.setState({
- message: "你好啊"
- }, () => {
- console.log(this.state.message); // 你好啊
- });
- }
同步更新
同樣先給出一個在setTimeout中更新的例子：
- changeText() {
- setTimeout(() => {
- this.setState({
- message: "你好啊
- });
- console.log(this.state.message); // 你好啊
- }, 0);
- }
上面的例子中，可以看到更新是同步
再來舉一個原生DOM事件的例子：
- componentDidMount() {
- const btnEl = document.getElementById("btn");
- btnEl.addEventListener('click', () => {
- this.setState({
- message: "你好啊"
- });
- console.log(this.state.message); // 你好啊
- })
- }
小結
在組件生命周期或React合成事件中，setState是異步
在setTimeout或者原生dom事件中，setState是同步
三、批量更新
同樣先給出一個例子：
- handleClick = () => {
- this.setState({
- count: this.state.count + 1,
- })
- console.log(this.state.count) // 1
-
- this.setState({
- count: this.state.count + 1,
- })
- console.log(this.state.count) // 1
-
- this.setState({
- count: this.state.count + 1,
- })
- console.log(this.state.count) // 1
- }
點擊按鈕觸發(fā)事件，打印的都是 1，頁面顯示 count 的值為 2
對同一個值進行多次 setState， setState 的批量更新策略會對其進行覆蓋，取最后一次的執(zhí)行結果
上述的例子，實際等價于如下：
- Object.assign(
- previousState,
- {index: state.count+ 1},
- {index: state.count+ 1},
- ...
- )
由于后面的數(shù)據(jù)會覆蓋前面的更改，所以最終只加了一次
如果是下一個state依賴前一個state的話，推薦給setState一個參數(shù)傳入一個function，如下：
- onClick = () => {
- this.setState((prevState, props) => {
- return {count: prevState.count + 1};
- });
- this.setState((prevState, props) => {
- return {count: prevState.count + 1};
- });
- }
而在setTimeout或者原生dom事件中，由于是同步的操作，所以并不會進行覆蓋現(xiàn)象
參考文獻
https://juejin.cn/post/6844903667426918408
https://juejin.cn/post/6844903636749778958
https://segmentfault.com/a/1190000039077904
網(wǎng)站名稱：面試官：說說React中的SetState執(zhí)行機制
本文來源：
http://uogjgqi.cn/article/djcpcjp.html
