setState的新版用法

1.新版本的react更新了setState的用法，可以使用箭頭函數指派，效率更高。

<div>
					<label htmlFor="insertArea">輸入内容</label>
					<input 
						id="insertArea"
						className='input'
						value={this.state.inputValue}
						onChange={this.handleInputChange}
						ref={(input) => {this.input = input}}
					/>
					<button onClick={this.handleBtnClick}>送出</button>
				</div>
           

比如這段代碼 ，使用setState方法去給list inputValue指派，setState提供兩個參數，都可以是箭頭函數，第一個參數是給state指派，第二個參數是異步方法完成之後，做的事情，也就是指派完成之後做什麼，這裡我們列印一下list的資料個數，如果不寫在第二個參數中，列印的個數會少一個，因為setState是異步方法

handleBtnClick() {
		this.setState((prevState) => ({
			list: [...prevState.list, prevState.inputValue],
			inputValue: ''
		}), () => {
			console.log(this.ul.querySelectorAll('div').length);
		});
	}
           

2.箭頭函數中會提供一個prevState，這個參數代表目前state中的值，未改變的state的值。是以可以替代下面這種寫法

handleBtnClick() {
		this.setState((prevState) => ({
			list: [...this.state.list,this.state.inputValue],
			inputValue: ''
		}), () => {
			console.log(this.ul.querySelectorAll('div').length);
		});
	}