说不定面试的时候，会给一个codesandbox的项目，让你现场编程。这是很有可能的。

1、react folder structure

1、只有一个顶层文件夹，文件夹里面可以有文件夹或者文件。那么就有两种数据类型的node，leaf或者branch，使用isFolder属性来区分。

xxxxxxxxxx
45
1
// src/folder.ts
2
export const folders = {
3
  name: "root",
4
  isFolder: true,
5
  children: [
6
    {
7
      name: "src",
8
      isFolder: true,
9
      children: [
10
        {
11
          name: "components",
12
          isFolder: true,
13
          children: [
14
            {
15
              name: "Header.js",
16
              isFolder: false,
17
            },
18
            {
19
              name: "Footer.js",
20
              isFolder: false,
21
            },
22
          ],
23
        },
24
        {
25
          name: "App.js",
26
          isFolder: false,
27
        },
28
        {
29
          name: "index.js",
30
          isFolder: false,
31
        },
32
      ],
33
    },
34
    {
35
      name: "public",
36
      isFolder: true,
37
      children: [
38
        {
39
          name: "index.html",
40
          isFolder: false,
41
        },
42
      ],
43
    },
44
  ],
45
};

2、use recursive，递归组件，同一个组件 FolderStruc 渲染自己的子节点，实现树形结构。

xxxxxxxxxx
43
1
// src/FolderStructure.tsx
2
​
3
import { useState } from "react";
4
​
5
interface Data {
6
  name: string;
7
  isFolder: boolean;
8
  children?: Data[];
9
}
10
​
11
interface FolderStrucProps {
12
  data: Data;
13
}
14
​
15
const FolderStruc = ({ data }: FolderStrucProps) => {
16
  const { isFolder, children } = data;
17
  const [folderOpen, setFolderOpen] = useState<boolean>(true);
18
  const toggleFolderOpen = () => {
19
    setFolderOpen((prev) => !prev);
20
  };
21
​
22
  // if it's file
23
  if (!isFolder) return <div className="file">📄{data.name}</div>;
24
​
25
  // if it's folder
26
  return (
27
    <div className="folder">
28
      <div className="folderName">
29
        <span onClick={toggleFolderOpen}>
30
          {folderOpen ? <span>📂</span> : <span>📁</span>}
31
          {data.name}
32
        </span>
33
      </div>
34
      {folderOpen &&
35
        children &&
36
        children.map((folder, index) => (
37
          <FolderStruc data={folder} key={index} />
38
        ))}
39
    </div>
40
  );
41
};
42
​
43
export default FolderStruc;

其实我有一点是很担心的，我害怕递归层级多了，里面定义的const [folderOpen, setFolderOpen] = useState<boolean>(true);会有很多，会不会影响性能？react能够很好的处理吗？

在几百个节点以内：完全没问题，React 处理得很好，几乎可以忽略。也可以加上React.memo。 一旦节点数量达到 500+（尤其是全展开时），每个文件夹都带一个 useState，就会开始明显卡顿，甚至几千节点时直接卡死。这是因为每次 setState → 触发该组件 + 所有子组件重新渲染检查，即使子节点没变，也要走一次 diff，所以性能会开始变差。

此时可以使用路径展开法，单一全局状态来处理，下面我会做一个例子。

3、编写一点CSS

xxxxxxxxxx
13
1
.folder {
2
  text-align: left;
3
  margin-left: 24px;
4
  border-left: 1px solid gray;
5
}
6
​
7
.folderName {
8
  cursor: pointer;
9
}
10
​
11
.file {
12
  margin-left: 24px;
13
}

4、在App.tsx中引入

xxxxxxxxxx
15
1
// App.tsx
2
​
3
import "./App.css";
4
import { folders } from "./folders";
5
import FolderStruc from "./FolderStructure";
6
​
7
function App() {
8
  return (
9
    <>
10
      <FolderStruc data={folders} />
11
    </>
12
  );
13
}
14
​
15
export default App;

效果：

这个例子有点让我眼前一亮，为什么呢？因为margin-left的间距，我只需要设置.folder的就行了，就可以形成树形结构的效果。记得我修改element-ui树形结构样式的时候，是很麻烦的，要找到哪一个children、哪一个样式名，这个就很简单。

小结：

其实这个组件并不难，主要就是组件的递归。更加复杂的，像树形结构前面加上checkbox、加上intermediate状态、子级选满之后父级自动选中，这些才是困难的，有时间就做一下。

2、react folder structure + 路径展开法

3、OTP input

