react hooks 之 useState

• useState 注意事项

1. 不可局部更新，需要 ... 操作符

const App = props => {
  const [user,setUser] = useState({name:'Jack',age:18})
  const onClick = ()=>{
    setUser({
      ...user,  //扩展运算符
      name:'Frank'
    })
  }
  return (
      <div>
        <h1>{user.name}</h1>
        <h1>{user.age}</h1>
        <button onClick={onClick}>set</button>
      </div>
  )
}

2. setState(obj) 必须是一个新对象，通过改动obj.xxx是不行的，react只有发现该对象地址变了，才会重新render
3. useState接受函数，该函数返回初始state，且只会执行一次，因为js引擎看到对象会立即解析，如果对象里有计算，例如const [n,userN] = useState({n:9+9})，则每次render都会计算一下；而函数只会执行这个函数，至于返回的内容是啥，不会关心

const [user,setUser] = useState(()=>({name:'Jack',age:9+9}))

4. setState接受函数，优先使用这种形式

setN((i)=>{i+1})