React新特性ReactHooks

useEffect做了什么
梳理一遍下面代码的逻辑：

function Test5() {
const [ count, setCount ] = useState(0);
// 类似于componentDidMount 和componentDidUpdate
useEffect(() => {
// 更新文档的标题
document.title = `你点击了${count}次`;
});
}

首先，我们声明了一个状态变量 count，将它的初始值设为0。然后我们告诉react，我们的这个组件有一个副作用。我们给 useEffecthook传了一个匿名函数，这个匿名函数就是我们的副作用。在这个例子里，我们的副作用是调用browser API来修改文档标题。当react要渲染我们的组件时，它会先记住我们用到的副作用。等react更新了DOM之后，它再依次执行我们定义的副作用函数。

这里要注意几点：

第一，react首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数。而之前我们要用两个声明周期函数来分别表示首次渲染（componentDidMount），和之后的更新导致的重新渲染（componentDidUpdate）。

第二，useEffect中定义的副作用函数的执行不会阻碍浏览器更新视图，也就是说这些函数是异步执行的，而之前的componentDidMount或componentDidUpdate中的代码则是同步执行的。这种安排对大多数副作用说都是合理的，但有的情况除外，比如我们有时候需要先根据DOM计算出某个元素的尺寸再重新渲染，这时候我们希望这次重新渲染是同步发生的，也就是说它会在浏览器真的去绘制这个页面前发生。

useEffect怎么解绑一些副作用
这种场景很常见，当我们在componentDidMount里添加了一个注册，我们得马上在componentWillUnmount中，也就是组件被注销之前清除掉我们添加的注册，否则内存泄漏的问题就出现了。

怎么清除呢？让我们传给useEffect的副作用函数返回一个新的函数即可。这个新的函数将会在组件下一次重新渲染之后执行。这种模式在一些pubsub模式的实现中很常见。看下面的例子：(这一块儿还不是很清楚借用别人的例子)

// useEffect怎么解绑一些副作用
function FriendStatus(props) {
const [ isOnline, setIsOnline ] = useState(null);
function handleStattusChange(status) {
setIsOnline(status.isOnline);
};
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
// 一定注意下这个顺序：告诉react在下次重新渲染组件之后，同时是下次调用ChatAPI.subscribeToFriendStatus之前执行cleanup
return function cleanup() {
ChatAPI.unsubscribeFriendStatus(props.friend.id, handleStattusChange);
}
})
if(isOnline=== null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}

这里有一个点需要重视！这种解绑的模式跟componentWillUnmount不一样。componentWillUnmount只会在组件被销毁前执行一次而已，而useEffect里的函数，每次组件渲染后都会执行一遍，包括副作用函数返回的这个清理函数也会重新执行一遍。
为什么要让副作用函数每次组件更新都执行一遍？

**加粗文字**
componentDidMount() {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
}
componentDidUpdate() {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
}

很清除，我们在componentDidMount注册，再在componentWillUnmount清除注册。但假如这时候 props.friend.id变了怎么办？我们不得不再添加一个componentDidUpdate来处理这种情况：

componentDidUpdate() {
// 先把上一个friend.id解绑
ChatAPI.unsubscribeFriendStatus(props.friend.id, handleStattusChange);
// 再重新注册新的friend.id
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
}

因此原有方法很繁琐，而我们但useEffect则没这个问题，因为它在每次组件更新后都会重新执行一遍。所以代码的执行顺序是这样的：

1. 页面首次渲染
2. 替friend.id=1的朋友注册
3. 突然friend.id变成了2
4. 页面重新渲染
5. 清除friend.id=1的绑定
6. 替friend.id=2的朋友注册
7. &＃8230;

怎么跳过一些不必要的副作用函数
按照上一节的思路，每次重新渲染都要执行一遍这些副作用函数，显然是不经济的。怎么跳过一些不必要的计算呢？我们只需要给useEffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（第一个参数）。
当我们第二个参数传一个空数组[]时，其实就相当于只在首次渲染的时候执行。也就是componentDidMount加componentWillUnmount的模式。不过这种用法可能带来bug，少用。

useEffect(() => {
document.title = `你点击了${count}次`;
}, [count]);//只有当count的值发生变化时，才重新执行'document.title'这一句;

除了上文重点介绍的useState和useEffect，react还给我们提供来很多有用的hooks

• useContext
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeMethods
• useMutationEffect
• useLayoutEffect

怎么写自定义的Effect Hooks

为什么要自己去写一个Effect Hooks? 这样我们才能把可以复用的逻辑抽离出来，变成一个个可以随意插拔的“插销”，哪个组件要用来，我就插进哪个组件里，so easy！看一个完整的例子，你就明白了。

比如我们可以把上面写的FriendStatus组件中判断朋友是否在线的功能抽出来，新建一个useFriendStatus的hook专门用来判断某个id是否在线。

function useFriendStatus(friendId) {
const [ isOnline, setIsOnline ] = useState(null);
function handleStattusChange(status) {
setIsOnline(status.isOnline);
};
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStattusChange);
return () => {
ChatAPI.unsubscribeFriendStatus(props.friend.id, handleStattusChange);
}
});
return isOnline;
}

这时候FriendStatus组件就可以简写为：

function FriendStatus(props) {
const isOnline= useFriendStatus(props.friend.id);
if(isOnline=== null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}

简直Perfect！假如这个时候我们又有一个朋友列表也需要显示是否在线的信息：

function FriendListItem(props) {
const isOnline= useFriendStatus(props.friend.id);
return (


简直Fabulous!