什么是OTP input？就是你在键盘上直接输入6位验证码，不用手动聚焦输入框，一个输入框输入完成之后，就会自动聚焦到下一个输入框。

有几点需要考虑：

• 每个输入框只能输入一个数字。
• 当一个输入框输入之后，focus应该自动跳转到下一个输入框。
• 用户可以使用backspace清除一个输入框的内容；如果这个输入框本身没有内容，那么focus应该自动跳转到前一个输入框。

1、根据需求，渲染出几个输入框：

xxxxxxxxxx
26
1
// src/OTPInput.tsx
2
​
3
import { useRef, useState } from "react";
4
​
5
// 需要的输入框个数
6
interface OTPInputProps {
7
  length?: number;
8
}
9
​
10
export const OTPInput = ({ length = 6 }: OTPInputProps) => {
11
  // 使用数组来创建状态
12
  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
13
  // 使用 useRef 来操作具体的input框
14
  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
15
  return (
16
    <div style={{ display: "flex", gap: "8px" }}>
17
      {otp.map((value, index) => (
18
        <input
19
          type="text"
20
          ref={(e) => (inputRefs.current[index] = e)}
21
          style={{ width: "50px", height: "50px", textAlign: "center" }}
22
        />
23
      ))}
24
    </div>
25
  );
26
};

2、开始处理上面提出的几个需要考虑的点。

①将input变为受控组件。完成第1和2点：

xxxxxxxxxx
57
1
// src/OPTInput.tsx
2
​
3
import { useRef, useState } from "react";
4
​
5
// 需要的输入框个数
6
interface OTPInputProps {
7
  length?: number;
8
}
9
​
10
export const OTPInput = ({ length = 6 }: OTPInputProps) => {
11
  // 使用数组来创建状态
12
  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
13
  // 使用 useRef 来操作具体的input框
14
  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
15
​
16
  const focusInput = (index: number) => {
17
    const input = inputRefs.current[index];
18
    if (input) input.focus();
19
  };
20
​
21
  const handleChange = (
22
    e: React.ChangeEvent<HTMLInputElement>,
23
    index: number
24
  ) => {
25
    const val = e.target.value;
26
    if (!/^\d$/.test(val)) return;
27
​
28
    // 设置值，这里可以使用map方法来setOtp，但是后面需要用到新值，所以这里直接处理了
29
    const newOtp = [...otp];
30
    newOtp[index] = val;
31
    setOtp(newOtp);
32
​
33
    // 将焦点跳转到下一个input
34
    if (val && index < length - 1) {
35
      focusInput(index + 1);
36
    }
37
​
38
    // 如果每个输入框里面都有值，那么就可以执行submit或其他事件了
39
    if (newOtp.every((digit) => digit !== "")) {
40
      // you can submit or other operation
41
    }
42
  };
43
  return (
44
    <div style={{ display: "flex", gap: "8px" }}>
45
      {otp.map((value, index) => (
46
        <input
47
          type="text"
48
          value={value}
49
          onChange={(e) => handleChange(e, index)}
50
          maxLength={1}
51
          ref={(e) => (inputRefs.current[index] = e)}
52
          style={{ width: "50px", height: "50px", textAlign: "center" }}
53
        />
54
      ))}
55
    </div>
56
  );
57
};

效果：

②完成backspace删除（使用keydown事件）

