react hook系列-setState

hook

是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

为啥用hook

解决组件复用状态问题,Hook可在无需修改组件结构的情况下复用状态逻辑
Hook 将组件中相互关联的部分拆分成更小的函数，颗粒度更小

useState 基本用法：

• useState 会返回一个数组
• 第1个元素是当前状态
• 第2个元素是设置状态的方法

注意

• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用

举例：

import React, { useState } from "react";

//函数组件是没有状态的
function Counter() {
   //1.setState特点1可以修改状态 
   //2.状态修改完成后组件会刷新
   let [state, setState] = useState({ number: 0, name: '数量' });
   return (
       <div>
           <p>{state.name}:{state.number}</p>
           <button onClick={() => setState({ number: state.number + 1 })}>+</button>
       </div>
   )
}

export default Counter;

注意：hooks中的setState 跟类组件中的this.setState 区别如下：

• 1 setState 不会合并state，上面的例子中使用setState只会修改number，state上原有的name属性会被磨掉，如要保留，需要全部修改
• <button onClick={() => setState({ number: state.number + 1 ,name:state.name})}>+</button>