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。

相关推荐
NetX行者2 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder2 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder3 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806917 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说38 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉1 小时前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript