将 JavaScript 理解为具有比较和对比功能的 C++ 编码器

Question

在理解 <> </> 打字稿 html 时遇到麻烦 JavaScript 中的标签，当您使用它们进行面向对象的编程时，例如结构。

下面的 <> </> 空尖括号这样的表达式是什么意思？它是像 <T> <T/> 这样的通用标签吗？为什么 JavaScript 对象函数总是有一个像 html 标签这样的对象输入，而像 return () render () 这样的函数对象总是得到一个使用 html 标签的参数输入喜欢 function ( <tag> </tag> ) 吗？在 Java 或 C++ 中，您可以为函数提供输入，例如 function (p1, p2) { ...}，其中 (p1, p2) 是两个对象 inputs/attributes，可以在函数结构内部进行操作。所以我可以假设 <tag> </tag> 是 Java 脚本函数对象输入的习惯格式结构，其中这些标签用脚本语言定义了一个对象？

在 react js 在线教程的以下代码中，我看到一个新的 MouseTracker class 组件正在从 React.Component DOM 对象扩展。然后他们说 <Mouse/> 是 MouseTracker class 中的一个新组件，我们刚刚第一次定义时只使用 html 标签，例如 <Mouse/>，其中 Mouse 是一个 object/component？所以 Java /C++ 中的对象和 JavaScript 中的组件是相似的概念，您可以在其中使用 <Object/> 定义对象组件？我在下面发布了代码块：

class MouseTracker extends React.Component {
  render() {
    return (
      <>
        <h1>Move the mouse around!</h1>
        <Mouse />
      </>
    );
  }
}

我看到新的对象或组件 class 正在使用

function  { <tag attribute: 'x' > < App/> <tag/> }

其中 <App/> 是组件对象。然后 <tag ...> ...< tag/> 是一个函数 props 就像 class 我猜的组件属性？

我是 Java脚本和函数式编程领域的新手。我主要使用 C++（面向对象编程）编写代码。当我尝试通过比较和对比过程学习 JavaScript 以在 reatjs/nodejs 中构建我的 MVP 商业网站时，我试图理解 JavaScript 组件的使用（与 C++ class 对象对比）。例如， < Mouse/> 是一个组件。然后 class Mouse expends React.Component { } 还使用 constructor() 面向对象的功能定义了一个组件鼠标，就像在 Java/C++ 上所做的那样。然后在 Java 中，您将通过

创建一个新对象的实例

Object name = new Object (p1, p2);

如果Java脚本中有一个假想的鼠标class，你会喜欢

Mouse mouse= new Mouse (p1, p2);。然后你可以使用 mouse 作为实例。 JavaScript 中的 <Mouse/> 是否意味着 <Mouse/> 是一个 instance/component 对象，就像您在 Java 中使用 mouse 实例一样 Mouse mouse= new Mouse (p1, p2); ?

Answer 1

这些标签不是 javascript。它们是 'React' 特定的，等同于模拟 HTML 片段的 Fragment。从历史上看，在每个 React 组件中，所有内容都必须包含在单个根元素中或像这样的 React 组件（例如使用 < div >）：

const MyReactComponent = () => (
<div>
 <h1>my code</h1>
  <p>hello</p>
</div>
)

这是不允许的，会破坏反应编译器：它需要一个根包装器

const MyReactComponent = () => (
 <h1>my code</h1>
  <p>hello</p>
)

尽管您现在可以使用各种编辑器来执行此操作，但它有问题，vscode，linting 规则，proptypes/typescript 或其他通常不使用的：

const MyReactComponent = () => ([
 <h1 key="arrayitem1">my code</h1>,
  <p key="arrayitem1">hello</p
])

所以问题是 html 旧的 div 错误做法。大量不必要的 div 包装器。片段不是渲染元素，因此浏览器重绘和重新渲染的负担较小。这就是使用 <> 作为包装器的原因。

这就是开发人员使用它的原因：

const MyReactComponent = () => (
<>
 <h1>my code</h1>
  <p>hello</p>
</>
)

这真的等同于此。是同一个东西:

import {Fragment} from 'react'
const MyReactComponent = () => (
<Fragment>
 <h1>my code</h1>
  <p>hello</p>
</Fragment>
)

Answer 2

这不是 Javascript 或真实的 HTML。这是一个名为 JSX 的扩展。它允许您模拟添加 HTML 标签，但在幕后是所有 javascript 函数互相调用。由于您使用的是 React，我建议您尝试一下这个 compiler because it will give you a better idea on what React does with JSX tags, and this article，它解释了为什么 React 更喜欢使用 JSX。

将 JavaScript 理解为具有比较和对比功能的 C++ 编码器

Understanding JavaScript as a C++ coder with compare and contrast

javascript

functional-programming

typescript

reactjs