# useState

## 基本

```javascript
const [n, setN] = React.useState(0)
const [user, setUser] = React.useState({name: 'Jack', age: 18})
```

{% hint style="info" %}
如果state是一个对象，能否部分setState？ 

答案是不行，因为setState不会帮我们合并属性

那么useReducer会合并属性吗？也不会！ 因为React认为这应该是你自己要做的事情
{% endhint %}

示例

```javascript
function App(){
    const [user, setUser] = React.useState({name: 'Jack', age: 18})
    const onClick = () =>{
        //setUser不可以局部更新，如果只改变其中一个，那么整个数据都会被覆盖
        // setUser({
        //  name: 'Frank'
        // })
        setUser({
            ...user, //拷贝之前的所有属性
            name: 'Frank' //这里的name覆盖之前的name
        })
    }
    return (
        <div className='App'>
            <h1>{user.name}</h1>
            <h2>{user.age}</h2>
            <button onClick={onClick}>Click</button>
        </div>
    )
}
```

## 函数式更新

useState 和 setState 都可以传入函数参数。

```javascript
// 初始化 state 为 initialState。这也叫作 惰性初始 state
const [state, setSate] = useState(() => initialState) 
// 取到最新的 state 并加一后进行 setState
setState(state => state + 1)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mm.ricky.moe/framework/react-hooks/usestate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.