Yuan的博客
EN 中

React

基础知识点 Part1

  • 解构函数参数：函数使用解构来捕获特定属性作为具名参数

  • 虚拟 DOM：使网页更易管理，检测每个节点，仅刷新更新的节点

  • JSX

    1. 使用 className
    2. 自闭合标签：<img />, <input />
    3. 将代码包裹在花括号中以作为普通 JavaScript 处理
    4. 事件监听器：on + 事件类型（如 onClick）
    5. 条件判断：if 在 JSX 外部使用；内部使用三元运算符 x ? y : z
    6. map ()
    7. <li> 需要 key 属性，如 <li key="003">
    8. JSX 需要一个最外层元素，如 <div></div>

  • React 组件

    1. react, reactDOM
    2. 函数组件使用 PascalCase
    3. 使用 react-dom 中的 createRoot 和 render 渲染组件

项目：点击动物显示趣味事实

  1. 使用 createRoot 和三元运算符添加标题
  2. 使用背景变量添加背景
  3. 使用 for..in 循环和 push 添加图片数组
  4. 添加趣味事实：使用 array [index] 并添加事件监听器，使用 innerHTML 修改内容

授权表单

  1. 使用三元运算符进行设置
  2. 使用带有两个输入的 <form> 创建登录表单
  3. 使用三元运算符显示联系信息
  4. 在视图之间切换
  5. 使用事件监听器处理提交

代码模版

import { createRoot } from 'react-dom/client'
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<Component />)

// COMPONENT
import React from 'react'
import ReactDOM from 'react-dom/client'

function MyComponent() {
  return <h1>Hello world</h1>
}

ReactDOM.createRoot(document.getElementById('app')).render(<MyComponent />)

基础知识点 Part2

  • 组件交互

    1. Props 是组件之间传递的信息
    2. Props 是一个保存组件信息的对象
    3. Props 是不可变的
    4. 将函数附加到元素作为事件处理器
    5. 命名规范：handleEvent, onEvent（如 handleClick, onClick）

  • Hooks

    1. useState 配合展开语法：{...oldObj, newKey: newValue}
    2. useEffect 用于动态更改
    3. 仅在顶层调用 Hooks
    4. 仅从 React 函数中调用 Hooks
    5. 为不同效果分别使用 Hooks
    6. useState 配合数组/对象使用
    7. 事件对象属性：type, target, currentTarget 等
    8. 事件对象方法：preventDefault, stopPropagation 等

  • React 编程模式

    1. 拆分为容器组件（有状态）和展示组件（无状态）
    2. 展示组件 = 仅负责 UI
    3. 容器组件 = 数据获取、逻辑、状态

  • 中级模式

    1. 内联样式，如 <h1 style={{ color: 'red' }}>Hello</h1>
    2. 将样式存储在变量中并通过 style={styles} 注入

  • 路由

    1. createBrowserRouter () 创建路由映射
    2. <RouterProvider router={router}>
    3. <Route path="/"element={<Home />} />
    4. Route 将路径与组件关联
    5. Link 和 NavLink 用于导航
    6. 动态路由：:title，如 <Route path='/articles/:title' />
    7. useParams 获取路由参数
    8. 嵌套路由不包括父路径
    9. Navigate 渲染时重定向
    10. useNavigate 命令式导航
    11. 查询参数：?order=DESC

项目：CodeyOverflow 论坛

  1. 划分为各个部分
  2. 为每个部分添加 props
  3. 组装组件
  4. 渲染

项目：传递思想

  1. useState 配合数组使用
  2. 添加想法：handleText, onChange, handleSubmit, onSubmit
  3. 删除想法：removeThought, filter，绑定到组件
  4. 自动删除：useEffect, setTimeout，绑定删除

项目：领养宠物！

  1. 安装 react-router-dom
  2. 创建路由
  3. 使用嵌套/索引路由
  4. 在组件中使用 URL 参数
  5. 将 <a> 替换为 <Link>
  6. 添加搜索
  7. 为宠物详情添加 404

代码模版

const [currentState, setCurrentState] = useState ();

//input form
export function AddThoughtForm (props) {
  const [text, setText] = useState ('');

  const handleTextChange = (event) => {
    setText (event.target.value);
  };

  return (
    <form className="AddThoughtForm">
      <input type="text" value={text} onChange={handleTextChange} />
      <input type="submit" value="Add" />
    </form>
  );
}

//submit + add
const handleSubmit = (event) => {
  event.preventDefault ();
  const thought = {
    id: generateId (),
    text: text,
    expiresAt: getNewExpirationTime (),
  };
  props.addThought (thought);
};

//manually delete
const removeThought = (thoughtIdToRemove) => {
  setThoughts ((thoughts) =>
    thoughts.filter ((thought) => thought.id !== thoughtIdToRemove)
  );
};

//router setup
npm install --save react-router-dom@6;

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  Link,
  NavLink,
  RouterProvider,
} from 'react-router-dom';
import About from './About';
import Home from './Home';

const router = createBrowserRouter (
  createRoutesFromElements (
    <>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </>
  )
);

function App () {
  return (
    <RouterProvider router={router}>
      <nav>
        <Link to="/">Go to Home</Link>
        <NavLink to="/about">Go to About</NavLink>
      </nav>
    </RouterProvider>
  );
}

export default App;

//useParams
import { Link, useParams } from 'react-router-dom';

export default function Article () {
  let { title } = useParams ();
  return (
    <article>
      <h1>{title}</h1>
    </article>
  );
}

//useNavigate
import { useNavigate } from 'react-router-dom';

export const ExampleForm = () => {
  const navigate = useNavigate ();
  const handleSubmit = (e) => {
    e.preventDefault ();
    navigate ('/');
  };

  return <form onSubmit={handleSubmit}>{/* form elements */}</form>;
};

//useSearchParams
import { useSearchParams } from 'react-router-dom';

export const SortedList = () => {
  const [searchParams, setSearchParams] = useSearchParams ();
  const sortOrder = searchParams.get ('order');
  console.log (sortOrder); // "DESC"
};