iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Modern Web

為期 30 天的 react 大冒險系列 第 14

react 大冒險-關於setState-day 13

setState

雖然 state 可被修改 但要搭配 react 內專屬的方法setState
不可以直接修改 state 上的值,直接修改 state 並不會造成 react component 重新被渲染

// 這樣寫是錯誤的
this.state.someState = 'new valueeee!';

每次 setState 就會導致 component 重新被渲染(re-render)

setState 傳入的兩個 parameter

setStste 可傳入兩個 parameter,分別是

  1. 要把 state 改變成什麼(object / function)
  2. callback function(選擇性加入)

因為 setState 本身是異步 asynchronus 的關係(state的更新可能是非同步的),
React 為了提高效能,具有將多個 setState 合併成單一更新的特性

所以不能保證當多個 setState 執行時,在哪個階段會被 set 完成
要達成緊接在 setState 後馬上執行的函式,就要使用第二個 parameter

以 object 作為 state 的 更新值

clickHandler() {
		this.setState({ greetingA: "Goodbye!" });
	}

以 function 作為 state 的 更新值

通常的使用時機是在
使用 old state 做為基礎,或是要抽離出更新 state 的邏輯以達成重複應用

// function as updater
	updateSt() {
		this.setState((oldState) => {
			const updatedArr = oldState.someArray.map((eachVal) => eachVal + 1);
			return { someArray: updatedArr };
		});
	}

example from riptutorial
incrementCounter 在 component 外部

// Outside of component class, potentially in another file/module

function incrementCounter(previousState, currentProps) {
    return {
        counter: previousState.counter + 1
    };
}

// Within component
this.setState(incrementCounter)

帶有 callback 的 setState

// object as updater + callback function
	clickHandler() {
		this.setState(
            { greetingA: "Goodbye!" }, 
            () => {
                this.setState({ greetingB: "Time to say goodbye" });
            }
        );
	}

stateful component / stateless component

  • stateful component 為帶有 state 的 component,可以做存 state,修改 state 的容器,還沒有 react hook 的時候,class component 即是 stateful component
  • 在還沒有 react hook 的時候, function component 通常就是 stateless component,用來製作結構簡單的 UI 元件,重新渲染 stateless component 時耗費的資源也較小

上一篇
react 大冒險-顯示當下欄位輸入值的文字段落 state exercise-day 12
下一篇
react 大冒險-react 事件處理-day 14
系列文
為期 30 天的 react 大冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言