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>
</>
);
}
我会随时添加更多的内容。