xxxxxxxxxx
83
1
// src/OPTInput.tsx
2
​
3
import React, { useRef, useState } from "react";
4
​
5
// 需要的输入框个数
6
interface OTPInputProps {
7
  length?: number;
8
}
9
​
10
export const OTPInput = ({ length = 6 }: OTPInputProps) => {
11
  // 使用数组来创建状态
12
  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
13
  // 使用 useRef 来操作具体的input框
14
  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
15
​
16
  const focusInput = (index: number) => {
17
    const input = inputRefs.current[index];
18
    if (input) input.focus();
19
  };
20
​
21
  const handleChange = (
22
    e: React.ChangeEvent<HTMLInputElement>,
23
    index: number
24
  ) => {
25
    const val = e.target.value;
26
    if (!/^\d$/.test(val)) return;
27
​
28
    const newOtp = [...otp];
29
    newOtp[index] = val;
30
    setOtp(newOtp);
31
​
32
    if (val && index < length - 1) {
33
      focusInput(index + 1);
34
    }
35
​
36
​
37
    if (newOtp.every((digit) => digit !== "")) {
38
      // 
39
    }
40
  };
41
​
42
  const handleKeyDown = (
43
    e: React.KeyboardEvent<HTMLInputElement>,
44
    index: number
45
  ) => {
46
    if (e.key === "Backspace") {
47
      const newOtp = [...otp];
48
      // 如果当前输入框有值，就清空
49
      if (otp[index]) {
50
        newOtp[index] = "";
51
        setOtp(newOtp);
52
      } else {
53
        // 如果没有值，并且index>0，那么焦点就跳转到前一个Input里面，并清除内容
54
        if (index > 0) {
55
          newOtp[index - 1] = "";
56
          setOtp(newOtp);
57
          focusInput(index - 1);
58
        }
59
      }
60
      // 如果用户按左右箭头键，那么焦点就左右移动
61
    } else if (e.key === "ArrowLeft" && index > 0) {
62
      focusInput(index - 1);
63
    } else if (e.key === "ArrowRight" && index < length - 1) {
64
      focusInput(index + 1);
65
    }
66
  };
67
​
68
  return (
69
    <div style={{ display: "flex", gap: "8px" }}>
70
      {otp.map((value, index) => (
71
        <input
72
          type="text"
73
          value={value}
74
          onChange={(e) => handleChange(e, index)}
75
          maxLength={1}
76
          onKeyDown={(e) => handleKeyDown(e, index)}
77
          ref={(e) => (inputRefs.current[index] = e)}
78
          style={{ width: "50px", height: "50px", textAlign: "center" }}
79
        />
80
      ))}
81
    </div>
82
  );
83
};

可以看到，我按键操作情况。

③处理用户直接粘贴的事件，使用div上面的onPaste事件，几乎所有HTML的可交互元素，都有这个事件。

xxxxxxxxxx
125
1
// src/OPTInput.tsx
2
​
3
import React, { useRef, useState } from "react";
4
​
5
// 需要的输入框个数
6
interface OTPInputProps {
7
  length?: number;
8
}
9
​
10
export const OTPInput = ({ length = 6 }: OTPInputProps) => {
11
  // 使用数组来创建状态
12
  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
13
  // 使用 useRef 来操作具体的input框
14
  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
15
​
16
  const focusInput = (index: number) => {
17
    const input = inputRefs.current[index];
18
    if (input) input.focus();
19
  };
20
​
21
  // submit操作
22
  const onSubmit = (arr: string[]) => {
23
    alert("You have entered " + arr.join(""));
24
  };
25
​
26
  const handleChange = (
27
    e: React.ChangeEvent<HTMLInputElement>,
28
    index: number
29
  ) => {
30
    const val = e.target.value;
31
    if (!/^\d$/.test(val)) return;
32
​
33
    // 设置值，这里可以使用map方法来setOtp，但是后面需要用到新值，所以这里直接处理了
34
    const newOtp = [...otp];
35
    newOtp[index] = val;
36
    setOtp(newOtp);
37
​
38
    // 将焦点跳转到下一个input
39
    if (val && index < length - 1) {
40
      focusInput(index + 1);
41
    }
42
​
43
    // 如果每个输入框里面都有值，那么就可以执行submit或其他事件了
44
    if (newOtp.every((digit) => digit !== "")) {
45
      // you can submit or other operation
46
    }
47
  };
48
​
49
  const handleKeyDown = (
50
    e: React.KeyboardEvent<HTMLInputElement>,
51
    index: number
52
  ) => {
53
    if (e.key === "Backspace") {
54
      const newOtp = [...otp];
55
      // 如果当前输入框有值，就清空
56
      if (otp[index]) {
57
        newOtp[index] = "";
58
        setOtp(newOtp);
59
      } else {
60
        console.log("执行了");
61
        // 如果没有值，并且index>0，那么焦点就跳转到前一个Input里面
62
        if (index > 0) {
63
          newOtp[index - 1] = "";
64
          setOtp(newOtp);
65
          focusInput(index - 1);
66
        }
67
      }
68
      // 如果用户按左右箭头键，那么焦点就左右移动
69
    } else if (e.key === "ArrowLeft" && index > 0) {
70
      focusInput(index - 1);
71
    } else if (e.key === "ArrowRight" && index < length - 1) {
72
      focusInput(index + 1);
73
    }
74
  };
75
​
76
  const handlePaste = (e: ClipboardEvent) => {
77
    const pasteContent = e?.clipboardData?.getData("text") ?? "";
78
    // 检查粘贴内容是否是数字
79
    if (!/^\d+/.test(pasteContent)) return;
80
​
81
    // split之后，只取length长度，超过的不用管
82
    const pasteArr = pasteContent.split("").slice(0, length);
83
    const newOtp = [...otp];
84
​
85
    // 赋值
86
    pasteArr.forEach((char, i) => {
87
      newOtp[i] = char;
88
    });
89
    setOtp(newOtp);
90
​
91
    // 如果粘贴内容长度为length，那么焦点就在第length上面。如果小于length，那么就聚焦到length下一个输入框。
92
    const nextIndex =
93
      pasteArr.length >= length ? length - 1 : pasteArr.length + 1;
94
    focusInput(nextIndex);
95
​
96
    // 如果粘贴长度为length，那么就可以处理submit
97
    if (pasteArr.length === length) {
98
      // submit
99
      setTimeout(() => {
100
        onSubmit(newOtp);
101
      }, 500);
102
    }
103
​
104
    e.preventDefault();
105
  };
106
​
107
  return (
108
    <div
109
      style={{ display: "flex", gap: "8px", margin: "16px" }}
110
      onPaste={handlePaste}>
111
      {otp.map((value, index) => (
112
        <input
113
          key={index}
114
          type="text"
115
          value={value}
116
          onChange={(e) => handleChange(e, index)}
117
          maxLength={1}
118
          onKeyDown={(e) => handleKeyDown(e, index)}
119
          ref={(e) => (inputRefs.current[index] = e)}
120
          style={{ width: "50px", height: "50px", textAlign: "center" }}
121
        />
122
      ))}
123
    </div>
124
  );
125
};

