React基础 第九章(组件的纯粹性:构建可预测的界面)

在React中,保持组件的纯粹性是至关重要的。纯粹的组件类似于纯函数,在相同的输入下总是产生相同的输出,而不会产生副作用。本文将探讨如何保持组件的纯粹性,提供开发中的技巧、示例代码以及注意事项。

纯函数与组件

纯函数是函数式编程中的一个概念,它指的是给定相同的输入,总是返回相同的输出,并且不会改变任何外部状态。React组件应当遵循纯函数的原则。

技巧

  • 将组件视为一个函数,它的props是输入,渲染的JSX是输出。
  • 避免在组件内部改变任何外部状态或变量。

示例

jsx 复制代码
function Recipe({ drinkers }) {
  return (
    <ol>
      <li>Boil {drinkers} cups of water.</li>
      <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>
      <li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li>
    </ol>
  );
}

注意事项

  • 组件不应依赖于外部变量,如全局状态或直接操作DOM。
  • 组件的输出应仅依赖于其props和state。

正确代码

jsx 复制代码
function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

错误代码

jsx 复制代码
let guest = 0; // 错误:依赖外部变量
function Cup() {
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

严格模式与组件检测

React的严格模式(StrictMode)可以帮助开发者发现不纯的组件。

技巧

  • 使用<React.StrictMode>包裹应用或组件,以启用严格模式。
  • 利用严格模式在开发过程中发现和修复问题。

示例

jsx 复制代码
import React from 'react';

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

注意事项

  • 严格模式可能会导致组件渲染两次,但这仅发生在开发模式下。
  • 确保组件在严格模式下的行为与预期一致。

正确代码

jsx 复制代码
// 组件在严格模式下表现正常
function MyComponent() {
  // ...
}

错误代码

jsx 复制代码
// 组件在严格模式下表现异常,因为它依赖外部变量
let counter = 0;
function MyComponent() {
  counter++; // 错误:在组件内部改变外部变量
  // ...
}

局部变更与副作用管理

在组件内部对局部变量进行变更是允许的,但应避免副作用。

技巧

  • 在函数体内部创建新的局部变量和对象,可以自由地更改它们。
  • 使用useEffect来处理副作用,如API调用、订阅等。

示例

jsx 复制代码
function TeaGathering() {
  let cups = [];
  for (let i = 1; i <= 12; i++) {
    cups.push(<Cup key={i} guest={i} />);
  }
  return cups;
}

注意事项

  • 避免在组件外部声明变量,然后在组件内部更改它们。
  • 保持副作用与渲染逻辑分离。

正确代码

jsx 复制代码
// 局部变量在组件内部创建和修改,不影响外部状态
function TeaGathering() {
  let cups = [];
  // ...
}

错误代码

jsx 复制代码
let cups = []; // 错误:在组件外部声明变量
function TeaGathering() {
  cups.push(<Cup key={1} guest={1} />); // 错误:改变外部变量
  // ...
}

通过遵循上述技巧和注意事项,你可以确保你的React组件保持纯粹,从而构建出可预测且稳定的用户界面。纯粹的组件不仅易于测试和维护,而且还能提高React应用的性能。

相关推荐
独立开阀者_FwtCoder几秒前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者3 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder4 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder4 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806919 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说39 分钟前
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