前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
state简介
import './App.css';
import {useState} from "react";
const App = () => {
console.log('函数执行了 ---> 组件创建完毕!');
/*
* 在React中,当组件渲染完毕后,再修改组件中的变量,不会使组件重新渲染
* 要使得组件可以收到变量的影响,必须在变量修改后对组件进行重新渲染
* 这里我们就需要一个特殊变量,当这个变量被修改使,组件会自动重新渲染
*
* state相当于一个变量,
* 只是这个变量在React中进行了注册,
* React会监控这个变量的变化,当state发生变化时,会自动触发组件的重新渲染
* 使得我们的修改可以在页面中呈现出来
*
* 在函数组件中,我们需要通过钩子函数,获取state
*
* 使用钩子 useState() 来创建state
* import {useState} from "react";
*
* 它需要一个值作为参数,这个值就是state的初始值
* 该函数会返回一个数组
* 数组中第一个元素,是初始值
* - 初始值只用来显示数据,直接修改不会触发组件的重新渲染
* 数组中的第二个元素,是一个函数,通常会命名为setXxx
* - 这个函数用来修改state,调用其修改state后会触发组件的重新渲染,
* 并且使用函数中的值作为新的state值
*
*
*
*
* */
const [counter, setCounter] = useState(1);
// let counter = result[0];
// let setCounter = result[1];
// const [counter, setCounter] = result;
/*
* 当点击+时,数字增大
* 点击-时,数字减少
* */
// 创建一个变量存储数字
// let counter = 2;
const addHandler = () => {
// 点击后数字+1
// alert('+1');
// counter++;
setCounter(counter + 1); // 将counter值修改为2
};
const lessHandler = () => {
// 点击后数字-1
// alert('-1');
// counter--;
setCounter(counter-1);
};
return <div className={'app'}>
<h1>{counter}</h1>
<button onClick={lessHandler}>-</button>
<button onClick={addHandler}>+</button>
</div>;
};
// 导出App
export default App;
样式文件
.app{标签:yyds,const,变量,渲染,counter,react,state,组件 From: https://blog.51cto.com/u_14476028/6065424
width: 300px;
height: 300px;
margin: 50px auto;
background-color: #bfa;
text-align: center;
}
.app button{
width: 100px;
font-size: 50px;
margin: 0 20px;
}