1.Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to preven...

1.Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop。
原因是在为事件传递函数时直接写了setState导致报错。原因是调用setCount，React会重新调用render方法来重新渲染UI。再次渲染函数组件App时导致陷入死循环。

解决办法：如果放在return体内就不会出现这种情况了

export default function App() {
    const [count, setCount] = useState(0)
    return (
        <div>
            <h2>当前数值:{count}</h2>
            //<button onClick={setCount(count+1)}>+1</button>
            //<button onClick={setCount(count-1)}>-1</button>
            <button onClick={()=>{setCount(count+1)}}>+1</button>
            <button onClick={()=>{setCount(count-1)}}>-1</button>
        </div>
    )
}

至于为什么后者在点击之后才会执行原因如下

onClick={这里是一个匿名函数或者函数引用}因此：
onClick={this.handleClick(i)}这里包裹的函数其实是一个自执行函数，当解析器执行到这里的时候，handleClick函数会立即执行，并不需要点击才能触发。
onClick={() => this.handleClick(i)}，onClick={this.handleClick}这两个函数都不是自执行函数，所以会在点击的时候才触发。这两者的区别又在于，点击时，前者会执行一个匿名函数（箭头函数），在这个函数里调用传参函数（this.handleClick(i)），后者直接调用了this.handleClick，因此this.handleClick(i),this.handleClick都是函数引用。