React 组件的根本使用，useState 状态变量的使用

React 组件

组件是什么

#####　概念：一个组件就是用户界面的一部分，它可以有本身的逻辑和表面，组件之间可以相互嵌套，也可以多次复用。
在 React，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图 UI，渲染组件只须要把组件当成标签誊写即可

2. // 定义一个组件
3. function MyButton() {
4.   // 组件的内部逻辑和视图 UI
5.   return <button>Click me</button>
6. }
8. // 使用组件
9. function App() {
10.   return (
11.     <div>
12.       <MyButton />
13.     </div>
14.   )
15. }

复制代码

##　｀useState`的根本使用
useState是React提供的Hook，可以让我们在函数组件中维护状态。

它答应我们向组件添加一个状态变量，从而控制影响组件的渲染结果。
本质：宁静常 js 变量差别，状态变量一旦发生厘革组件的视图UI也会跟着厘革

1. /**
2. * 项目的根组件
3. *
4. * useState 状态管理
5. *
6. * 实现一个计数器按钮
7. */
9. import { useState } from "react";
11. export default function App() {
12.   // 1. 调用 useState 状态管理函数，创建计数器状态和更新计数器状态的函数
13.   const [count, setCount] = useState(0);
15.   // 2. 实现计数器按钮的点击事件
16.   const handleClick = () => {
17.     /**
18.      * 作用：1. 用传入的新值修改 count
19.      *       2. 重新使用新的 count 值渲染组件
20.      */
21.     setCount(count + 1);
22.   };
24.   // 3. 渲染计数器按钮和当前计数器值
25.   return (
26.     <div>
27.       <h1>计数器：{count}</h1>
28.       <button onClick={handleClick}>点击增加</button>
29.     </div>
30.   );
31. }

复制代码

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

useState 的修改状态规则

状态不可变

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

1. const [count, setCount] = useState(0);
3. const handleClick = () => {
4.   // count++; // 错误，不能直接修改状态
6.   /**
7.    * 作用：
8.    *  1.用传入的新值修改 count
9.    *  2.重新使用新的 count 值渲染组件
10.    */
11.   setCount(count + 1);
12. }

复制代码

修改对象状态

#####　规则：对于对象范例的状态变量。应该始终传给 set 函数一个新的对象来举行修改。

1. const [obj, setObj] = useState({ name: "张三", age: 20 });
3. const handleClick = () => {
4.   // 错误，不能直接修改对象
5.   // obj.name = 'Join'
7.   // 正确，传给 set 函数一个新的对象
8.   setObj({...obj, name: 'Join' });
9. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金