在 React 钩子中切换 object state 中的值的正确方法是什么？

Question

Here is a simple code sample to toggle a button

import React, { useState } from "react";
import "./styles.css";

const initialState = {
  isOpen: true
};

export default function App() {
  const [state, _setState] = useState(initialState);
  const setState = newState =>
    _setState(prevState => ({ ...prevState, ...newState }));

  const toggleButton = () => {
    setState({ isOpen: !state.isOpen });
  };

  return (
    <div className="App">
      <button onClick={toggleButton}>Show</button>
      {state.isOpen && <h1>Hello World</h1>}
    </div>
  );
}

Questions

1. Is the above code is the right way to toggle a value inside an object?
2. Is there any advantage if I change the toggleButton function to code below? By not accessing state object reference when setState executes.

const toggleButton = () => {
    const { isOpen } = state;
    setState({ isOpen: !isOpen });
};

Answer 1

Questions

1. Is the above code is the right way to toggle a value inside an object?

This is maybe debatable, but the correct way to toggle any react state is to use a functional state update. This is because multiple state updates can be enqueued and batch processed. You want them to process in the order in which they are queued and end with the correct state.

const toggleButton = () => {
  setState(prevState => ({ isOpen: !prevState.isOpen }));
};

The following is a demo I use to demonstrate why functional updates work.

2. Is there any advantage if I change the toggleButton function to code below? By not accessing state object reference when setState executes.

 const toggleButton = () => { const { isOpen } = state; setState({ isOpen: ;isOpen }); };

No, not really, it's still directly accessing the current state object that is enclosed in the callback function scope.

Answer 2

Since React may batch multiple setState() calls into a single update for performance, it is better to get the previous state than accessing it directly

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

This would be the correct form of doing it

setState(prevState => ({
  isOpen: !prevState.isOpen
}));

Answer 3

with Hooks you could do this:

 import React, { useState } from "react"; import "./styles.css"; export default function App() { const [isOpen, useIsOpen] = useState(false); const toggleButton = () => { useIsOpen((prevState) => { return {isOpen: .prevState;isOpen}; }) } return ( <div className="App"> <button onClick={toggleButton}>Show</button> </div> ); }

or alternatively you could:

 export default function App() { const [isOpen, useIsOpen] = useState(false); const toggleButton = () => useIsOpen(;isOpen); return ( <div className="App"> <button onClick={toggleButton}>Show</button> </div> ); }