React基础 第十六章(用State响应输入)

在React中,状态管理是构建交云动应用的核心。本文将深入探讨如何使用State来响应用户输入,包括声明式UI的概念、状态的视图表示、以及如何通过事件处理函数来更新状态。我们将通过示例代码、技巧和注意事项来提供一个全面的指南。

声明式UI与命令式UI

声明式编程(Declarative Programming)和命令式编程(Imperative Programming)是两种不同的编程范式,它们描述了编写程序的两种不同方法。

声明式编程

声明式编程是一种编程范式,它关注于“做什么”(What to do),而非“怎么做”(How to do)。在声明式编程中,开发者只需指定程序的目标结果,而不需要编写一步一步达到那个结果的具体指令。声明式编程的一个典型例子是SQL和HTML。

示例
假设我们要在一个网页上显示一个列表,如果使用声明式的方法,我们可能会这样写:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

在上面的HTML代码中,我们没有指定如何构建列表,而是直接声明了列表应该是什么样子的。

命令式编程

命令式编程关注于“怎么做”,它要求开发者写出达到目标结果的详细步骤。这种编程范式更加关注于控制流程和状态的变化。大多数传统的编程语言,如C、Java和Python,都是命令式的。

示例
如果我们要用命令式的方法来创建同样的列表,我们可能需要这样的JavaScript代码:

const items = ['Item 1', 'Item 2', 'Item 3'];
const ul = document.createElement('ul');

items.forEach(itemText => {
  const li = document.createElement('li');
  li.textContent = itemText;
  ul.appendChild(li);
});

document.body.appendChild(ul);

在这个例子中,我们明确指定了创建列表的每一个步骤:创建ul元素,遍历数组创建li元素,并将它们添加到ulbody中。

区别

  • 声明式编程
    • 关注于结果。
    • 代码更简洁、更易于理解。
    • 通常更容易维护。
    • 示例:React、SQL、HTML。
  • 命令式编程
    • 关注于过程。
    • 需要详细描述如何达到结果。
    • 可能更灵活,但代码可能更复杂。
    • 示例:C、Java、JavaScript。

在React中,声明式编程体现在组件的状态管理上。你声明组件在不同状态下的渲染结果,而React负责根据状态的变化来更新DOM。这与直接操作DOM(命令式)形成对比,后者需要你手动管理DOM元素的创建、更新和删除。React的声明式范式使得状态变化和UI更新变得更加直观和易于管理。

技巧

  • 将UI视为状态的函数。
  • 使用组件状态来描述UI的不同视图。

示例

function Form() {
  const [isSubmitted, setIsSubmitted] = useState(false);

  return (
    <form>
      <input type="text" disabled={isSubmitted} />
      <button type="submit" disabled={isSubmitted}>Submit</button>
    </form>
  );
}

注意事项

  • 避免直接操作DOM元素,如使用document.getElementById
  • 使用状态和props来控制元素的显示和行为。

状态的视图表示

当我们谈论“状态的视图表示”时,我们指的是组件的状态如何决定组件的渲染输出。在React中,状态通常是通过useState这个Hook来创建和管理的。

技巧

  • 使用useState来创建状态变量,这些变量将存储组件的当前状态。
  • 根据用户的交互或其他事件来更新状态,这些更新将触发组件的重新渲染。

示例

const [status, setStatus] = useState('idle'); // 初始状态为'idle'

function handleSubmit() {
  setStatus('submitting'); // 用户提交表单时,状态变为'submitting'
  // ...提交表单逻辑
}

在这个示例中,我们有一个状态变量status,它可以有四个可能的值:’idle’、’submitting’、’success’、’error’。这个状态变量决定了表单的视图状态。例如,当状态为’submitting’时,我们可能会显示一个加载指示器,而当状态为’success’时,我们可能会显示一个成功消息。

注意事项

  • 不要为了每个小变化都创建新的状态变量。过多的状态变量会使状态管理变得复杂,难以追踪。
  • 试图使用尽可能少的状态变量来表示组件的所有可能视图。这样可以使状态逻辑更清晰,更容易维护。

事件处理和状态更新

事件处理指的是在React组件中响应用户的行为,如点击按钮、输入文本等。当这些事件发生时,我们可以定义函数来处理这些事件,并根据需要更新组件的状态。

技巧

  • 为用户的交互行为定义事件处理函数,例如,当用户在输入框中输入文本时,我们可以使用onChange事件处理函数来捕获这个行为。
  • 在事件处理函数中,我们通常会调用状态更新函数(如setInputValue)来更新组件的状态。

示例
在下面的表单组件示例中,我们定义了一个名为inputValue的状态变量,它存储了输入框中的文本值。我们还定义了两个事件处理函数:handleInputChangehandleSubmit

  • handleInputChange函数在输入框的内容发生变化时被调用。它使用event.target.value来获取输入框的最新值,并调用setInputValue来更新状态。
  • handleSubmit函数在表单提交时被调用。它首先调用event.preventDefault()来阻止表单的默认提交行为(这通常会导致页面重新加载),然后执行提交表单的逻辑。
function Form() {
  const [inputValue, setInputValue] = useState('');

  function handleInputChange(event) {
    setInputValue(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    // ...提交表单逻辑
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

注意事项

  • 使用event.preventDefault()来阻止表单的默认提交行为,这样我们可以自定义提交逻辑,而不是让浏览器自动处理。
  • 使用受控组件来确保输入框的值与组件的状态保持同步。

“受控组件” 是React中的一个术语,它指的是表单元素(如<input><textarea><select>)的值被React组件的状态控制的情况。在受控组件中,表单元素的值不是自动由DOM管理,而是由组件的状态(如inputValue)来管理。

在上面的示例中,<input>元素是一个受控组件,因为它的值是由inputValue状态来决定的。每当状态更新时,输入框的显示内容也会更新。同样,每当用户在输入框中输入时,handleInputChange事件处理函数会更新状态,从而保持状态和输入框的值同步。

使用受控组件的好处是:

  • 组件的状态和UI始终保持一致。
  • 更容易集成自定义逻辑,如验证用户输入。
  • 更容易在多个输入元素之间共享数据。

记住,保持状态的简洁性和一致性是避免bug和提高可维护性的重要步骤。

原文链接:https://juejin.cn/post/7341783797329379362 作者:辰火流光

(0)
上一篇 2024年3月4日 上午10:38
下一篇 2024年3月4日 上午10:49

相关推荐

发表回复

登录后才能评论