react 对输入做出反应与状态

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

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

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

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

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

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

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

javascript 复制代码
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;
html 复制代码
<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。

相关推荐
一个处女座的程序猿O(∩_∩)O1 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink4 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者6 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-6 小时前
验证码机制
前端·后端
燃先生._.7 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖8 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235248 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240259 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar9 小时前
纯前端实现更新检测
开发语言·前端·javascript