#yyds干货盘点 react笔记之学习之state组件

简介: #yyds干货盘点 react笔记之学习之state组件

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{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    background-color: #bfa;
    text-align: center;
}
.app button{
    width: 100px;
    font-size: 50px;
    margin: 0 20px;
}
相关文章
|
1月前
|
存储 前端开发 索引
REACT 在组件之间共享状态
REACT 在组件之间共享状态
|
8天前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
15天前
|
前端开发 JavaScript 开发者
react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)
react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)
21 2
|
15天前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
28 1
|
7天前
|
存储 前端开发 JavaScript
react hooks 学习进阶
【7月更文挑战第12天】 React Hooks(自16.8版起)让函数组件能处理状态和副作用。useState用于添加状态管理,useEffect处理副作用,useContext共享数据,useReducer处理复杂状态逻辑,useRef获取引用。进阶技巧涉及性能优化,如useMemo和useCallback,以及遵循规则避免在不适当位置调用Hooks。理解异步更新机制和结合Redux等库提升应用复杂性管理。持续学习新技巧是关键。
10 0
|
15天前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
21 0
|
15天前
|
缓存 前端开发
react18【系列实用教程】memo —— 缓存组件 (2024最新版)
react18【系列实用教程】memo —— 缓存组件 (2024最新版)
14 0
|
15天前
|
前端开发
react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)
react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)
15 0
|
1月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为
|
2月前
|
JavaScript 前端开发 API
如何学习React.js?
【5月更文挑战第27天】如何学习React.js?
43 14