效果：

4、Autocomplete Search Bar

需求：

• fetch github names when people type in
• store last 10 searched users in the local storage
• display the suggestions in the drop-down
• user friendly

1、先完成基本的搜索框UI，然后请求数据，同时添加防抖

xxxxxxxxxx
53
1
// src/Autocomplete.tsx
2
​
3
import { useRef, useState } from "react";
4
​
5
interface GithubUser {
6
  login: string;
7
  avatar_url: string;
8
}
9
​
10
const GITHUB_URL = `https://api.github.com/search/users?q=`;
11
​
12
export const Autocomplete = () => {
13
  const [query, setQuery] = useState("");
14
  const [results, setResults] = useState<GithubUser[]>([]);
15
​
16
  const timeoutRef = useRef<number | null>(null);
17
​
18
  const fetchUsers = async (q: string) => {
19
    const data = await fetch(GITHUB_URL + q);
20
    const res = await data.json();
21
    // 不需要展示所有结果，只需要展示10个。为什么呢？因为你看google搜索栏的提示，也是只展示10个，随着用户输入的越来越详细，出来的结果也就越准确了，所以根本没有必要展示很多个。
22
    setResults((res?.items ?? []).slice(0, 10) ?? []);
23
  };
24
​
25
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
26
    const value = e.target.value;
27
    setQuery(value);
28
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
29
​
30
    timeoutRef.current = setTimeout(() => {
31
      // 如果输入了三个及以上的字符，就请求接口，否则清空results
32
      if (value.length > 2) {
33
        fetchUsers(value);
34
      } else {
35
        setResults([]);
36
      }
37
    }, 500);
38
  };
39
​
40
  console.log({ results });
41
  return (
42
    <div className="autocomplete-container">
43
      <h2 className="autocomplete-title">Github username search</h2>
44
      <input
45
        type="text"
46
        className="autocomplete-input"
47
        placeholder="Search your username"
48
        value={query}
49
        onChange={handleChange}
50
      />
51
    </div>
52
  );
53
};

这样可以看到请求数据成功了，同时加上了防抖：

2、将results渲染到页面上，注意写法，results.length > 0 &&只有results有数据时，才展示。

xxxxxxxxxx
62
1
import { useRef, useState } from "react";
2
​
3
interface GithubUser {
4
  login: string;
5
  avatar_url: string;
6
}
7
​
8
const GITHUB_URL = `https://api.github.com/search/users?q=`;
9
​
10
export const Autocomplete = () => {
11
  const [query, setQuery] = useState("");
12
  const [results, setResults] = useState<GithubUser[]>([]);
13
​
14
  const timeoutRef = useRef<number | null>(null);
15
​
16
  const fetchUsers = async (q: string) => {
17
    const data = await fetch(GITHUB_URL + q);
18
    const res = await data.json();
19
    // 不需要展示所有结果，只需要展示10个。为什么呢？因为你看google搜索栏的提示，也是只展示10个，随着用户输入的越来越详细，出来的结果也就越准确了，所以根本没有必要展示很多个。
20
    setResults((res?.items ?? []).slice(0, 10) ?? []);
21
  };
22
​
23
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
24
    const value = e.target.value;
25
    setQuery(value);
26
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
27
​
28
    timeoutRef.current = setTimeout(() => {
29
      // 如果输入了三个及以上的字符，就请求接口，否则清空results
30
      if (value.length > 2) {
31
        fetchUsers(value);
32
      } else {
33
        setResults([]);
34
      }
35
    }, 500);
36
  };
