React基础第十一章（State渲染与提交）

React的渲染和提交过程是组件生命周期中至关重要的部分。本文将探讨React如何渲染组件，以及如何优化这一过程。我们将提供开发中的技巧和示例代码，并指出一些常见的陷阱及其解决方案。

触发渲染

React组件的渲染可以由两种情况触发：组件的初次渲染和组件状态的更新。

技巧：

使用createRoot和render方法来初始化组件的渲染。
使用状态更新函数（如setState或useState的setter）来触发组件的重新渲染。

示例：初次渲染

import { createRoot } from 'react-dom/client';
import Image from './Image.js';

const root = createRoot(document.getElementById('root'));
root.render(<Image/>);

注意事项：

确保在组件的生命周期中正确地触发渲染。
避免在不必要的时候触发渲染，以提高应用性能。

正确代码：

const [count, setCount] = useState(0);
// 触发渲染
setCount(count + 1);

错误代码：

// 错误：在渲染函数中直接修改状态
count++;

当在React组件的渲染函数中直接修改状态（如使用count++），这会导致几个问题：

状态不一致：React的状态更新是异步的，直接修改状态不会立即触发组件的重新渲染，这可能导致组件的渲染输出和内部状态不一致。
违反React模式：React强调不可变性，状态应该通过setState或状态更新函数来更新，以便React可以跟踪状态的变化并相应地更新组件。
无法触发渲染：直接修改状态不会通知React状态已经改变，因此不会触发组件的重新渲染。这意味着即使状态值改变了，用户界面也不会更新以反映这一变化。
性能问题：即使在某些情况下直接修改状态似乎触发了更新，这种做法也可能导致性能问题，因为React无法优化不遵循其模式的组件。
维护困难：这种做法使得代码难以维护和理解，因为它违背了React的设计原则和最佳实践。

React渲染组件

React渲染组件是确定屏幕上显示内容的过程。这个过程是递归的，React会渲染组件树中的所有组件。

技巧：

确保组件的渲染函数是纯函数，即给定相同的props和state，总是返回相同的结果。
使用React的严格模式来发现潜在的渲染问题。

示例：

function Gallery() {
  return (
    <section>
      <h1>Inspirational Sculptures</h1>
      <Image />
      <Image />
      <Image />
    </section>
  );
}

注意事项：

组件的渲染不应该产生副作用。
避免在渲染过程中修改外部变量或状态。

正确代码：

function Image() {
  return <img src="https://i.imgur.com/ZF6s192.jpg" alt="Sculpture" />;
}

错误代码：

// 错误：渲染函数中有副作用
function Image() {
  const [likes, setLikes] = useState(0);
  setLikes(likes + 1); // 错误：状态更新不应在渲染中进行
  return <img src="https://i.imgur.com/ZF6s192.jpg" alt="Sculpture" />;
}

渲染函数中包含副作用是一个常见错误，这可能会导致多种问题：

无限渲染循环：在渲染函数中更新状态（如setLikes(likes + 1)）会导致组件重新渲染，这将再次触发状态更新，从而形成一个无限循环。这不仅会导致浏览器挂起或崩溃，还会导致应用性能严重下降。
不可预测的UI行为：由于React的批量更新和异步渲染特性，状态更新可能不会立即反映在UI上。这会导致用户界面出现不一致或者延迟更新的情况。
违反React的渲染原则：React期望渲染函数是纯净的，即不产生副作用，只依赖于props和state来决定返回的结果。在渲染函数中进行状态更新违反了这一原则，使得组件的行为变得难以预测和理解。

为了避免这些问题，应该将状态更新逻辑放在事件处理器或生命周期方法中，而不是直接在渲染函数中进行。例如，可以在用户交互或组件挂载时更新状态。

改进的代码：

function Image({ src, alt }) {
  const [likes, setLikes] = useState(0);

  const handleLike = () => {
    setLikes(likes + 1); // 正确：在事件处理函数中更新状态
  };

  return (
    <div>
      <img src={src} alt={alt} />
      <button onClick={handleLike}>Like</button>
    </div>
  );
}

在这个改进的代码示例中，setLikes被放在了一个事件处理函数handleLike中，这样就不会在渲染过程中触发状态更新，而是在用户点击“Like”按钮时触发，这是React推荐的做法。

提交到DOM

当组件的状态或props发生变化时，React会重新渲染组件，并生成新的虚拟DOM（Virtual DOM）。然后，React会将新的虚拟DOM与上一次渲染的虚拟DOM进行比较，这个过程称为“对比”（Diffing）。React通过这种方式来确定实际DOM需要进行哪些更新。

技巧：

仅在必要时更新DOM：React会智能地判断何时需要更新DOM。如果组件的输出与上次渲染相同，React不会进行不必要的DOM更新，这有助于提高性能。
使用key属性：当渲染列表元素时，为每个列表项分配一个唯一的key属性可以帮助React更快地识别哪些元素发生了变化，从而减少不必要的元素重渲染。

示例：

function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

注意事项：

维护状态与DOM更新分离：不应该依赖DOM的更新来维护组件的状态。React的状态管理应该是独立于DOM的，这样可以避免复杂的依赖和潜在的错误。
保持用户输入：在组件重渲染时，应该确保用户的输入不会丢失。例如，如果你有一个受控组件（如<input>），你应该确保在渲染过程中保持其值。

正确代码：

// React会智能地更新DOM
<h1>{time}</h1>

错误代码：

// 错误：不恰当的DOM操作可能导致输入丢失
<input value={time} onChange={...} />

这段代码展示了一个受控的<input>元素，它的值被设置为time变量。如果time是由定时器或其他组件状态更新的，那么每次time更新时，<input>的值都会被重置，这可能会导致用户在输入时遇到问题，因为他们的输入可能会被意外覆盖。

记住，渲染应该是纯粹的计算，而提交是将这些计算结果应用到DOM上的步骤。正确地管理这两个过程对于构建高性能的React应用至关重要。

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

React基础 第十一章（State渲染与提交）

触发渲染

React渲染组件

提交到DOM

相关推荐

发表回复

React基础第十一章（State渲染与提交）