react 初体验2

1. Mounting：已插入真实 DOM

2. Updating：正在被重新渲染

3. Unmounting：已移出真实 DOM

---

click、change

这里只能用 onClick = { 方法名 } 不能用@

<button onClick={ handleClick }>切换</button>
<button onClick={() => setCount((count) => count + 1)}>count is { count }</button
<span>{isSuccess ? '成功' : '失败'}</span>

<input type="text" placeholder="输入内容（防抖）" value={inputVal} onChange={(e) => handleInput(e.target.value)} />

正常情况

如果是直接赋值 则会立即调用
如果是想要点击后再改变 需要变成箭头函数正确
<button onClick={() => handleClick(true)}>切换</button>正确  注意方法的括号！！！
<button onClick={ handleClick }>切换</button>错误  这样会立即执行
<button onClick={ handleClick(true) }>切换</button>

---

渲染

这里直接渲染的话 是{ 单括号 }

<button>{ count }</button>
<input type="text" placeholder="输入内容（防抖）" value={inputVal} onChange={(e) => handleInput(e.target.value)} />

添加样式 是双括号

style={{ marginLeft: '10px' }}

JSX 元素必须被一个标签包裹

方法 1

但这样会多出一个不必要的 <div>，可能影响样式或结构。

当然如果你需要在这里想样式 也可以写

function One() {return (<div><h1>One</h1><p>这是第一个页面</p></div>);
}

方法 2 推荐

这里的<></> 相当于React.Fragment 这种更简洁

<>  <h1>One</h1><p>内容</p>
</>============================ 这两种是相等的<React.Fragment><h1>One</h1><p>内容</p>
</React.Fragment>

function One() {return (<><h1>One</h1><p>这是第一个页面</p></>);
}

关于 css 样式 当成变量使用

这里的 style 引入的后缀名是 module.css 所以才有导出功能

如果是 css 那没办法 只能用 className 类名设置样式

import styles from './login.module.css';<Layout className={styles.loginLayout}><Content className={styles.loginContent}><Card className={styles.loginCard} title="用户登录"></Card></Content>
</Layout>

---

useRef

useRef vs useState 对比

特性	useRef	useState
值变化是否触发重新渲染？	❌ 不会	✅ 会
适合存什么？	定时器、DOM 节点、临时变量	状态（需要驱动 UI 更新）
访问方式	ref.current	state / setState

你要更新界面 → 用 useState

你要保存一个值但不想触发渲染 → 用 useRef

---

useState

useState 是一个 React Hook，它允许你向组件添加一个 状态变量。

返回

useState 返回一个由两个值组成的数组：这里一般用结构的方式

1. 当前的 state。在首次渲染时，它将与你传递的 initialState 相匹配。
2. set函数，它可以让你将 state 更新为不同的值并触发重新渲染。

const [state, setState] = useState(initialState)import { useState } from 'react';function MyComponent() {const [age, setAge] = useState(28);const [name, setName] = useState('Taylor');const [todos, setTodos] = useState(() => createTodos());
}function setNumber(){setAge(18)
}return (<><div><button onClick={ setNumber }>设置年龄</button></div><>
)

---