useState(状态变量控制渲染结果)

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

本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化(数据驱动视图)

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

Rel

//useState实现一个计数器按钮
import { useState } from "react";
function App() {
//1.调用useState添加一个状态变量
//count 状态变量
//setcount 修改状态变量的方法
const [count,setCount] = useState(0);
 //2.点击事件回调
 const handleclick = () => {
  //3.修改状态变量
  setCount(count+1)
 }
  return (
    <div className="App">
      <View1/>
      <View2></View2>
      <button>{count}</button>
    </div>
    
  );
}

useState修改状态的规则

状态不可变

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

直接修改不能引发视图更新，要调用相匹配的函数才能引发视图更新

修改对象状态

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

JavaScript

const [name,setName] = useState('张三')

const setfax = ()=>
{
  setName('李四')
}

<button onClick={setfax}>修改{name}</button>

浏览量 9

useState修改状态的规则

状态不可变

修改对象状态

相关文章：