当useEffect遇到函数依赖

下面的代码实现了一个简易的登录功能（为了减少代码量，去掉了密码）。

import React, { useState } from 'react';

const api = {
  login(username) {
    console.log('username', username);
  },
};

function Login() {
  const [username, setUsername] = useState('');

  const onSubmit = () => {
    if (!username) {
      alert('Please input username');
      return;
    }

    api.login(username,);
  };

  return (
    <div>
      <h1>Login</h1>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button onClick={onSubmit}>submit</button>
    </div>
  );
}

export default Login;

现在我们要增加一个需求：
监听页面上的回车事件，然后发起登录，代码如下：

useEffect(() => {
  const onKeyup = (e) => {
    if (e.key === 'Enter') {
      onSubmit();
    }
  }
  window.addEventListener('keyup', onKeyup);
}, []);

代码看起来没问题，但运行一下，我们就会发现并没有按照预期发展，在输入框已经输入用户名的前提下，页面上还是会一直提示让我们输入用户名。

什么原因？
问题出在onKeyup内部的onSubmit，由于onSubmit所在的useEffect没有依赖，所以只会在初始化执行一次，onSubmit内部的username也就会一直处于初次渲染的状态，值为空字符。

如何解决？
将onSubmit加入useEffect的依赖中。

useEffect(() => {
  const onKeyup = (e) => {
    if (e.key === 'Enter') {
      onSubmit();
    }
  }
  window.addEventListener('keyup', onKeyup);
}, [onSubmit]);

依赖加好了，但是看着上面的代码，我们又会发现一个问题，由于react会在每次渲染的时候重新创建组件内非hooks的值，这就导致了每次渲染的onSubmit的值发生改变，进而导致监听onSubmit的useEffect重复执行。

如何解决？
给onSubmit加上useCallback，将username加入到useCallback的依赖中。

const onSubmit = useCallback(() => {
  if (!username) {
    alert('Please input username');
    return;
  }

  login(username);
}, [username]);

这样，在每次组件渲染时，只有当username的值发生改变，onSubmit的值才会跟着发生改变，从而解决了useEffect反复执行的问题。

我们再运行一下，又有新问题了！
当我们输入的username长度超过1时，会发现login接口被调用了多次。

什么原因？
问题来到了useCallbak，每次username发生变化的时候，onSubmit都会被更新，从而导致useEffect为每次username的改变都执行了一次，也就多次绑定了onKeyup了，结果是多次调用onSubmit。

怎么解决？
利用useEffect的cleanup。
在cleanup里面解绑onKeyup。这样就不会存在多次绑定的onKeyup被执行的情况了，只会存在一个最新的onKeyup绑定。

useEffect(() => {
  const onKeyup = (e) => {
    if (e.key === 'Enter') {
      onSubmit();
    }
  }
  window.addEventListener('keyup', onKeyup);

  return () => {
    window.removeEventListener('keyup', onKeyup);
  }
}, [onSubmit]);

至此，代码工作的完好。

完整的代码如下：

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

const login = (username) => {
  console.log('username', username);
};

function Login() {
  const [username, setUsername] = useState('');

  const onSubmit = useCallback(() => {
    if (!username) {
      alert('Please input username');
      return;
    }

    login(username);
  }, [username]);

  useEffect(() => {
    const onKeyup = (e) => {
      if (e.key === 'Enter') {
        onSubmit();
      }
    }
    window.addEventListener('keyup', onKeyup);

    return () => {
      window.removeEventListener('keyup', onKeyup);
    }
  }, [onSubmit]);

  return (
    <div>
      <h1>Login</h1>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button onClick={onSubmit}>submit</button>
    </div>
  );
}

export default Login;