ReactJS 组件完整参考
组件是自由和可重用的代码片段。它们的用途与 JavaScript 函数相似。但是,工作隔离并通过渲染函数返回 HTML。
组件是 React 的核心构建块之一。换句话说,我们可以说,您将在 React 中开发的每个应用程序都由称为组件的部分组成。组件使构建 UI 的任务变得更加容易。您可以看到一个 UI 被分解为多个单独的部分,称为组件,并独立处理它们并将它们全部合并到一个父组件中,这将是您的最终 UI。
React 中的组件基本上返回一段 JSX 代码,它告诉应该在屏幕上呈现什么。在 React 中,我们主要有两种类型的组件:
- 功能组件:功能组件只是 JavaScript 函数。我们可以通过编写 JavaScript函数来为 React 创建一个函数式组件。这些函数可能会或可能不会接收数据作为参数,我们将在本教程后面讨论。下面的示例显示了 React 中的一个有效功能组件:
Javascript
function Democomponent()
{
return Welcome Message!
;
}
Javascript
class Democomponent extends React.Component
{
render(){
return Welcome Message!
;
}
}
- 类组件:类组件比功能组件稍微复杂一些。功能组件不知道程序中的其他组件,而类组件可以相互协作。我们可以将数据从一个类组件传递到其他类组件。我们可以使用 JavaScript ES6 类在 React 中创建基于类的组件。
下面的例子展示了 React 中一个有效的基于类的组件:
Javascript
class Democomponent extends React.Component
{
render(){
return Welcome Message!
;
}
}
完整参考:
- 反应JS |成分
- 反应JS |组件 – 第 2 组
- ReactJS 纯组件
- 反应JS |功能组件
- 反应JS |组件的生命周期
- React 中函数式组件和类组件的区别
- 展示组件与容器组件