WordCounterReact-DisplayWordFrequency

首先，需要安装React和React DOM。然后，创建一个WordCounter组件来计算输入文本中每个单词的频率，并显示最常用的单词列表。下面是一个简单的实现：

import React, { useState } from 'react';

function WordCounter() {
  const [input, setInput] = useState('');
  const [freqList, setFreqList] = useState([]);

  const countWords = () => {
    const words = input.split(/\s+/);
    const freq = {};
    for (let word of words) {
      if (!(word in freq)) {
        freq[word] = 0;
      }
      freq[word]++;
    }
    const sortedFreq = Object.entries(freq).sort((a, b) => b[1] - a[1]);
    setFreqList(sortedFreq);
  };

  return (
    <div>
      <h1>单词计数器</h1>
      <textarea value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={countWords}>计算频率</button>
      {freqList.length > 0 && (
        <table>
          <thead>
            <tr>
              <th>单词</th>
              <th>频率</th>
            </tr>
          </thead>
          <tbody>
            {freqList.map(([word, freq]) => (
              <tr key={word}>
                <td>{word}</td>
                <td>{freq}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default WordCounter;

在上面的代码中，我们定义了一个countWords函数，它将用户输入的文本（通过textarea元素）分割成单词，生成一个包含每个单词出现次数的频率对象。然后，我们使用Object.entries方法将频率对象转换为键值对数组，并按照单词出现频率进行排序。最后，我们更新freqList的状态，以便在表格中显示最常用的单词列表。

注意，在以上示例代码中，我们使用了useState和箭头函数。useState是React Hooks中的一种，允许我们在函数组件中管理本地状态。箭头函数被用作内联函数，用于简化React事件处理。

现在我们可以在App.js中导入和渲染WordCounter组件。当用户在textarea中