React(精读官方文档) - Hook-使用 State Hook（useEffect、useLayoutEffect）

Effect Hook

• 副作用： 数组获取、设置订阅、手动修改Reac组件中的DOM都属于副作用
• 可以把 useEffect 看做 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个函数的结合
• 简单示例：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。
**为什么在组件内部调用 useEffect？**为了直接访问 state变量 或其他 props，而不要调用其他API
useEffect 会在每次渲染后都执行吗？ 默认情况下是的

• 具体示例

//一、
import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

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

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

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

• useEffect 第二个参数数组是可选的；
  • 没有数组：每次渲染都会执行
  • 空数组：只有挂载和销毁的时候执行
  • 数组有值：值（依赖）变化的时候执行；
• useEffect return的函数 相当于componentWillUnMount，销毁的时候执行
• 执行时机：传给 useEffect 的函数会在浏览器完成布局与绘制之后，在一个延迟事件中被调用。异步

useLayoutEffect

• 与useEffect基本一致；但执行时机不同
• 执行时机：它会在所有DOM变更之后 同步 调用effect。可以使用它来读取DOM布局并同步触发重新渲染。 在浏览器执行绘制之前，useLayoutEffect内部的更新计划将会被同步刷新；
• 比如要更改关于布局或者样式的情况下，使用useEffect,由于其执行机制是异步的、可能会造成一闪而过的效果；换成使用useLayoutEffect 就不会有这样的问题