Hooks

useState

useEffect

useEffect可以直接读取组件内的state，并且默认情况下每次渲染的时候都会执行。（因为也可以跳过它）

清除effect(可选)

清除effect不需要单独写一个清除的程序，userEffect设计了一种方式：如果useEffect返回一个函数， react将会在该函数内执行清除工作

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() { // 也可以返回一个箭头函数或者给起一个别的名字
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

跳过 Effect 进行性能优化

effect 在每次渲染后都会执行清理或者执行 effect，这 可能会导致性能问题。在useEffect内置的API中，如果state值在两次渲染中没有任何变化，就可以设置useEffect的第二个参数来判断需不需要调用useEffect，以此来达到性能优化的目的。

// 官方案例
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

Hook的两条规则

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。