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>
  <>
)

---