【React】组件基础使用

embedded/2025/2/21 7:59:08/

1. react组件

在react中，组件就是首字母大写的函数，内部存放了组件的逻辑、UI，渲染组件只需要把组件当成标签书写。

使用组件有两种方式：自闭和、成对标签

javascript">function App() {// 定义组件function Component() {return <div>我是一个自定义组件</div>}return (<div className="App">{/* 方式1 */}<Component/>{/* 方式2 */}<Component></Component></div>);
}export default App;

在这里插入图片描述

2. useState使用

一个react hook（函数），允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
本质：状态变量发生变化，组件的UI也会跟着变化（数据驱动视图）

在这里插入图片描述
使用useState实现一个计数器

javascript">import { useState } from "react";function App() {const [count, setCount] = useState(0)function add() {// 作用：1、用传入的新值修改count的值// 2. 使用新的count渲染uisetCount(count + 1)}return (<div className="App"><button onClick={add}>{count}</button></div>);
}export default App;

3. useState修改状态的规则

状态不可变（状态只读，始终替换它而不是修改它，直接修改状态不能引发视图更新）
对于对象类型的状态变量，应始终传给set方法一个全新的对象来进行修改

javascript">import { useState } from "react";function App() {const [count, setCount] = useState(0)const [form, setForm] = useState({name: '赵四'})function add() {// 作用：1、用传入的新值修改count的值// 2. 使用新的count渲染uisetCount(count + 1)}function changeForm() {// 错误写法，直接修改// form.name = '刘能'// 正确写法setForm({...form,name: '刘能'})}return (<div className="App"><button onClick={add}>{count}</button><button onClick={changeForm}>hi，我是{form.name}</button></div>);
}export default App;