HOOKS

Hook 是什么？

Hook是一些特殊的函数，它们可以让你在函数组件里使用 state 及生命周期等特性

引入 Hook 的动机是？

class组件存在以下几个令人困扰的问题：

1.状态逻辑在组件之间复用很难
2.复杂组件变得难以理解。组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。

如何使用 Hook？

Hook之useState

• useState 的参数：useState( ) 方法里面唯一的参数就是 state 的初始值，这个初始值可以是数字、字符串、对象等
• useState 的返回值：useState( ) 返回两个值，第一个值是当前的 state，第二个值是更新 state 的函数

因此开发中通过解构赋值声明 state 变量：

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

注： 可以使用多个 state 变量。

	function ExampleWithManyStates() {
	  // 声明多个 state 变量
	  const [age, setAge] = useState(42);
	  const [fruit, setFruit] = useState('banana');
	  const [todos, setTodos] = useState([{ text: '学习 Hook' }]);

Hook之useEffect

介绍 useEffect 之前，首先介绍副作用。
数据获取、订阅或者手动修改DOM这些操作被称为“副作用”。
操作副作用的方法被称为副作用方法。
副作用可分为需要清除的和不需要清除的两种类型。

useEffect Hook 可以看做 componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合，即组件在渲染后、更新后、卸载后都会调用 effect。

• useEffect做了什么：react 在第一次渲染和每次更新DOM之后会调用 useEffect 方法

• useEffect 可以返回一个函数：这是 useEffect可选的清除机制。每个 effect 都可以返回一个清除函数。React 会在组件卸载的时候执行清除操作。