useState

基本
1
const [n, setN] = React.useState(0)
2
const [user, setUser] = React.useState({name: 'Jack', age: 18})
Copied!
如果state是一个对象，能否部分setState？ 
答案是不行，因为setState不会帮我们合并属性
那么useReducer会合并属性吗？也不会！ 因为React认为这应该是你自己要做的事情
示例
1
function App(){
2
    const [user, setUser] = React.useState({name: 'Jack', age: 18})
3
    const onClick = () =>{
4
        //setUser不可以局部更新，如果只改变其中一个，那么整个数据都会被覆盖
5
        // setUser({
6
        //  name: 'Frank'
7
        // })
8
        setUser({
9
            ...user, //拷贝之前的所有属性
10
            name: 'Frank' //这里的name覆盖之前的name
11
        })
12
    }
13
    return (
14
        <div className='App'>
15
            <h1>{user.name}</h1>
16
            <h2>{user.age}</h2>
17
            <button onClick={onClick}>Click</button>
18
        </div>
19
    )
20
}
Copied!
函数式更新
useState 和 setState 都可以传入函数参数。
1
// 初始化 state 为 initialState。这也叫作 惰性初始 state
2
const [state, setSate] = useState(() => initialState) 
3
// 取到最新的 state 并加一后进行 setState
4
setState(state => state + 1)
Copied!

🕹️框架 - 以前

React Hooks

下一个

useEffect

最近更新 1yr ago

复制链接

内容

基本

函数式更新