React Hooks 中 useState 的介绍

React Hooks简介

• React Hooks就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state，有Hooks可以不再使用类的形式定义组件了

---

useState 的介绍

• useState是react自带的一个hook函数，它的作用是用来声明状态变量。

  // useState 接收的参数是状态的初始值
  // 它返回一个数组：这个数组的第0位是当前的状态值，第1位是可以改变状态值的方法函数
  const [ count , setCount ] = useState(0);
  

• 使用State的值：

  <p>You clicked {count} times</p>
  

• 更改State中的值

  <button onClick={()=>{setCount(count+1)}}>click me</button>
  

多状态声明的注意事项

• React是根据useState出现的顺序来确定多个useState找到对应的state
• 所以useState不能在if...else...这样的条件语句中进行使用（例如下面这样就是错误的）

  import React, { useState } from 'react';
  
  let showSex = true
  function Example2(){
      const [ age , setAge ] = useState(18)
      if(showSex){
          const [ sex , setSex ] = useState('男')
          showSex=false
      }
  
      const [ work , setWork ] = useState('前端程序员')
      return (
          <div>
              <p>JSPang 今年:{age}岁</p>
              <p>性别:{sex}</p>
              <p>工作是:{work}</p>
  
          </div>
      )
  }
  export default Example2;