这篇是在讲React的测试，所以就拿个几天篇幅来讲hooks，React在v16.8之後开始支援hook，那就拿一些较常用的hook来介绍吧．

TL;DR

useState

先来一段程序吧，这边我就不讲class component时期的state的设计，应该大家都会吧？ＸＤＤ

import { useState } from 'react';

const [count, setCount] = useState(0)

简单的叙述一下，useState(0)里面的0是initial Value，他的型别可以是:

1. Primitive value → useState(' ' or 0 or true ...etc)
2. Object → useState({} or [])
3. Function → useState(() ⇒ {});

就如同我上面code所显示的，state共有2种型别1种function可以设定，其中可以是primtive value or object以及callback可以设定，那我们设定完了值到哪了呢? 以范例为例就是[count, 忽略] ← 所以我们初始状态0可以从count这个variable 取得，那我们如何更改count的值呢，这时候就可以用第二个setCount 这个setter来更改，但在讲设定状态之前，我们要讲一下lazy state

大家想像一下如果初始化的值要运算很久怎办

function caculate() {
	....假装一下 可能有几百行 
}

const App: FC = () => {
	const [info, setHeavyInfo] = useState(caculate())
}

这样写你的网页一定爆干强很硬，因为你的网页每次render都要跑几百行initialize;

function caculate() {
	....as above
}

const App: FC = () => {
	const [info, setHeavyInfo] = useState(() => caculate());
}

如果这样写，只会initialize 一开始render那一次，接下来讲到setCount的setter

function handleUpdateCount() {
	setCount(prevCount => prevCount + 1);
} -> 这边会牵扯到一个观念 batch update

setter设定完之後整个component会re-render，当我们使用setState大家其实可以发现一件事情就是如果程序用以下的写法:

function handleUpdateCount() {
	setCount(count+1);
	setCount(count+1);
	setCount(count+1);
}

大家会发现，为...为什麽还是+1而已

"Currently (React 16 and earlier), only updates inside React event handlers are batched by default" , according to Dan Abramov.

因为在一个function同时执行setCount是会batching update的所以只会更新只会触发一次render 所以是+1，如果要修正这个问题有两个解决方案．

1. 使用updated function
2. 使用useReducer

(1)啊第一个解法就是

function handleUpdateCount() {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  }

执行时每次都会取得前一个的状态

(2) useReducer大家自己去看官方文件

接下来无聊，如何自己写一个useState

let state;

function render() {
	ReactDOM.render(<App />, document.getElementById('root'));
}

function useState(initialState) {
	state = state || initialState;

	function setState(newState) {
		state = newState;
		render()
	}

	return [state, setState];
}

render()