37
​
38
  console.log({ results });
39
  return (
40
    <div className="autocomplete-container">
41
      <h2 className="autocomplete-title">Github username search</h2>
42
      <input
43
        type="text"
44
        className="autocomplete-input"
45
        placeholder="Search your username"
46
        value={query}
47
        onChange={handleChange}
48
      />
49
​
50
      {results.length > 0 && (
51
        <ul className="autocomplete-results">
52
          {results.map((user) => (
53
            <li key={user.login} className="autocomplete-result-item">
54
              <img src={user.avatar_url} alt="user avatar" className="avatar" />
55
              <span>{user.login}</span>
56
            </li>
57
          ))}
58
        </ul>
59
      )}
60
    </div>
61
  );
62
};

加一点样式就是这样的效果：

3、保存并展示之前搜索的最新的10个搜索词，点击这些搜索词可以直接搜索。

这10个搜索词是怎么来的呢？是用户点击了某一个搜索词之后，就添加到搜索词集里面。

代码里面主要就是saveToLocal，handleSelect，recentSearch赋初始值和渲染。这里没有使用useEffect，稍后会解释。

xxxxxxxxxx
116
1
import { useRef, useState } from "react";
2
​
3
interface GithubUser {
4
  login: string;
5
  avatar_url: string;
6
}
7
​
8
const GITHUB_URL = `https://api.github.com/search/users?q=`;
9
const RECENT_SEARCHES = "RECENT_SEARCHES";
10
​
11
export const Autocomplete = () => {
12
  const [query, setQuery] = useState("");
13
  const [results, setResults] = useState<GithubUser[]>([]);
14
  const [recentSearch, setRecentSearch] = useState<string[]>(() => {
15
    try {
16
      const item = localStorage.getItem(RECENT_SEARCHES);
17
      return item ? JSON.parse(item) : [];
18
    } catch {
19
      return [];
20
    }
21
  });
22
​
23
  const timeoutRef = useRef<number | null>(null);
24
​
25
  const fetchUsers = async (q: string) => {
26
    const data = await fetch(GITHUB_URL + q);
27
    const res = await data.json();
28
    // 不需要展示所有结果，只需要展示10个。为什么呢？因为你看google搜索栏的提示，也是只展示10个，随着用户输入的越来越详细，出来的结果也就越准确了，所以根本没有必要展示很多个。
29
    setResults((res?.items ?? []).slice(0, 10) ?? []);
30
  };
31
​
32
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
33
    const value = e.target.value;
34
    setQuery(value);
35
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
36
​
37
    timeoutRef.current = setTimeout(() => {
38
      // 如果输入了三个及以上的字符，就请求接口，否则清空results
39
      if (value.length > 2) {
40
        fetchUsers(value);
41
      } else {
42
        setResults([]);
43
      }
44
    }, 500);
45
  };
46
​
47
  const saveToLocal = (username: string) => {
48
    // 去重
49
    const updatedList = [
50
      username,
51
      ...recentSearch.filter((item) => item !== username),
52
    ];
53
    // 如果搜索词集里面超过10个，则pop
54
    if (updatedList.length > 10) {
55
      updatedList.pop();
56
    }
57
​
58
    // 赋值
59
    setRecentSearch(updatedList);
60
    // 存储到localStorage里面
61
    localStorage.setItem(RECENT_SEARCHES, JSON.stringify(updatedList));
62
  };
63
​
64
  const handleSelect = (username: string) => {
65
    // 将username添加到搜索框里面去
66
    setQuery(username);
67
    // 将results清空
68
    setResults([]);
69
    // 添加到搜索词集里面去
70
    saveToLocal(username);
71
  };
72
​
73
  console.log({ results });
