react----state

pqxpq

已于 2022-10-10 13:58:57 修改

阅读量425

点赞数

分类专栏：后端学不走之react 文章标签： react.js javascript 前端

于 2022-10-10 12:35:20 首次发布

本文链接：https://blog.csdn.net/qq_52563729/article/details/127240974

版权

后端学不走之react 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

点击了不会执行

import './App.css'
//总组件！！！！！！！，这里引入其他组件的
/*组件名应该和文件名一样 */
const App=()=>{

    /**
     * 设置当点击+的时候数字增大
     * 点击-的时候数字减小
     */
    const addHandler=()=>{
        //点击后数字+1
        a++
        alert('数字+1')

a
    }
    let a=1
    const lessHandler=()=>{
        //点击后数字-1
        a--
        alert('数字-1')
    }
    return <div className="App">
        <h1>{a}</h1>
        <button onClick={lessHandler}>-</button>
        <button onClick={addHandler}>+</button>
    </div>
}

//导出组件
export default App;

为什么没有反应？？

我们的执行顺序是先点击按钮

在这里插入图片描述

再触发这个

在这里插入图片描述
后执行的不会影响先执行的

在组件渲染完毕后，再修改组件中的变量，不会使组件重新渲染。

解决办法

当我们修改变量后对组件进行重新渲染！！！！

这里我们就需要一个特殊的变量，当我们这个变量修改的时候组件就会重新渲染！！！！！！！！！！！！！

state!!!和props不同，state只属于当前的组件，其他组件无法访问，并且state是可变的，当其发生变化的时候相关组件会一起刷新

为什么state一改变就会自动刷新？？？是谁再刷新？？？

state相当于一个变量，这个变量再react中进行了注册，react会监控这个变量得变化，当state发生变化的时候，会自动触发发生重新渲染

如何使用？

在函数组件中我们需要钩子函数来获取这个state

导入包import{useState} from “react”

它需要一个值作为参数，这个值就是state的初始值，该函数会返回一个数组数组中第一个元素就是初始值。这只是一个初始值，直接修改不会触发组建的重新渲染

const res=useState(1)
    let a=res[0];

并不会修改！！！

第二个元素是一个方法

这里的a就相当于被勾出来的值

import './App.css'
import{useState} from "react"
//总组件！！！！！！！，这里引入其他组件的
/*组件名应该和文件名一样 */
const App=()=>{

    /**
     * 设置当点击+的时候数字增大
     * 点击-的时候数字减小
     */
    const addHandler=()=>{
        //点击后数字+1
        setConter(a+1)
        alert('数字+1')
    }
    let[a,setConter]=useState(1)
    const lessHandler=()=>{
        //点击后数字-1
        setConter(a-1)
        alert('数字-1')
    }
    return <div className="App">
        <h1>{a}</h1>
        <button onClick={lessHandler}>-</button>
        <button onClick={addHandler}>+</button>
    </div>
}

//导出组件
export default App;