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元素，并将它们添加到ul和body中。

区别

声明式编程：
- 关注于结果。
- 代码更简洁、更易于理解。
- 通常更容易维护。
- 示例：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的状态变量，它存储了输入框中的文本值。我们还定义了两个事件处理函数：handleInputChange和handleSubmit。

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 作者：辰火流光

React基础 第十六章（用State响应输入）

声明式UI与命令式UI

声明式编程

命令式编程

区别

状态的视图表示

事件处理和状态更新

相关推荐

发表回复

React基础第十六章（用State响应输入）