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