State Hook 与 Effect Hook 的运用

Hook 是什么？

Hook 是一个特殊的函数，可以使你不编写类组件的情况下使用state以及其他React的特性。

State Hook

import React, { useState } from 'react';
function Example(){
	
	// 创建一个变量count，创建一个改变变量count的方法setCount,并且设置变量初始值为0;
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>当前点击了{ count }次</p>
			<button onClick={() => setCount(count + 1)}>点击</button>
		</div>
	)
}
export default Example;

State Hook 就是可以使用state的状态，调用useState方法时创建一个变量count，创建一个改变变量count的方法serCount,并且设置变量初始值为0；为绑定按钮单击事件并且设置每次执行setCount函数时count自加1；并且值得一提的是你不同定义多个state变量，state已经很好的存储数组和对象。

Effect Hook

import React, { useState, useEffect } from 'react';
function Example(){
	
	const [count, setCount] = useState(0);

	useEffect(() => {
		document.title = `点击了${ count }次`
	})

	return (
		<div>
			<p>当前点击了{ count }次</p>
			<button onClick={() => setCount(count + 1)}>点击</button>
		</div>
	)
}
export default Example;

在每一次数据更新完成渲染后（componentDidUpdate）包括挂载完成后（componentDidMount），窗口的标题都需要进行改变，这个时候我们可以使用Effect Hook 实现，而useEffect函数就是帮你完成了componentDidUpdate和componentDidMount生命周期函数。