原因1：修改状态函数写在副作用函数里面，修改状态函数会使整个函数式组件重新执行，相当于执行了以下代码

export default function App () {
  const [num, setNum] = useState(5)
  console.log(setNum)
  document.title = '标题' + num
  useEffect(() => {
    // setNum(num + 5)
    document.title = '标题' + num
  })
  const hClick = () => {
    setNum(num + 5)
    // useEffect(() => {
    //   // setNum(num + 5)
    //   document.title = '标题' + num
    // })
    // 错误×
    // Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    // 1. You might have mismatching versions of React and the renderer (such as React DOM)
    // 2. You might be breaking the Rules of Hooks
    // 3. You might have more than one copy of React in the same app
    // See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
  }
  return (<div>
      num:{num}
      <button type="button" onClick={() => {
        // eslint-disable-next-line no-unused-expressions
        hClick()
      }}>每次加5</button>
    </div>)
}

错误代码如下：

  useEffect(() => {
    // setNum(num + 5)
    document.title = '标题' + num
  })