易名中国域名门户网站,怎么知道公司网站是哪家做的,网站建设单选,浏览器免费大全React 组件
组件是什么
##### 概念#xff1a;一个组件就是用户界面的一部分#xff0c;它可以有自己的逻辑和外观#xff0c;组件之间可以相互嵌套#xff0c;也可以多次复用。
在 React#xff0c;一个组件就是首字母大写的函数#xff0c;内部存放了组件的逻辑和视…React 组件
组件是什么
##### 概念一个组件就是用户界面的一部分它可以有自己的逻辑和外观组件之间可以相互嵌套也可以多次复用。
在 React一个组件就是首字母大写的函数内部存放了组件的逻辑和视图 UI渲染组件只需要把组件当成标签书写即可 // 定义一个组件
function MyButton() {// 组件的内部逻辑和视图 UIreturn buttonClick me/button
}// 使用组件
function App() {return (divMyButton //div)
}
## useState的基础使用
useState是React提供的Hook可以让我们在函数组件中维护状态。
它允许我们向组件添加一个状态变量从而控制影响组件的渲染结果。
本质和普通 js 变量不同状态变量一旦发生变化组件的视图UI也会跟着变化
/*** 项目的根组件** useState 状态管理** 实现一个计数器按钮*/import { useState } from react;export default function App() {// 1. 调用 useState 状态管理函数创建计数器状态和更新计数器状态的函数const [count, setCount] useState(0);// 2. 实现计数器按钮的点击事件const handleClick () {/*** 作用1. 用传入的新值修改 count* 2. 重新使用新的 count 值渲染组件*/setCount(count 1);};// 3. 渲染计数器按钮和当前计数器值return (divh1计数器{count}/h1button onClick{handleClick}点击增加/button/div);
}
useState 是一个函数返回值是一个数组。数组中的第一个参数是状态变量第二个参数是 set 函数用来更新状态变量。useState 的参数将作为 count 的初始值。
useState 的修改状态规则
状态不可变
在 React 中状态被认为是只读的我们应该始终替换他而不是修改它直接修改状态不能引发视图更新
const [count, setCount] useState(0);const handleClick () {// count; // 错误不能直接修改状态/*** 作用* 1.用传入的新值修改 count* 2.重新使用新的 count 值渲染组件*/setCount(count 1);
}
修改对象状态
##### 规则对于对象类型的状态变量。应该始终传给 set 函数一个新的对象来进行修改。
const [obj, setObj] useState({ name: 张三, age: 20 });const handleClick () {// 错误不能直接修改对象// obj.name Join// 正确传给 set 函数一个新的对象setObj({...obj, name: Join });
}
