React - classnames 优化类名控制、受控表单绑定、获取 DOM classnames 优化类名控制该库可以通过条件动态控制 class 类名的显示，github：https://github.com/JedWatson/classnames1. 安装npm install classnames2. 使用import classNames from 'classnames' <li className="nav-sort"> {tabs.map((item) => ( <span key={item.type} className={classNames('nav-item', { active: type === item.type })} onClick={() => tabChangeHandler(item.type)} > {item.text} </span> ))} </li>受控表单绑定概念：使用 useState 控制表单的状态import { useState } from 'react' function App() { // 1. 通过 value 属性绑定 react 状态 const [inputVal, setInputVal] = useState('') // 2. 绑定 onChange 事件，通过事件参数（即输入框最新的值）反向修改 react 状态 return ( <div className="App"> <input type="text" value={inputVal} onChange={(e) => setInputVal(e.target.value)} ></input> </div> ) } export default App 获取 DOM通过 useRef 钩子函数实现：使用 useRef 创建 ref 对象在 DOM 可用时，通过创建的 xxxRef.current 拿到 DOM 对象import { useRef } from 'react' function App() { const inputRef = useRef(null) // 组件渲染完毕后获取 DOM const getDom = () => { console.dir(inputRef.current) } return ( <div className="App"> <input type="text" ref={inputRef}></input> <button onClick={getDom}>获取 DOM</button> </div> ) } export default App

React - 组件的样式处理 1. 内联样式（不推荐）<div style={{ color='red' }}>测试</div>2. class 类名控制.App { color: red }import './index.css' function App() { return ( <div className="App">测试</div> ) } export default App 3. 示例.test { color: plum; }import './index.css' const style = { color: 'lightBlue', fontSize: 20 } function App() { return ( <div className="App"> <div style={style}>行内样式</div> <div className="test">行内样式</div> </div> ) } export default App

React - useState 1. 基础使用useState 是 React 中的一个 Hook 函数，它允许我们向组件添加一个状态变量，从而控制/影响组件的渲染结果，注：状态变量一旦发生变化，组件的视图 UI 也会同步变化（数据驱动视图）// useState import { useState } from 'react' function App() { // 1. 调用 useState 添加状态变量 // count 状态变量 // setCount 修改状态变量的方法 const [count, setCount] = useState(0) // 2. 点击事件回调 const clickHandler = () => { setCount(count + 1) } return ( <div className="App"> <button onClick={clickHandler}>{count}</button> </div> ) } export default App 2. 修改状态的规则（1）状态不可变在 React 中，状态被认为是只读的，应秉持“替换它而不是修改它”的原则，直接修改状态不会触发视图的更新import { useState } from 'react' function App() { let [count, setCount] = useState(0) const clickHandler = () => { // setCount(count + 1) // 直接修改，值变化了，但不会触发视图的更新 count++ console.log('count:', count) } return ( <div className="App"> <button onClick={clickHandler}>{count}</button> </div> ) } export default App （2）修改对象状态对于对象类型的状态变量，应该始终传给 set 方法一个全新的对象来进行修改import { useState } from 'react' function App() { // 修改对象 const [form, setForm] = useState({ name: '孙笑川', age: 33 }) const changeForm = () => { setForm({ ...form, name: '药水哥', age: '30' }) } return ( <div className="App"> <p>姓名：{form.name}</p> <p>年龄：{form.age}</p> <button onClick={changeForm}>修改对象</button> </div> ) } export default App

React - 组件 概念：一个组件即用户界面的一部分，它有自己的逻辑和样式，如：Header、SiderBar、MainPage在 React 中，一个组件就是首字母大写（大驼峰）的函数，内部存放对应组件的逻辑和视图 UI，使用时把组件当成标签书写即可// 定义组件 const Button = () => { return <button>Click</button> } function App() { return ( <div className="App"> {/* 使用/渲染组件 */} <Button /> </div> ) } export default App

React - 事件绑定 1. 基础事件绑定语法：on + 事件名称 = { 事件处理方法/函数 }function App() { const clickHandler = () => { alert('事件绑定') } return ( <div className="App"> <button onClick={clickHandler}>Click</button> </div> ) } export default App 2. 使用事件对象参数function App() { const clickHandler = (e) => { alert('事件绑定') console.log('事件参数', e) } return ( <div className="App"> <button onClick={clickHandler}>Click</button> </div> ) } export default App 3. 传递自定义参数语法：绑定事件时改造为箭头函数（通过函数引用的方式实现），通过形参传递function App() { const clickHandler = (name) => { console.log('自定义参数', name) } return ( <div className="App"> <button onClick={() => clickHandler('孙笑川')}>Click</button> </div> ) } export default App 4. 同时传递事件对象和自定义参数语法：在绑定事件的位置传递事件实参 e，clickHandler 中声明形参，且需要注意参数的顺序function App() { const clickHandler = (name, e) => { console.log('自定义参数', name, '事件参数', e) } return ( <div className="App"> <button onClick={(e) => clickHandler('孙笑川', e)}>Click</button> </div> ) } export default App

React - 简介、JSX基础 一、搭建开发环境官网快速开始文档 - 创建一个 React 项目：https://18.react.dev/learn/creating-a-react-appnpx create-react-app react-demo npm start二、JSX 基础1. 概念JSX（JS的语法扩展）是JavaScript 和 XML（HTML）的缩写，表示在 js 代码中编写 HTML 模板结构，它是 React 中编写 UI 模板的方式2. 使用 js 表达式在 JSX 中可以通过大括号语法 {} 识别 js 中的表达式，如：变量、函数调用、方法调用等使用引号传递字符串使用 js 变量函数调用和方法调用使用 js 对象const index = 1 function getName() { return '孙笑川' } function App() { return ( <div className="App"> 这是 React Demo {/* 使用引号传递字符串 */} {'这是 React Demo'} {/* 使用 js 变量 */} {index} {/* 函数调用 */} {getName()} {/* 方法调用 */} {new Date().getDate()} {/* 使用js对象 */} <div style={{ color: 'red' }}>这是 React Demo</div> </div> ); } export default App; 3. 列表渲染const list = [ {id: '1', name: '孙笑川'}, {id: '2', name: '药水哥'}, {id: '3', name: '刘波'} ] function App() { return ( <div className="App"> {/* 渲染列表 */} <ul> {list.map(item => <li key={item.id}>{item.name}</li>)} </ul> </div> ); } export default App; 4. 条件渲染通过逻辑运算符、三元表达式实现基础的条件渲染const flag = true function App() { return ( <div className="App"> {/* 逻辑运算 */} {flag && <span>这是 span 标签</span>} {/* 三元运算 */} {!flag ? <span>这是 span 标签</span> : <p>这是 p 标签</p>} </div> ); } export default App; 5. 复杂条件渲染通过自定义函数 + if 判断语句实现const type = 1 // 0 1 2 function getType() { if (type === 0) { return <div>孙笑川</div> } if (type === 1) { return <div>药水哥</div> } if (type === 2) { return <div>刘波</div> } } function App() { return ( <div className="App"> {/* 复杂条件渲染 */} {getType()} </div> ); } export default App;