useState

使用状态 :

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

useState接受函数:

//该函数返回初始state,且只执行一次
const [state,setState] = useState(()=>{
  return initialState
})

setState 接受函数: setN(i=>i+1)，推荐使用这种形式

注意事项1 ：不可局部更新,如果state是一个对象，setState不会帮我们合并属性，要使用es6的扩展操作符...或Object.assign()将原来对象的属性拷贝过来。具体代码如下:

import React,{useState} from 'react';

function App(){
    const [user,setUser] = useState({name:"Ross",age:18})
    const onClick = () => {
        setUser({
            ...user, 
            name: 'jack'
        })
    }
    return (
        <div className="App">
           <h1>{user.name}</h1>
           <h2>{user.age}</h2>
           <button onClick={onClick}>Click</button>
        </div>
    )
}
export default App

如果少了...user这行代码，会发现name从jack变成了ross，age从页面上消失了,原因是因为age变成了undefined。

**注意事项2 :地址要变，setState(obj)如果object地址不变，那么React就认为数据没有变化，具体代码如下:

import React,{useState} from 'react';

function App(){
    const [user,setUser] = useState({name:"Ross",age:18})
    const onClick = () => {
       user.name = "jack";
       setUser(user)
    }
    return (
        <div className="App">
           <h1>{user.name}</h1>
           <h2>{user.age}</h2>
           <button onClick={onClick}>Click</button>
        </div>
    )
}
export default App

你会发现，name值依旧是Ross，原因:注意事项2

续： setState 接受函数: setN(i=>i+1)，为什么推荐使用这种形式，可以查看以下代码:

import React, {useState} from "react";
import ReactDOM from "react-dom";

function App() {
  const [n, setN] = useState(0)
  const onClick = ()=>{
    setN(n+1)
    setN(n+1) // 你会发现 n 不能加 2
    // setN(i=>i+1)
    // setN(i=>i+1)
  }
  return (
    <div className="App">
      <h1>n: {n}</h1>
       
      <button onClick={onClick}>+2</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Hooks中的useState

useState