Hooks

精读资料

1. 精读《React Hooks》

   useEffect

   以往再react Class组件中我们才可以处理生命周期函数，有了hook useEffect后一切都变了，useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

• 运行机制

组件初始化与每次更新时都会调用effect。它会在调用一个新的 effect 之前对前一个 effect 进行清理。

• useEffect清除机制

若effect返回一个函数（其实也可以返回一个箭头函数或者给起一个别的名字。），React 会在组件卸载的时候执行清除操作。

• 跳过effect实现性能优化

hooks之前我们可以在componnetDidUpdate中比较state与prevState来跳过update的执行。

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

如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可。

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

如上，我们传入count，react会对上一次渲染的count和本次的count进行比较，如果没有变化则不执行effect。这就实现了性能的优化。如果数组中有多个元素，即使只有一个元素发生变化，React 也会执行 effect。
如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。
**

• useEffect关注点分离

一个组件中可以使用多个useEffect，将不相关逻辑分离到不同的 effect 中。React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}