react hooks学习笔记（二）

Hook规则

Hook的本质其实就是javascript函数，但是在使用它们的时候需要遵循两条规则，我们提供了一个linter插件来强制执行这些规则。

规则一：只在最顶层使用Hook

遵循这条规则，就可以确保Hook在每一次的渲染中都按照同样的顺序被调用。可以让React在多次的useEffect和useState种调用之间保持hook状态的正确。

规则二：只在React函数种调用Hook

不要在普通的JavaScript函数中调用Hook,可以在React的函数组件中调用hook，在自定义hook中可以调用其他hook。

自定义Hook

创建自定义Hook

通过自定义的Hook，可以将组件逻辑提取到可重用的函数中。与React组件不同的是，自定义的Hook不需要由特殊的标识，我们可以自由的决定它的参数以及返回的类型。
自定义Hook其实是一个函数，其名称必须以‘use’开头，函数内部可以调用其他的Hook。

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  return isOnline;
}

使用自定义Hook

1. 自定义Hook必须以use开头
2. 两个组件中使用相同的Hook不会共享state，相当于所有的state和副作用都是完全隔离的。
3. 每次调用 Hook，它都会获取独立的 state。由于我们直接调用了 useFriendStatus，从 React 的角度来看，我们的组件只是调用了 useState 和 useEffect。 正如我们在之前章节中了解到的一样，我们可以在一个组件中多次调用 useState 和 useEffect，它们是完全独立的。

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

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}