前端开发React18 - 组件（react 组件设计）

组件定义：

• 用户界面的一部分
• 有自己的外观和逻辑
• 可以相互嵌套和复用

useState基本使用：

import { useState } from 'react'

function App() {

const [num, setNum] = useState(0)

{num}

<br/>

<button onClick={()=>setNum(num+1)}>num + </button>

}

useState修改状态规则：

• 简单状态不能直接修改，直接修改不会重新渲染视图
• 复杂状态，需要全新的对象修改

const [obj, setObj] = useState({name:'tom'})

<button onClick={()=>setObj({...obj,name:'jack'})}>obj </button>

组件样式：

• 行内样式

<div style={{color:'red'}}>456</div>

• class控制

import './app.css'

.fontred { color: blue }

<div className='fontred'>123</div>

• classnames 插件