useState的基本使用

import React from 'react'
import { useState } from 'react';

const FnCom = (props) => {
  let [counter,setCounter]=useState(9)
  return(
    <div>
      <div>FnCom-{counter}</div>
      <button onClick={()=>{
        setCounter(counter+1)
      }}>+</button>
      <button onClick={()=>{
        setCounter(counter-1)
      }}>-</button>
    </div>
   )
  }

export default FnCom

• useState来自react，需要从react中引入，它是一个hooks；
  • 元素一：当前状态的值（第一调用为初始化的值）
  • 元素二：设置状态值的函数；
  • 参数：初始化值，如果不设置默认为undefined
  • 返回值：数组，包括两个元素（元素一，元素二）
• 点击button按钮后，会完成两件事；
  • 调用setCount，设置一个新的值
  • 组件重新渲染，并且根据新的值返回DOM结构；
• React在重新渲染时，会保留这个state状态，并不会每次都使用初始化的值；

const [counter,setCounter]=useState(6)
// 等价于
const counter=useState(6)[0]
const setCounter=useState(6)[1]

Hooks就是JavaScript函数，这个函数可以帮助你钩入（hook into）React State以及生命周期等特性；

但是使用它们会有两个额外的规则；

• 只能在函数最外层调用Hooks，不要在循环，条件判断或者子函数中调用；
• 只能在React的函数式组件中调用Hooks，不要在其他JavaScript函数中调用(还有一个地方可以调用Hooks–自定义的Hook中)；

State Hook的API就是useState

• useState会帮助我们定义一个state变量，useState是一种新方法，它与class组件里面的this.state提供的功能完全相同。一般来说，在函数退出后变量就会消失，而state中的变量会被React保留；
• useState接受唯一一个参数，在第一次组件调用时使用来作为初始化的值（如果传递参数，那么初始化的值为undefined）
• useState的返回值是一个数组，我们可以通过数组的解构，来完成赋值会非常方便；

FQA：为什么叫useState而不叫createState？

• create可能不是很准确，因为state只在组件首次渲染的时候创建。
• 在下一次重新渲染时，useState返回给我们当前的state
• 如果每次都创建新的变量，他就不是state了；
• 这也是Hook的名字总是以use开头的一个原因；

当然，我们也可以在一个组件中定义多个变量和复杂变量(数组，对象)

import React from 'react'
import { useState } from 'react';

const FnCom = (props) => {
  const [age, setAge] = useState(0);
  const [names, setNames] = useState(["张三", "李四"]);
  const [info, setInfo] = useState({name: "王五", age: 18});
  return(
    <div>
      <h2>当前年龄：{age}</h2>
      <button onClick={()=>{
        setAge(age+1)
      }}>年龄+1</button>
      <h2>朋友列表</h2>
      <ul>
        {
          names.map((item,index)=>{
            return <li key={index}>{item}</li>
          })
        }
      </ul>
      <button onClick={()=>{
        setNames([...names,"赵六"+new Date().getTime()])
      }}>添加好友有效</button>
      <button onClick={()=>{
        names.push("老八")
        console.log(names);
        setNames(names)
      }}>添加好友无效</button>
      <h2>我的信息</h2>
    <div>我的名字：{info.name}</div>
    <button onClick={()=>{
      setInfo({...info,name:"李雷"})
    }}>修改名字</button>
    </div>
   )
  }

export default FnCom