前言：本章主要讲了useState基础使用，组件基础样式控制，表单受控绑定，如何在React中获取DOM以及一些很有帮助的杂项知识点。

一：useState基础使用

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。
本质：和普通 JS 变量不同的是，状态变量一旦发生变化组件的视图 UI 也会跟着变化（数据驱动视图）

// useState实现一个计数器按钮
import { useState } from 'react'
function App () {
  // 1. 调用useState添加一个状态变量，参数为初始值
  // count 状态变量
  // setCount 修改状态变量的方法
  const [count, setCount] = useState(0)

  // 2. 点击事件回调
  const handleClick = () => {
    // 作用: 
    // 1. 用传入的新值修改count
    // 2. 重新使用新的count渲染UI
    setCount(count + 1)
  }
  return (
    <div>
      <button onClick={handleClick}>{count}</button>
    </div>
  )
}

export default App

修改规则：

在 React 中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新。

错误写法：

let [count, setCount] = useState(0)

const handleClick = () => {
  // 直接修改 无法引发视图更新
  count++
  console.log(count)
}

正确写法：

const handleClick = () => {
  // 作用:
  // 1. 用传入的新值修改count
  // 2. 重新使用新的count渲染UI
  setCount(count + 1)
}

修改对象状态：
规则：对于对象类型的状态变量，应该始终传给 set 方法一个全新的对象来进行修改

错误写法：

const [form, setForm] = useState({
  name: 'jack',
})

const handleChangeName = () => {
  form.name = 'john'
}

正确写法：

const [form, setForm] = useState({
  name: 'jack',
})

const handleChangeName = () => {
  setForm({
    ...form,
    name: 'john',
  })
}

二：组件基础样式控制

1.行内样式（不推荐）

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

2.class 类名控制
index.css

.foo {
  color: red;
}

App.js

import './index.css'

function App() {
  return (
    <div>
      <span className="foo">this is span</span>
    </div>
  )
}

三：表单受控绑定

需求：使用 React 组件的状态（useState）控制表单的状态

数据流向：
React 状态（state） → Input 的 value 属性
Input 的最新值 → 通过 onChange 写回 state

步骤：
1.准备一个 React 状态值

const [value, setValue] = useState('')

2.通过 value 属性绑定状态，通过 onChange 属性绑定状态同步的函数

<input
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

这样我们就可以实现表单数据的双向绑定啦

四：React中获取DOM

在 React 组件中获取 / 操作 DOM，需要使用 useRef 钩子函数，分为两步：
1.使用 useRef 创建 ref 对象，并与 JSX 绑定

const inputRef = useRef(null)
<input type="text" ref={inputRef} />

2.在 DOM 可用时，通过 inputRef.current 拿到 DOM 对象

console.log(inputRef.current)

例如：

// React中获取DOM

import { useRef } from "react"

// 1. useRef生成ref对象 绑定到dom标签身上

// 2. dom可用时，ref.current获取dom
// 渲染完毕之后dom生成之后才可用

function App () {
  const inputRef = useRef(null)
  const showDom = () => {
    console.dir(inputRef.current)
  }
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={showDom}>获取dom</button>
    </div>
  )
}

export default App

杂项知识点：

1.loadsh

Lodash是一个工具库，提供了很多方便操作数组、对象、排序、筛选的方法。

例如_.orderBy
作用：对数组进行排序（按指定字段、升降序）

案例：
1.引入：

import _ from 'lodash'

2.运用

// 按点赞数从大到小排序（最热）
_.orderBy(commentList, 'like', 'desc')

// 按时间从新到旧排序（最新）
_.orderBy(commentList, 'ctime', 'desc')

_.orderBy(要排序的数组, 按哪个字段排, 升序/降序)
desc = 降序（从大到小）
asc = 升序（从小到大）

2.classnames

classnames 是一个 React 最常用的工具库，专门用来：动态切换 / 拼接 CSS 类名。
它的作用就是：根据条件，自动给元素加 / 删 class，让代码更干净、不写复杂字符串拼接。

语法规则：

classNames(
  '固定类名1', 
  '固定类名2', 
  { 动态类名: 条件 }
)

例如：

className={classNames('nav-item', { active: type === item.type })}

等价于：
永远有类名：nav-item
当 type === item.type 为 true → 加 active
为 false → 不加 active


不用classnames
className={`nav-item ${type === item.type ? 'active' : ''}`}

3. uuid

UUID 是一个唯一的、不重复的随机字符串，专门用来给数据做【唯一 ID】。

例如：

import { v4 as uuidV4 } from 'uuid'


const handlePublish = () => {
  setCommentList([
    ...commentList,
    {
      rpid: uuidV4(), // 👈 这里用了 UUID
    ...
  ])
}

生成出来的效果：
每次调用 uuidV4() 都会生成一个独一无二的字符串

'1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'
'9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

最后：
如果我的内容对你有帮助，请点赞，评论，收藏，创作不易。大家的支持就是我坚持下去的动力！

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/A923A/article/details/159862665