useState基础

概念

useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果

本质

和普通js变量不同，状态变量一旦发生变化，组件的视图UI也会跟着变化（数据驱动视图）

//项目根组件
//App -> index.js -> public/index.html(root)


//useState实现计数器
import React, { useState } from'react'


function App() {
  const [count,setCount] = useState(0)
  function addCount(){
    setCount(count  + 1)
  }
  return (
    <div className="App">
      <h1>Hello World</h1>
      <button onClick={addCount}>{'count-' + count}</button>
    </div>
  );
}



export default App;

1. useState是一个函数，返回值是一个数组
2. 数组中第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3. useState的参数将作为count的初始值

状态修改的规则

状态不可变，在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

修改对象状态，对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改