74
  return (
75
    <div className="autocomplete-container">
76
      <h2 className="autocomplete-title">Github username search</h2>
77
      <input
78
        type="text"
79
        className="autocomplete-input"
80
        placeholder="Search your username"
81
        value={query}
82
        onChange={handleChange}
83
      />
84
​
85
      {results.length > 0 && (
86
        <ul className="autocomplete-results">
87
          {results.map((user) => (
88
            <li
89
              key={user.login}
90
              className="autocomplete-result-item"
91
              onClick={() => handleSelect(user.login)}>
92
              <img src={user.avatar_url} alt="user avatar" className="avatar" />
93
              <span>{user.login}</span>
94
            </li>
95
          ))}
96
        </ul>
97
      )}
98
​
99
      {recentSearch.length > 0 && (
100
        <div className="recent-searches">
101
          <h3 className="recent-title">Recent Searches</h3>
102
          <ul className="recent-list">
103
            {recentSearch.map((name) => (
104
              <li
105
                key={name}
106
                className="recent-item"
107
                onClick={() => handleSelect(name)}>
108
                {name}
109
              </li>
110
            ))}
111
          </ul>
112
        </div>
113
      )}
114
    </div>
115
  );
116
};

可以看到，点击了某一项之后，就会添加到recent searches里面去；点击recent searches里面的某一项，就会赋值到搜索输入框。

4、user friendly

主要是编写样式。

xxxxxxxxxx
61
1
.avatar {
2
  height: 40px;
3
  width: 40px;
4
}
5
​
6
.autocomplete-container {
7
  max-width: 400px;
8
  margin: 20px auto;
9
  padding: 16px;
10
  border: 1px solid gray;
11
  border-radius: 14px;
12
}
13
​
14
.autocomplete-input {
15
  min-width: 300px;
16
  width: 100%;
17
  box-sizing: border-box;
18
  border: 1px solid gray;
19
  padding: 10px;
20
  border-radius: 8px;
21
  position: relative;
22
  margin-bottom: 0;
23
}
24
​
25
.autocomplete-results {
26
  list-style: none;
27
  min-width: 300px;
28
  border-radius: 8px;
29
  position: absolute;
30
  bottom: 10;
31
  margin-top: 0;
32
  background-color: rgb(71, 68, 68);
33
  box-sizing: border-box;
34
  display: flex;
35
  flex-direction: column;
36
  gap: 6px;
37
  padding: 6px;
38
}
39
​
40
.autocomplete-result-item {
41
  box-sizing: border-box;
42
  padding: 5px;
43
  display: flex;
44
  justify-content: start;
45
  align-items: center;
46
  gap: 10px;
47
  cursor: pointer;
48
}
49
​
50
.autocomplete-result-item:hover {
51
  background-color: #3a3a3a;
52
}
53
​
54
.recent-list {
55
  list-style: none;
56
  display: flex;
57
  justify-content: start;
58
  align-items: center;
59
  flex-wrap: wrap;
60
  gap: 8px;
61
}

小结：

主要使用了受控组件、防抖、localStorage这些技术，还有一些产品设计方面的知识。

优化记录：

useEffect，在写获取recentsearch数据的时候，

报错：Error: Calling setState synchronously within an effect can trigger cascading renders。意思是在useEffect里面使用useState可能会触发无限渲染。

xxxxxxxxxx
6
1
useEffect(() => {
2
 const saved = localStorage.getItem("RECENT_SEARCHES");
3
 if (saved) {
4
   setRecentSearch(JSON.parse(saved));
5
 }
6
}, []);

所以需要直接使用useState懒初始化。

xxxxxxxxxx
8
1
const [recentSearch, setRecentSearch] = useState<string[]>(() => {
2
 try {
3
   const item = localStorage.getItem(RECENT_SEARCHES);
4
   return item ? JSON.parse(item) : [];
5
 } catch {
6
   return [];
7
 }
8
});

如果是获取数据，那么直接使用react query。

useEffect哪些场景使用呢：

推荐等级	场景（官方/社区公认的最佳用途）	典型代码示例	为什么只能/最好用 useEffect
5星	订阅和取消订阅外部系统（WebSocket、EventBus、第三方事件）	useEffect(() => { const id = socket.on('msg', handler); return () => socket.off(id); }, []);	必须在组件卸载时清理，否则内存泄漏
5星	手动操作第三方 DOM 库（Chart.js、Mapbox、Three.js、Tippy、Swiper 等）	useEffect(() => { chart.current = new Chart(ref.current, config); return () => chart.current?.destroy(); }, []);	这些库不是 React 管理的，必须自己创建/销毁
5星	监听原生浏览器事件或全局事件（resize、scroll、keydown、自定义事件）	useEffect(() => { window.addEventListener('resize', handler); return () => window.removeEventListener('resize', handler); }, []);	必须在组件卸载时移除监听
5星	发起接口请求（根据某个依赖变化）	useEffect(() => { if (userId) fetchUser(userId); }, [userId]);	数据获取是典型的“外部系统同步”
5星	与外部状态库同步（Zustand、Jotai、Valtio、Redux 外的全局 store）	useEffect(() => { return globalStore.subscribe(setState); }, []);	官方底层就是用 useSyncExternalStore，但很多老库还是要自己写 effect
4星	路由变化时滚动到顶部、记录页面访问、埋点统计	useEffect(() => { window.scrollTo(0, 0); logPageView(); }, [location.pathname]);	属于“与外部世界同步”
4星	根据某个值动态修改 document.title、favicon	useEffect(() => { document.title = ${count} 条未读; }, [count]);	修改全局对象
4星	配合 useLayoutEffect 不合适但又必须在渲染后立刻做的事（极少数）	极少见，一般改用 useLayoutEffect	只有当你明确知道要异步但又不能放 state 初始化时才用
3星	仅执行一次的初始化（但又必须在渲染后才能拿到 DOM 或某些值）	const didInit = useRef(false); useEffect(() => { if (!didInit.current) { didInit.current = true; init(); } }, []);	其实大多数都能改成 useState 懒初始化或 use()（React 19）

