对 Big Div 能量的反应
React 使创建复杂的交互式应用程序成为一个相对轻松的过程。它通过偏离 Vanilla JavaScript 对命令式编程的使用来实现这一点,这需要开发人员告诉 JavaScript what 渲染和 how 渲染它。 React 利用声明式编程来处理底层渲染的方式,这让开发人员可以自由地专注于应用程序可以做什么。 不过,就像大多数好东西一样,React 的便利是有代价的,而且这个代价是迂腐的。
React 使创建复杂的交互式应用程序成为一个相对轻松的过程。它通过偏离 Vanilla JavaScript 对命令式编程的使用来实现这一点,这需要开发人员告诉 JavaScript what 渲染和 how 渲染它。 React 利用声明式编程来处理底层渲染的方式,这让开发人员可以自由地专注于应用程序可以做什么。
不过,就像大多数好东西一样,React 的便利是有代价的,而且这个代价是迂腐的。 React 要求开发人员遵守高句法标准,作为交换,它在 DOM 方面做了一些肮脏的工作。如果不符合其标准,React 将通过引发错误来抱怨。让我们考虑下面的例子:
function MyBrokenComponent() {
return (
<h1>Beware!</h1>
<p>I will return an error</p>
)
}
进入全屏模式 退出全屏模式
在这个例子中,我们告诉 React 当MyBrokenComponent
被其父组件渲染时返回一个h1
元素和一个p
元素。这将导致以下错误:
这个错误告诉我们 React 无法渲染具有多个父元素的组件。我们收到此错误是因为 React 要求将 return 语句包装在父元素中,而上面的 return 语句不满足此要求。让我们看另一个例子:
function MyOtherBrokenComponent() {
return (
<p>Try again!</p>
<p>I will also return an error</p>
)
}
进入全屏模式 退出全屏模式
此示例将导致与我们之前的示例相同的语法错误。虽然我们的 return 语句只包含了一种元素p
,但它仍然包含两个元素,因此不符合 React 的单亲标准。让我们检查一个不会返回错误的示例:
function MyWorkingComponent() {
return (
<div>
<h1>You're in the clear!</h1>
<p>I will not return an error</p>
</div>
)
}
进入全屏模式 退出全屏模式
将我们的无错误组件与之前的示例进行比较时,很明显MyWorkingComponent
具有其他组件所缺乏的东西:一个父元素。在这种情况下,与许多其他情况一样,该父元素是div
。将元素包装在一个父元素中使 React 能够理解我们的声明性语句,并且使用div
s 可以让开发人员轻松确保满足 React 的语法需求。
虽然div
s 是修复语法的有用工具,但它们并不是我们作为开发人员可以使用的唯一工具。让我们考虑以下两个示例:
function MyDivlessComponent() {
return <p>I will not return an error either!</p>
}
进入全屏模式 退出全屏模式
function MyHappyComponent() {
<div>
<h1>Divs</h1>
<h2>keep</h2>
<p>React</p>
<p>happy!</p>
</div>
}
进入全屏模式 退出全屏模式
我们的第一个组件MyDivlessComponent
有一个工作返回语句,但没有div
。怎么会这样?嗯,div
只是父组件的一个例子。遵循 React 严格的语法规则的关键是将 return 语句中的所有内容都包含在一个框或父元素中。在MyDivlessComponent
的情况下,我们的父元素是没有任何子元素的p
元素。另一方面,MyHappyComponent
包含 4 个子元素,因此需要一个父元素来包裹这些子元素。
了解新框架的来龙去脉可能很棘手,但div
s 为开发人员提供了对 React 最常见错误之一的简单修复。
更多推荐
所有评论(0)