React笔记 Notes

可以使用 JavaScript 的 useEffect 钩子和 URLSearchParams 来检查 URL 中的查询参数，并将其应用到 formValues 中。以下是一个示例代码，展示了如何实现这一功能：

javascript

clsx

import clsx from 'clsx';


	<button
      {...rest}
      className={clsx(
        'flex h-10 items-center rounded-lg bg-blue-500 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:bg-blue-600 aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
        className,
      )}
    >
      {children}
    </button>

小于等于号

你可以直接在 JSX 中插入小于等于号字符：
&lt;=

你可以使用 Unicode 字符实体来展示小于等于号：
&#8804;

你可以使用 HTML 实体来展示小于等于号：
&le;

react JSX 中插入花括号

在这个示例中，{'{}'} 用于在 JSX 中插入 {} 符号。由于 {} 在 JSX 中有特殊含义，所以需要用字符串的形式 {'{}'} 来插入它们。

{'{id}'} 

几种放变量的方式

{ '(id: ' + application.id + ")"}
{`已工作 ${application.sg_working_months} 月`}
{`约 ${application.age} 岁`}
{getChinese(ac.genderToChinese, application.gender)}

update form

    const [editingIds, setEditingIds] = useState({});
    const [formData, setFormData] = useState({});

    const handleEditClick = (application) => {
        setEditingIds({ ...editingIds, [application.id]: true });
        setFormData({ ...formData, [application.id]: application });
    };

    const handleInputChange = (applicationId, e) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [applicationId]: {
                ...formData[applicationId],
                [name]: value,
            },
        });
    };

    const handleUpdateClick = (applicationId) => {
        updateApplication(formData[applicationId]);
        setEditingIds({ ...editingIds, [applicationId]: false });
    };

    const handleCancelClick = (applicationId) => {
        setEditingIds({ ...editingIds, [applicationId]: false });
        setFormData({ ...formData, [applicationId]: applications.find(app => app.id === applicationId) });
    };

state 和 localStorage 是两种不同的技术，用于不同的目的。以下是它们之间的主要区别：

State

You're importing a component that needs `useState`. This React hook only works in a client component. To fix, mark the file (or its parent) with the `"use client"` directive

临时存储：state 是组件内部的状态，存在于组件的生命周期内。当组件卸载时，状态会被清除。
组件内管理：state 由 React 组件管理，通过 useState、useReducer 等钩子来使用。
不可持久化：默认情况下，state 不会在页面刷新或重新加载后保留。
快速访问：因为状态直接存在于内存中，所以访问和修改速度很快。
范围有限：state 仅限于其所在的组件及其子组件，不能跨组件共享（除非通过上下文或状态管理库）。

Local Storage

持久化存储：localStorage 是一种 Web API，用于在浏览器中存储键值对数据。数据存储在浏览器中，即使页面刷新或浏览器重启，数据也会保留。
全局管理：localStorage 存储的数据在同一域名下的所有页面之间共享。
容量有限：每个域名下的 localStorage 大小限制通常为 5MB（不同浏览器可能有所不同）。
较慢访问：因为 localStorage 数据存储在磁盘上，访问和修改速度相对较慢。
同步 API：localStorage 的 API 是同步的，这意味着在大量数据读写时可能会导致阻塞。

在 React 中，当组件的状态（state）或属性（props）发生变化时，组件会重新渲染。这是因为 React 需要更新 DOM 以反映状态或属性的变化。具体到你的代码，当 editingId 改变时，Record 组件重新渲染是因为 editingId 是通过 useState 管理的状态。

每次 editingId 变化时，React 会重新渲染整个 Record 组件，因为状态变化触发了重新渲染流程。在重新渲染过程中，React 会重新评估组件的 JSX 结构，这包括条件渲染和所有子组件的渲染逻辑。

React笔记 Notes

State​

Local Storage​

State

Local Storage