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>
  );
}

你可能感兴趣的:(react.js,学习,javascript)