基本语法
基本语法
好的,够了高层次的想法。让我们看一些代码!
;
在 React 中,组件被定义为 JavaScript 函数。它们也可以使用 class 关键字进行定义,尽管这被认为是一种传统的替代方法,在现代 React 应用程序中不推荐使用。
通常,React 组件返回一个或多个 React 元素。
此组件, FriendlyGreeting ,创建一个描述段落的 React 元素,带有一些内置样式。为简单起见,在这里我们使用内联样式;我们将在接下来的课程中更多地讨论 React 丰富的样式生态系统。
我们渲染一个组件的方式与渲染一个 HTML 标记相同。而不是渲染 <div> 或 <h1> ,我们渲染 <FriendlyGreeting> 。
箭头函数 vs 传统函数
现代 JavaScript 支持两种不同的语法来编写函数。除了传统的方式,使用 function 关键字,你还可以使用"箭头函数"。如果你不熟悉箭头函数,请查看 JavaScript 入门课程“箭头函数”👀。
在定义 React 组件时应该使用哪种类型的函数?简短回答:没有关系。它们的工作方式完全相同。
大构件规则
创建组件时并没有太多规则,但有一个铁律:React 组件的首字母必须大写。这样 JSX 编译器就能区分我们是要渲染内置的 HTML 标签还是自定义的 React 组件。
例如,这里有两个 JSX 元素:
以下是将相同元素编译为 JavaScript 的内容:
一个 React 元素是我们想要创建的事物的描述。在某些情况下,我们想要创建一个 DOM 节点,比如一个 <h1> 或一个 <p> 。在其他情况下,我们想要创建一个组件实例。
我们传递给 React.createElement 的第一个参数是我们想要创建的东西的“类型”。对于第一个元素,它是一个字符串( "h1" )。对于第二个元素,它是一个函数!这是 FriendlyGreeting ,而不是 "FriendlyGreeting" 。
约定俗成的是对所有 React 组件名称使用 PascalCase
?,虽然从技术上讲只有第一个字母才真正 important。We could name it Friendlygreeting , 但更符合惯例的是使用 FriendlyGreeting 。
为什么要基于字符大小写?
乍一看,这条规则感觉有些多余。难道 React 不能判断我们是在渲染一个 HTML 标签还是一个组件吗?内置的 HTML 标签也就那么多,对吧?
遗憾的是,事情并不像看起来那么简单……