React术语概述

我为自己整理了一些在React中使用的术语等内容。如果有任何误解的地方,请告诉我。

React有哪些功能可以实现?

用JavaScript几乎可以完成幻灯片、弹出窗口、倒计时、自动化输入金额、浏览器控制和Ajax等功能。

组件

组件是指在屏幕上显示的部件。
它并不是将所有要素都写在一个文件中以在一个页面上显示,而是将显示的要素细分为按钮组件、表单组件等,将其作为部件进行处理,然后统一显示的概念。

代码引自https://ja.legacy.reactjs.org/docs/components-and-props.html

类组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

web应用程序不仅仅在屏幕上显示内容,还可以异步保存数据,调用新图片并删除旧图片等,通常会涉及多个处理过程。

将这些多个处理过程合并在一起的方法就是函数。

在上述代码中,欢迎函数会在h1标签中显示“Hello,{传入参数中的名字}”。

基本形式是通过return返回要显示的元素(或者组件)。

通常情况下,return null;或return false;会返回一个空元素。

这已经成为主流做法。

响应式钩子

Hooks是可以在函数组件中添加各种功能的东西,它引发了React的流行。React Hooks具有多种功能。

JSX 是一种 JavaScript 语法扩展。

「JSX」是「JavaScript XML」的缩写。它是JavaScript的扩展功能,用于编写HTML标记。它将组件化(React将HTML/CSS/JavaScript捆绑在一起作为组件)。

使用在HTML文件中包围,则可以显示HTML标记。

碎片

React组件只能有一个父元素,因此可以用<> </>(Fragment)来包裹多个元素以进行显示。使用或

进行包裹将得到相同的结果。

function App() {
  return (
    <>
    <p>フラグメント</p>
    <p>表示できるかな</p>
    </>
  );
}

我会随时添加更多的内容。

广告
将在 10 秒后关闭
bannerAds