react hooks 之 useState

useState

• useState 出现，使得 react 无状态组件能够像有状态组件一样，可以拥有自己 state，useState 的参数可以是一个具体的值，也可以是一个函数用于判断复杂的逻辑，函数返回作为初始值。usestate 返回一个数组，数组第一项用于读取此时的 state 值 ，第二项为派发数据更新，组件渲染的函数，函数的参数即是需要更新的值。

import React, { useState } from "react";
import './App.css';

function App() {
  /* num 为此时state读取值 ，setNum 为派发更新的函数 */
  let [num, setNum] = useState(0);/* 0为初始值 */
  const add = () =>{
    setNum(num+1);
  }

  /*  useState 第一个参数如果是函数 */
  //  let defaultNum = 99;
  //  let [num, setNum] = useState(()=>{
  //    return defaultNum ? 1 : 2;
  //  })

  return (
      <div className="App" onClick={add}>
        <h1>{num}</h1>
    </div>
  );
}

export default App;