我在函数组件中使用useState(),第一个渲染调用了两次。是正确还是错误?如果正确,为什么会渲染两次?setCount也两次渲染该组件。
function Example() { const [count, setCount] = useState(0); console.log("render"); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ReactDOM.render(<Example />, document.getElementById('uu5'));
谢谢
据react docs称,如果您使用StrictMode,这是一项有意功能,可帮助您检测意外的副作用
严格模式无法自动为您检测副作用,但可以通过使其更具确定性来帮助您发现它们。这是通过有意地双重调用以下功能来完成的: 类组件的构造函数,呈现器和shouldComponentUpdate方法 类组件的静态getDerivedStateFromProps方法 功能组件主体 状态更新器功能(setState的第一个参数) 传递给useState,useMemo或useReducer的函数 注意:这仅适用于开发模式。在生产模式下,不会重复调用生命周期。
严格模式无法自动为您检测副作用,但可以通过使其更具确定性来帮助您发现它们。这是通过有意地双重调用以下功能来完成的:
注意:这仅适用于开发模式。在生产模式下,不会重复调用生命周期。
https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side- effects