react-hook

1. 命名方式：总是以use开头

2. 类型：

1> State hook

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

声明一个count的state变量，setCount是更新count的函数，useState(0) 的0是count的初始值 如果有多个变量，就声明多个useState

2> Effect hook

import React, { useEffect } from 'react';
useEffect(() => {
	document.title = '1111'
})

useEffect类似于componentDidMount，componentDidUpdate，componentWillUnmount

常见的useEffect：

<1> 不需要清除的：比如发送网络请求，手动变更dom，记录日志

useEffect(() => {
	document.title='123456'
})

每次渲染之后和每次更新之后都会执行

通过hook，react会保存传递的函数，并且在dom更新之后调用

<2> 需要清除的：比如订阅外部数据资源，防止引起数据泄露

useEffect(() => {
	chat.subscribeFunc();
	return function clean() {
  		chat.unsubscribFunc();
        }

或者

	return () => {
		chat.unsubscribFunc()
	}
})

通过返回一个函数来实现，可选的清除机制

React会在组件卸载的时候执行清除工作

多个effect的时候写多个useEffect

可以避免因为componentDidUpdate没有写而导致的一些bug

性能优化：如果两次重渲染，特定值没有发生变化，可以通知react跳过effect的调用

仅在count 更新时更新，数组中如果有多个元素，只要有一个元素发生变化，react就会执行effect

useEffect(() => {
	document.title = `you click ${count}`;
}, [count]) 

相当于：

componentDidUpdate(prevProps, prevState) {
	if (prevState.count !== this.state.count) {
		document.title = `You clicked ${this.state.count} times`;
	}
}

3. 规则

1> 只能在最顶层使用hook

不要在循环，条件，或者嵌套函数中使用hook，确保hook能在每一次的渲染中都能按照同样的顺序被调用，使得多个useState和useEffect保持正确的hook状态

2> 只能在react函数中调用hook

不要在普通的javascript函数中调用hook