Detailed analysis of useState
In the last article, I used useState to let you experience the hooks function
import {
memo, useState } from "react"
const Counter2 = memo(() => {
const [counter, setCounter] = useState(100)
return (
<div>
<h2>当前计数: {
counter}</h2>
<button onClick={
() => setCounter(counter - 1)}>-1</button>
<button onClick={
() => setCounter(counter + 1)}>+1</button>
</div>
)
})
export default Counter2
Then let's first study what the above core piece of code means
useState comes from react and needs to be imported from react. It is a hook function, and it is officially called State Hook, which has exactly the same function as this.state in the class component;
Generally speaking, variables will "disappear" after the function exits, while variables in state will be retained by React.
useState has only one parameter : receive an initialization state value ( set the initial value ), and
第一次组件被调用时use it as the initialization value ( if not set, the default is undefined );The return value of useState : return an array, the array contains two elements;
- Element 1: the value of the current state (the first call is the initialization value);
- Element 2: It is a function to set the state value change;
- However, it is always inconvenient if we always use the index to get these two elements, so we usually destructure the array in development ( of course, the name to be chosen is custom )
- For example the above code:
const [counter, setCounter] = useState(100)In the above code, after clicking the button button, two things will be done:
Call element two: setCounter to set a new value;
The component re-renders and returns the DOM structure according to the new value;
I believe that through the above simple case, you will already like the use of Hook .
Hook is a JavaScript function, this function can help you
钩入(hook into) React State and life cycle and other features;
But using them has two additional rules :
Hooks can only be called in function components
顶层. It cannot be called in loop statements, conditional judgment statements or subfunctions.Hooks can only be called in React's
函数组件and自定义hookin. Cannot be called from other JavaScript functions.
Tip
Hook refers to a function similar to useState, such
Hooks is a general term for this type of function
You may have doubts: why is it called useState instead of createState?
"create" might not be very accurate, since state
首次渲染is only created when the component is created.On the next re-render, it is no longer created, and useState will return our current saved state ( if we create a new variable every time, it will not be "state" ).
This is one of the reasons why the name of Hook always starts with use, because you are always using instead of creating.
Of course, we can also define multiple variables and complex variables (arrays, objects) in a component
import React, {
memo, useState } from 'react'
const App = memo(() => {
// 简单数据
const [counter, setCounter] = useState(10)
const [message, setMessage] = useState("Hello World")
// 复杂数据
const [banners, setBanners] = useState(["aaa", "bbb", "ccc"])
const [infos, setInfos] = useState({
name: "chenyq",
age: 18,
height: 1.88
})
function changeNumber() {
setCounter(counter + 1)
}
return (
<div>
<h2>{
counter}</h2>
<button onClick={
changeNumber}>+1</button>
<h2>{
message}</h2>
<h2>{
banners}</h2>
<h2>{
infos.name}-{
infos.age}-{
infos.height}</h2>
</div>
)
})
export default App