5、Build infinite nested comments system

这个就类似于reddit或者youtube里面的comments：

1、先准备数据：

xxxxxxxxxx
101
1
// src/data.ts
2
export interface CommentType {
3
  id: number;
4
  text: string;
5
  replies: CommentType[];
6
}
7
​
8
const initialComments: CommentType[] = [
9
  {
10
    id: 1,
11
    text: "这篇文章写得太好了！完全说出了我的心声",
12
    replies: [
13
      {
14
        id: 2,
15
        text: "同感！尤其是那段关于 React 19 新特性的分析，讲得太透彻了",
16
        replies: [
17
          {
18
            id: 3,
19
            text: "对啊，特别是 useOptimistic，感觉以后写点赞功能再也不用自己搞临时状态了",
20
            replies: [],
21
          },
22
          {
23
            id: 4,
24
            text: "楼上+1，我已经把项目里的所有 loading 状态都换成 useActionState 了，代码量直接少了一半",
25
            replies: [
26
              {
27
                id: 5,
28
                text: "求项目地址学习学习",
29
                replies: [
30
                  {
31
                    id: 6,
32
                    text: "我也想康康！",
33
                    replies: [],
34
                  },
35
                ],
36
              },
37
            ],
38
          },
39
        ],
40
      },
41
      {
42
        id: 7,
43
        text: "作者可以出个 React 19 的完整升级教程吗？",
44
        replies: [
45
          {
46
            id: 8,
47
            text: "已经在计划了，估计下周发～",
48
            replies: [
49
              {
50
                id: 9,
51
                text: "蹲一个！",
52
                replies: [],
53
              },
54
            ],
55
          },
56
        ],
57
      },
58
    ],
59
  },
60
  {
61
    id: 10,
62
    text: "有点不同意见，第5点关于 useEffect 的说法我不是很认同",
63
    replies: [
64
      {
65
        id: 11,
66
        text: "欢迎讨论！可以具体说说你觉得哪里有问题吗？",
67
        replies: [
68
          {
69
            id: 12,
70
            text: "我还是觉得某些初始化场景下 useEffect 更直观，比如需要先渲染拿到 DOM 再操作的情况",
71
            replies: [
72
              {
73
                id: 13,
74
                text: "这个场景 React 19 的 use() 可以完美替代了，推荐你试试～",
75
                replies: [],
76
              },
77
            ],
78
          },
79
        ],
80
      },
81
    ],
82
  },
83
  {
84
    id: 14,
85
    text: "一键三连了！",
86
    replies: [
87
      {
88
        id: 15,
89
        text: "已三连",
90
        replies: [],
91
      },
92
      {
93
        id: 16,
94
        text: "同三连",
95
        replies: [],
96
      },
97
    ],
98
  },
99
];
100
​
101
export default initialComments;

2、编写简单的CommentList组件，看一下效果：

xxxxxxxxxx
16
1
// src/CommentList.tsx
2
​
3
import type { CommentType } from "./data";
4
​
5
interface ICommentList {
6
  comments: CommentType[];
7
}
8
​
9
export const CommentList = ({ comments }: ICommentList) => {
10
  return (
11
    <div>
12
      {comments.length > 0 &&
13
        comments.map((comment) => <div key={comment.id}>{comment.text}</div>)}
14
    </div>
15
  );
16
};

可以看到，只渲染出了最外层的评论：

3、这一步就开始做CommentItem组件，调用自己来实现递归

