Hooks基础-------useState基本用法+案例

useState

const [count, setCount] = useState(0);

在此之前请确保各位先知道react中state的含义和用法

对于useState最简单的理解就是：定义一个state取名为count，setCount是改变count的方法，useState(0)中保存的是count的初始值

相比较于class中的state写法简单了许多

// class 中的写法

// 定义一个count
this.state={
    count:0
}

// 获取count并展示 从state中取出
const {count}=this.state;
<span>{count}</span>
//或者
<span>{this.state.count}</span>

// 改变count的值
this.setState({count:count+1})



// useState写法

// 定义count
const [count ,setCount]=useState(0)

// 获取count并展示 直接获取
<span>{count}</span>

// 改变count的值
setCount(count+1)

1、基本使用（计算、弹窗、开关）

// 基本使用
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>you click {count} times</p>
      <button onClick={() => setCount(count + 1)}>click me to +</button>
      <button onClick={() => setCount(count - 1)}>click me to -</button>
    </div>
  );
}
// 打开弹窗
function Example2() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button onClick={() => setOpen(true)}>open modal</Button>
      <Modal
        visible={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      />
    </div>
  );
}
// 点击按钮改变颜色
function Example5() {
  const [on, setOn] = useState(false);
  return (
    <div>
      <button
        style={{ background: on ? "red" : "blue" }}
        onClick={() => setOn(!on)}
      >
        click me change color
      </button>
    </div>
  );
}
​

2、扩展（多个state套用、展示列表）

//每次加的数值都递增，第一次+1，第二次+2，...第n次+n
function Example3() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);
  const countMethod = (count, num) => {
    return count + num;
  };
  const numMethod = (num) => {
    setNum(num + 1);
    return num + 1;
  };
  return (
    <div>
      <p>The count is {count}</p>
      <button onClick={() => setCount(countMethod(count, numMethod(num)))}>
        click me
      </button>
    </div>
  );
}

// 改变字符串
function Example1() {
  const [str, setStr] = useState("b");
  const [count, setCount] = useState(0);

  const changeStr = () => {
    if (count === 0) {
      setStr("c");
    } else {
      setStr(str + "a");
    }
  };

  return (
    <div>
      <p>change str to {str}</p>
      <button
        onClick={() => {
          setCount(count + 1);
          changeStr();
        }}
      >
        {count === 0 ? "click me to change str" : "click me to add str"}
      </button>
    </div>
  );
}


// 展示列表的值
function Example4() {
  const [obj, setObj] = useState([]);
  const [count, setCount] = useState(0);

  const changeStr = () => {
    if (count === 0) {
      setObj([{ a: count + 1 }]);
    } else {
      setObj([...obj, { a: count + 1 }]);
    }
  };

  return (
    <div>
      <div>
        <p>列表展示:</p>
        <ul>
          {obj.map((item, index) => {
            return <li key={index}>{item.a}</li>;
          })}
        </ul>
        <button
          onClick={() => {
            setCount(count + 1);
            changeStr();
          }}
        >
          {count === 0 ? "click me to show list" : "click me to push list"}
        </button>
      </div>
    </div>
  );
}

// 展示对象的值
function Example5() {
  const [obj, setObj] = useState({});
  const [count, setCount] = useState(0);
  const list = { name: "tom", age: 20, grade: "grade 4" };

  const changeStr = () => {
    if (count === 0) {
      setObj(list);
    } else {
      setObj({ ...list, sex: "man" });
    }
  };

  return (
    <div>
      <p>对象展示:</p>
      <ul>
        {Object.keys(obj).map((item, index) => {
          return (
            <li key={index}>
              {item}:{obj[item]}
            </li>
          );
        })}
      </ul>
      <button
        onClick={() => {
          setCount(count + 1);
          changeStr();
        }}
      >
        {count === 0 ? "click me to show obj" : "click me to add obj"}
      </button>
    </div>
  );
}