effect Hook

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

当我们想要在每次render之后执行时在class组件中需要在commponentDidMount和componentDidUpdate中都调用事件。
而在hook中就只需要在useEffect中调用就可以：

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

useEffectHooks视作componentDidMount、componentDidUpdate和componentWillUnmount的结合。useEffect会在每次render之后调用。
当不需要清理时可以直接：

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

当需要清理时（如定时器）需要返回一个函数：

useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

注意：
useEffect的第二个参数必须传空数组，这样它就等价于只在componentDidMount的时候执行。如果不传第二个参数的话，它就等价于componentDidMount和componentDidUpdate

import React, { useEffect } from 'react'
​
export function BusinessComponent() {
  const initData = async () => {
    // 发起请求并执行初始化操作
  }
  // 执行初始化操作，需要注意的是，如果你只是想在渲染的时候初始化一次数据，那么第二个参数必须传空数组。
  useEffect(() => {
    initData();
  }, []);
​
  return (<div></div>);
} 

但是有时候我们想在用户输入新的id时再进行查询和处理操作我们可以在useEffect中传入第二个参数，那么就只有在第二个参数发生变化（首次渲染）的时候才会触法effects.

import React, { useEffect } from 'react'
​
export function QRCode(url, userId) {
  // 根据userId查询扫描状态
  const pollingQueryingStatus = async () => {
  }
​
  const stopPollingQueryStatus = async() => {
  }
  // 我们只是将useEffect的第二个参数加了个userId
  useEffect(() => {
    pollingQueryingStatus();
​
    return stopPollingQueryStatus;
  }, [userId]);
​
  // 根据url生成二维码
  return (<div></div>)
}