1、介绍

useEffect是hooks中又一个重要的函数，Effect hooks容许你在组件外部中执行副作用操作。

副作用包含：

• 数据获取
• 设置订阅
• 手动更改DOM等等

useEffect就是为了解决这些副作用而被发明进去的函数，它相当于class中componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

2、用法

useEffect(()=>{},[])

useEffect 有两个参数。第一个参数是Effect，第二个参数是依赖值列表。

组件的每一次渲染都会产生一个新的Effect，这个Effect每一次渲染拿到的prop和state是不同的。

第二次参数是依赖值列表。

• 当不传递的时候，useEffect会在每次渲染实现后执行
• 当传递一个[]的时候，那么useEffect只会在挂载的时候执行(如果useEffect返回了一个函数，那么这个函数会在组件卸载的时候执行)
• 当传递一个值的时候，如[a]，那么useEffect就会依据这个值是否发生变化，来判断是否去执行useEffect函数
• 当传递多个值的时候，如[a,b,c…]，那么他就是会比拟每一个值，有一个不雷同就回去执行

3、两种副作用

在React中有两种常见的副作用操作：须要被革除和不须要被革除的。

无需革除的副作用：

有时候，咱们只想在React和更新DOM操作之后运行一些额定的代码。比如说，发送网络申请、手动变更DOM、记录日志，这些都是常见的无需革除副作用的操作。因为咱们在执行完这些操作之后，就能够疏忽他们了。

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

组件加载和更新时的时候，都会执行设置了一次document.title。

须要革除的副作用

订阅内部的数据源，这种状况下，革除副作用是非常重要的，能够避免内存泄露。

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