如何在 React 中使用 useState 挂钩更新 state

Question

I understand how updating state using the useState hook in React works as follows.

1. Compare the state value to be changed with the current state value.
2. If the two state values are the same, do not re-render without changing the state value.
3. If the two state values are different, change the state value and perform re-rendering.

https://codesandbox.io/s/nostalgic-fog-riyg4

But in this example, it seems to work differently.

• First rendering execute when App component is mounted.
• State value changes when button is clicked and a second rendering is executed. (Because the current state value and the state value to be changed are different.)
• When you click the button again, the state value does not change but rendering occurs. -> Why is this happening? I didn't expect rendering because the two state values were the same.
• When you click the button a third time, the state value does not change again, but this time the component does not re-render. This is the behavior I expected to happen after the second click.

Answer 1

A React component will update every time its state or props change. These two artifacts of a react component, can't be changed in render function or any functions called by render .

Also, you have to remember that you can't ever change the props of a component within the component itself. the props are passed from parent and cant be changed by the child. But for the state , you can call setState in onClick functions or any other function outside the render , and any time you call the setState , your component will update its view.

After getting familiar with ReactJs, I suggest you use Redux for any kind of data manipulation and functionality. Here is a link to react-redux website: https://react-redux.js.org/

I hope this answers your question

Answer 2

for updating the general usestate function: const [initialState, setState] = useState(initialState)

initialState is the initial state of the component and

setState is the function that updates the initialState

for more information about useState Hooks in react: Link: https://blog.bitsrc.io/understanding-react-hooks-usestate-6627120614ab