react-state hook

state hook是一个在函数组件中使用的函数(useState),用于在函数组件中使用状态

useState

• 函数有一个参数,这个参数表示该状态的默认值
• 函数返回值一定是一个包含两项的数组,第一项为该状态的值,第二项为改变状态的函数

import { useState } from 'react'
const [user, setUser] = useState('xixi')
1
2

一个函数组件可以有多个状态

注意的细节

1. useState最好写在函数的起始位置,便于阅读
2. useState严禁出现在代码块(判断,循环)中
3. useState返回的函数(数组第二项), 引用不变
4. 使用函数改变数据,若数据和之前的数据完全相等(Object.is判断), 不会导致重新渲染
5. 使用函数改变数据,传入的值不会和原来的值合并,而会直接替换
6. 强制刷新: 类组件(this.forceUpdate), 函数组件: 用一个没用的state,调用方法传入空对象来刷新
7. 如果某些状态之间没有必然的联系,应该分化为不同的状态,而不是合并成一个对象
8. 和类组件的状态一样,函数组件中改变状态可能是异步的(DOM事件中),多个状态变化会合并以提高效率,此时不能信任之前的状态,二十应该使用回调函数的方式改变状态.如果状态变化要使用到之前的状态,传递函数

8举例:

import React, {useState} from 'react'

export default function App() {
  const [n, setN] = useState(0)

  return (
    <div>
      <h1>{n}</h1>
      <button onClick={()=> {
        // 这样调用得到的最终结果为n=1
        // setN(n+1)
        // setN(n+1)

        // 传入回调函数进行使用之前的值, 得到n=2
        setN(prevN => prevN + 1)
        setN(prevN => prevN + 1)
        // 函数只会被重新调用一次
      }}>n+2</button>
    </div>
  )
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23