功能组件中每个独立 state 的更改是否会触发 React 中组件的渲染？

Question

When we have multiple independent states in a component then if I change any one of them, will it trigger a re-render of the entire component?

Initialise const [email, setEmail] = useState('') const [val, setVal] = useState(true)

Update setVal(false)

Will this render the whole component again?

Answer 1

Yes the Component will be rendered again. Let me add: Although if you have two states changing (almost) simultanously the state update will be batched. In React 18 React batches state updates in React events handlers, promises, setTimeout and native event handlers resulting in only one rerender.