【React 17.0.2】Hooks

### useState
React本体に関数コンポーネント専用の保存領域を作成してもらい、そこにあるデータを読み書きできる

			const[count, setCount] = useState(0);
			return (
				<div onClick={()=>setCount(count+1)}>{count}</div>
			);

複数の値を扱うときは、複数のuseStateを使う

			const[count, setCount] = useState(0);
			const[isRed, setIsRed] = useState(false);

			return (
				<div 
					style={isRed? {color: 'red'}: null}
					onClick={() => {
						setCount(count+1);
						setIsRed((count+1)%3 === 0);
				}}
				>
			{count}
			</div>
			);

hooksをifやfor文の中で使用してはいけない

### useMemo
useMemoは単純に値を保存するためのhook

			const Calculator = () => {
				const calcResult = useMemo(() => expensiveFunc(), []);

				return <div>{calcResult}</div>
			}

### useCallback
useCallback(func, []) と省略した書き方ができる

			const Button = React.memo((props) => {
				return <button onClick={props.onClick}>Click Me</button>
			});

			const App = () => {
				const onClick = useCallback(() => alert('Hi!'), []);
				return <Button onClick={onClick}/>
			}

### useEffect
コンポーネントのレンダリング後に実行される

			const Message = () => {

				const elem = document.querySelector('#message');
				console.log(elem);

				useEffect(() => {
					const elem = document.querySelector('#message');
					console.log(elem);
					elem.innerText = "Hello!"
				});

				return <div id="message"></div>
			}

### useRef
useStateの参照版。useRefを使うことでReact本体側に値を保存でき、オブジェクトでラップされる

			const Message = () => {

				const divRef = useRef(null);

				useEffect(() => {
					divRef.current.innerText = 'Hello!';
				}, []);

				return <div ref={divRef}></div>
			}

実装したい内容に応じて、Hookを使い分けるってことか。