xxxxxxxxxx
45
1
// src\CommentItem.tsx
2
​
3
import { useState } from "react";
4
import type { CommentType } from "./data";
5
​
6
export const CommentItem = ({ comment }: { comment: CommentType }) => {
7
  const [showReply, setShowReply] = useState(false);
8
  const [replyText, setReplyText] = useState("");
9
​
10
  const handleReplySubmit = () => {
11
    if (replyText.trim()) {
12
      // add to state logic，添加数据
13
​
14
      setReplyText("");
15
      setShowReply(false);
16
    }
17
  };
18
  return (
19
    <div className="comment">
20
      <p>{comment.text}</p>
21
      {/* 就是评论下面的一些按钮，这里只做了reply按钮，其实还有点赞、不喜欢、share等等按钮，看一下reddit里面的评论区就知道了 */}
22
      <button onClick={() => setShowReply((prev) => !prev)}>
23
        {showReply ? "Cancel" : "Reply"}
24
      </button>
25
      {/* 评论区 */}
26
      {showReply && (
27
        <div className="reply-form">
28
          <input
29
            type="text"
30
            className="reply-input"
31
            placeholder="Add your reply"
32
            value={replyText}
33
            onChange={(e) => setReplyText(e.target.value)}
34
          />
35
          <button onClick={handleReplySubmit}>Send</button>
36
        </div>
37
      )}
38
      {/* 递归处理 */}
39
      {comment.replies.length > 0 &&
40
        comment.replies.map((com) => (
41
          <CommentItem comment={com} key={com.id} />
42
        ))}
43
    </div>
44
  );
45
};

然后在CommentList里面引入：

xxxxxxxxxx
19
1
// src\CommentList.tsx
2
​
3
import { CommentItem } from "./CommentItem";
4
import type { CommentType } from "./data";
5
​
6
interface ICommentList {
7
  comments: CommentType[];
8
}
9
​
10
export const CommentList = ({ comments }: ICommentList) => {
11
  return (
12
    <div>
13
      {comments.length > 0 &&
14
        comments.map((comment) => (
15
          <CommentItem key={comment.id} comment={comment} />
16
        ))}
17
    </div>
18
  );
19
};

基本效果已经出来了：

就类似于下面这种效果：

4、这一步就是将评论数据添加到data中，同时状态要更新。怎么做呢？这里不使用真实数据库，而是直接采用uplift the state的方法，将用到的数据就放在App.tsx里面，使用子级更新父级数据的方法，来做。

xxxxxxxxxx
71
1
// App.tsx
2
import { useState } from "react";
3
import "./App.css";
4
import { CommentList } from "./CommentList";
5
import initialComments, { type CommentType } from "./data";
6
​
7
function App() {
8
  const [comments, setComments] = useState<CommentType[]>(initialComments);
9
  const [newComment, setNewComment] = useState("");
10
​
11
  // 这个递归的写法要理解，我大概率写不出来，即使写出来也很可能不是这样写
12
  const addReplyToTree = (
13
    tree: CommentType[],
14
    parentId: number,
15
    text: string
16
  ): CommentType[] => {
17
    return tree.map((comment) => {
18
      if (comment.id === parentId) {
19
        return {
20
          ...comment,
21
          replies: [...comment.replies, { id: Date.now(), text, replies: [] }],
22
        };
23
      }
24
      return {
25
        ...comment,
26
        replies: addReplyToTree(comment.replies, parentId, text),
27
      };
28
    });
29
  };
30
​
31
  const addReply = (parentId: number, text: string) => {
32
    const updatedList = addReplyToTree(comments, parentId, text);
33
    setComments(updatedList);
34
  };
35
​
36
  const addTopLevelComment = () => {
37
    if (newComment.trim()) {
38
      setComments((prev) => {
39
        return [
40
          ...prev,
41
          {
42
            id: Date.now(),
43
            text: newComment,
44
            replies: [],
45
          },
46
        ];
47
      });
48
      setNewComment("");
49
    }
50
  };
51
  return (
52
    <>
53
      <div className="app">
54
        <h2 className="comments-title">Nested Comments Problem</h2>
55
        {/* 并不总是回复别人的评论，我们也应该可以添加第一层级的评论 */}
56
        <div className="new-comment-form">
57
          <input
58
            type="text"
59
            value={newComment}
60
            onChange={(e) => setNewComment(e.target.value)}
61
            placeholder="Add new comment"
62
          />
63
          <button onClick={addTopLevelComment}>Add comment</button>
64
        </div>
65
      </div>
66
      <CommentList comments={comments} addReply={addReply} />
67
    </>
68
  );
69
}
70
​
71
export default App;