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

但这样会多出一个不必要的

，可能影响样式或结构。

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

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

   
   <button onClick={ setNumber }>设置年龄</button>
   
   
   <>
   )

---

前端react.js前端框架

上一篇：鸿蒙app开发中 拿到json文件数据进行动画的播放

下一篇：【IEDA】已解决：IDEA中jdk的版本切换