5. 哈希表（Hash Table）

5. 哈希表（Hash Table）

示例场景：创建一个简单的字典组件，允许用户添加和查询单词及其定义。

import React, { useState } from "react";

function Dictionary() {
  const [dictionary, setDictionary] = useState({});
  const [word, setWord] = useState("");
  const [definition, setDefinition] = useState("");
  const [searchResult, setSearchResult] = useState("");

  const addWord = () => {
    setDictionary({ ...dictionary, [word]: definition });
    setWord("");
    setDefinition("");
  };

  const searchWord = () => {
    setSearchResult(dictionary[word] || "未找到该单词");
  };

  return (
    <div>
      <input
        type="text"
        placeholder="单词"
        value={word}
        onChange={(e) => setWord(e.target.value)}
      />
      <input
        type="text"
        placeholder="定义"
        value={definition}
        onChange={(e) => setDefinition(e.target.value)}
      />
      <button onClick={addWord}>添加单词</button>
      <button onClick={searchWord}>查询单词</button>
      <p>查询结果: {searchResult}</p>
    </div>
  );
}

export default Dictionary;

6. 树（Tree）

示例场景：创建一个简单的文件夹树组件，允许用户展开和折叠文件夹。

import React, { useState } from "react";

// 定义文件夹树的结构
const folderTree = [
  {
    name: "Documents",
    children: [{ name: "Work" }, { name: "Personal" }],
  },
  {
    name: "Pictures",
    children: [{ name: "Vacation" }, { name: "Family" }],
  },
];

function FolderTree({ folders }) {
  const [expandedFolders, setExpandedFolders] = useState([]);

  const toggleFolder = (folderName) => {
    if (expandedFolders.includes(folderName)) {
      setExpandedFolders(expandedFolders.filter((f) => f !== folderName));
    } else {
      setExpandedFolders([...expandedFolders, folderName]);
    }
  };

  const renderFolder = (folder) => (
    <div key={folder.name}>
      <div onClick={() => toggleFolder(folder.name)}>
        {expandedFolders.includes(folder.name) ? "▼" : "▶"} {folder.name}
      </div>
      {expandedFolders.includes(folder.name) && folder.children && (
        <div style={{ marginLeft: 20 }}>
          {folder.children.map(renderFolder)}
        </div>
      )}
    </div>
  );

  return <div>{folders.map(renderFolder)}</div>;
}

function App() {
  return (
    <div>
      <h1>文件夹树</h1>
      <FolderTree folders={folderTree} />
    </div>
  );
}

export default App;

7. 图（Graph）

示例场景：创建一个简单的图组件，允许用户添加节点和边，并显示图的结构。

import React, { useState } from "react";

function GraphComponent() {
  const [nodes, setNodes] = useState({});
  const [edges, setEdges] = useState([]);
  const [fromNode, setFromNode] = useState("");
  const [toNode, setToNode] = useState("");

  const addNode = (nodeName) => {
    if (!nodes[nodeName]) {
      setNodes({ ...nodes, [nodeName]: true });
    }
  };

  const addEdge = () => {
    if (nodes[fromNode] && nodes[toNode]) {
      setEdges([...edges, { from: fromNode, to: toNode }]);
    }
  };

  const renderGraph = () => {
    return (
      <div>
        {Object.keys(nodes).map((node) => (
          <div key={node}>
            {node} →{" "}
            {edges
              .filter((edge) => edge.from === node)
              .map((edge) => edge.to)
              .join(", ")}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div>
      <input
        type="text"
        placeholder="节点名称"
        onChange={(e) => addNode(e.target.value)}
      />
      <input
        type="text"
        placeholder="起点节点"
        value={fromNode}
        onChange={(e) => setFromNode(e.target.value)}
      />
      <input
        type="text"
        placeholder="终点节点"
        value={toNode}
        onChange={(e) => setToNode(e.target.value)}
      />
      <button onClick={addEdge}>添加边</button>
      <h2>图结构:</h2>
      {renderGraph()}
    </div>
  );
}

export default GraphComponent;

8. 搜索算法（深度优先搜索 DFS）

示例场景：在一个树结构中查找某个节点。

import React, { useState } from "react";

function dfs(tree, target) {
  const stack = [tree];
  while (stack.length > 0) {
    const node = stack.pop();
    if (node.name === target) {
      return true;
    }
    if (node.children) {
      for (let i = node.children.length - 1; i >= 0; i--) {
        stack.push(node.children[i]);
      }
    }
  }
  return false;
}

function TreeSearch() {
  const [target, setTarget] = useState("");
  const [result, setResult] = useState("");

  const search = () => {
    const found = dfs(folderTree[0], target);
    setResult(found ? "找到节点" : "未找到节点");
  };

  return (
    <div>
      <input
        type="text"
        placeholder="目标节点"
        value={target}
        onChange={(e) => setTarget(e.target.value)}
      />
      <button onClick={search}>搜索</button>
      <p>{result}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>树搜索</h1>
      <TreeSearch />
    </div>
  );
}

export default App;

9. 动态规划（Dynamic Programming）

示例场景：计算斐波那契数列的第 n 项。

import React, { useState } from "react";

function fibonacci(n) {
  const dp = [0, 1];
  for (let i = 2; i <= n; i++) {
    dp[i] = dp[i - 1] + dp[i - 2];
  }
  return dp[n];
}

function FibonacciCalculator() {
  const [n, setN] = useState("");
  const [result, setResult] = useState("");

  const calculate = () => {
    const num = parseInt(n, 10);
    if (!isNaN(num)) {
      setResult(fibonacci(num).toString());
    }
  };

  return (
    <div>
      <input
        type="number"
        placeholder="输入n"
        value={n}
        onChange={(e) => setN(e.target.value)}
      />
      <button onClick={calculate}>计算</button>
      <p>结果: {result}</p>
    </div>
  );
}

export default FibonacciCalculator;

这些示例展示了如何在 React 中使用链表、哈希表、树、图、搜索算法和动态规划。希望这些示例能帮助你更好地理解和应用这些数据结构和算法。如果有任何问题或需要进一步的帮助，请随时告诉我！