react 对输入做出反应与状态

React 提供了一种操作 UI 的声明性方式。您无需直接操作 UI 的各个部分，而是描述组件可能处于的不同状态，并在它们之间切换以响应用户输入。

声明式 UI 与命令式 UI 的比较

在设计 UI 交互时，可能会考虑 UI 如何响应用户操作而更改。考虑一个允许用户提交答案的表单：

• 当您在表单中键入内容时，“提交”按钮将启用。
• 当您按“提交”时，表单和按钮都会被禁用，并出现一个微调器。
• 如果网络请求成功，表单将被隐藏，并显示“谢谢”消息。
• 如果网络请求失败，则会显示一条错误消息，并且表单将再次启用。

在命令式编程中，上述内容直接对应于如何实现交互。您必须编写确切的指令来操作 UI，具体取决于刚刚发生的事情。这是另一种思考方式：想象一下，在一辆车里骑在某人旁边，然后轮流告诉他们去哪里。

他们不知道你想去哪里，他们只是听从你的命令。（如果你把方向弄错了，你最终会来错地方！它之所以被称为命令式，是因为你必须“命令”每个元素，从微调器到按钮，告诉计算机如何更新 UI。

在这个命令式 UI 编程的例子中，表单是在没有 React 的情况下构建的。它只使用浏览器 DOM：

async function handleFormSubmit(e) {
  e.preventDefault();
  disable(textarea);
  disable(button);
  show(loadingMessage);
  hide(errorMessage);
  try {
    await submitForm(textarea.value);
    show(successMessage);
    hide(form);
  } catch (err) {
    show(errorMessage);
    errorMessage.textContent = err.message;
  } finally {
    hide(loadingMessage);
    enable(textarea);
    enable(button);
  }
}

function handleTextareaChange() {
  if (textarea.value.length === 0) {
    disable(button);
  } else {
    enable(button);
  }
}

function hide(el) {
  el.style.display = 'none';
}

function show(el) {
  el.style.display = '';
}

function enable(el) {
  el.disabled = false;
}

function disable(el) {
  el.disabled = true;
}

function submitForm(answer) {
  // Pretend it's hitting the network.
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (answer.toLowerCase() === 'istanbul') {
        resolve();
      } else {
        reject(new Error('Good guess but a wrong answer. Try again!'));
      }
    }, 1500);
  });
}

let form = document.getElementById('form');
let textarea = document.getElementById('textarea');
let button = document.getElementById('button');
let loadingMessage = document.getElementById('loading');
let errorMessage = document.getElementById('error');
let successMessage = document.getElementById('success');
form.onsubmit = handleFormSubmit;
textarea.oninput = handleTextareaChange;

<form id="form">
  <h2>City quiz</h2>
  <p>
    What city is located on two continents?
  </p>
  <textarea id="textarea"></textarea>
  <br />
  <button id="button" disabled>Submit</button>
  <p id="loading" style="display: none">Loading...</p>
  <p id="error" style="display: none; color: red;"></p>
</form>
<h1 id="success" style="display: none">That's right!</h1>

<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; margin: 20px; padding: 0; }
</style>

对于孤立的示例来说，操作 UI 已经足够好了，但在更复杂的系统中，管理起来会成倍增加。想象一下，更新一个充满不同表单的页面，就像这个一样。添加新的 UI 元素或新的交互需要仔细检查所有现有代码，以确保没有引入 bug（例如，忘记显示或隐藏某些内容）。

React 就是为了解决这个问题而构建的。

在 React 中，你不会直接操作 UI，这意味着你不会直接启用、禁用、显示或隐藏组件。取而代之的是，你声明了你想要显示的内容，React 会弄清楚如何更新 UI。