根据React的方法进行编程意味着… (In accordance with the programming approach of React)

2 年 ago
宇, 华
1 minute

我经常有这样的感觉，React现在占据着JavaScript的核心地位。虽然像TypeScript这样的新的编程技术正在出现，但基本的思想还是React。
相比之下，传统的JavaScript编程思维与之不同，感觉就像是另一种语言。因此，如果在使用React的同时继续使用传统的JavaScript编程，会被说成“这不符合‘React的方法’（The React Way）。”
那么，究竟什么是“The React Way”呢？最近，我觉得我对这个意义有点理解，所以我想在这篇博客中总结一下。
此外，我假定以前的JavaScript代码引入了jQuery。

DOM元素是根据原始信息进行渲染的基础。

请看下图。

image
image

过去的 JavaScript 有一个 DOM 元素，它会提取该元素并修改其所拥有的文本和属性信息，然后重新渲染。

对于React来说，首先需要有用于渲染DOM元素的基础信息。根据这些信息，使用JSX语法生成DOM元素，并进行渲染。实际上更新的是基础信息而不是DOM元素。JSX允许在HTML中编写JavaScript变量和条件语句，使得HTML中嵌入了变量的描述。

過去的JavaScript語法可以稱為”imperative”，日語中稱為「命令式」，而React則被稱為”declarative”，日語中稱為「宣言式」，有時也可以這樣說。

比较实际的代码

在实际的编程场景中，”命令式”和”声明式”的代码方式虽然可以产生相同的渲染结果，但它们的代码差异很大。
需要明确的是，在React中也可以使用”命令式”的语法。”命令式”和”声明式”只是代码的表达方式，并不限制语言的规范。
因此，为了更清楚地展示区别，下面将展示在React中采用”命令式”和”声明式”两种方式的代码。

“必要”的方法

首先，我将展示一个”imperative”的代码。

export function NomalSelect() {
	//オプションの一覧を開く
  const openClick = (event) => {
    const element = event.currentTarget;//⓶
    if (element.classList.contains('open')) {//⓷
      element.classList.remove('open');
    } else {
      element.classList.add('open');
    }
  }
	return (
		<div onClick={openClick}>//⓵
			クリック
		</div>    
	);
}

在JSX中，使用DOM元素设置了事件监听器。
当事件发生时，openClick处理程序将被触发。
在②中，从事件对象中获取被点击的对象。
在以下代码中，使用JavaScript的add方法和remove方法来添加或移除类。

这个编程方式是一个典型的”命令式”方法，它获取DOM元素并直接操作它来进行重新渲染。

“陈述性”的方法

接下来，我将展示一个“陈述性”的代码示例。

export function NomalSelect() {
	// open状態を管理するstate
  const [isOpen, setIsOpen] = useState(false);//⓷
	//オプションの一覧を開く
  const openClick = () => {//⓸
    // isOpenの値をトグルする
    setIsOpen(!isOpen);
  }
	return (
		<div 
			onClick={openClick}//⓵
			className={`${isOpen ? 'open' : ''}`}//⓶
		>
			クリック
		</div>    
	);
}

用JSX在DOM元素上设置事件监听器是相同的。
在第二个部分使用了JSX语法和三元条件运算符来设置类名。换句话说，如果状态变量isOpen为true，则添加类名”open”，如果为false，则为空的类名。
为了进行这个判断，使用useState来设置状态变量isOpen。
以下处理更新了状态变量isOpen。重要的是要明确这里并不是在操作DOM元素。

总结

请问您是否能感受到“命令式”和“声明式”方法的区别呢？
最大的区别是是否存在状态变量isOpen。这是我们之前提到的“基础信息”。本次使用useState来管理状态变量，但在Gutenberg的区块中，它可能成为区块属性（attributes）。
在以前的JavaScript中，我们习惯于渲染DOM而没有“基础信息”，所以习惯这种方式的人可能会对“声明式”方法感到不适。我自己也是其中之一。
然而，“声明式”方法带来了很多好处。想象一下当“基础信息”发生变化时，需要重新渲染多个DOM元素的情况。
在传统的JavaScript中，我们需要提取出所有需要重新渲染的DOM元素，并选择适当的方法来更新属性等。
而在React中，通过JSX的定义，我们可以统一管理所有内容，这是最大的优势。这样，只需更新“基础信息”，所有内容都会重新渲染。在大型网站上，这将极大地提高可维护性。
然而，并不是所有情况下都适合使用“声明式”方法。在特定的用例中，特别是与第三方库或框架的集成时，可能需要直接进行DOM操作。
因此，在React中，我认为还是有必要记住“命令式”方法。

✖
广告
将在 10 秒后关闭
bannerAds