react函数式组件（不含hooks）

发布： 2022年2月8日 • 经验百科

1.react中组件有两种，函数式组件及类式组件，下面将简单记录下函数式组件的学习

函数式组件的定义就如同他的名字一样，直接定义一个函数就行<!DOCTYPE ht<html lang="en">

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>函数式组件</title>
 9     <link rel="shortcut icon" href="../favicon.ico">
10 </head>
11 
12 <body>
13     <div class="test"></div>
14     <!-- 引入react -->
15     <script type="text/javascript" src="../js/react.development.js"></script>
16     <!-- 引入react-dom -->
17     <script type="text/javascript" src="../js/react-dom.development.js"></script>
18     <!-- 引入babel -->
19     <script type="text/javascript" src="../js/babel.min.js"></script>
20     <!-- 注意此处type为babel -->
21     <script type="text/babel">
22         //1.创建函数式组件
23         //首字母必须大写
24         function Demo() {
25             console.log(this)//此处的this是undefined，因为babel编译后开启了严格模式
26             //函数必须有返回值
27             return <h2>我是用函数定义的组件，使用于简单组件的定义</h2>
28         }
29         //2.渲染组件到页面
30         //render参数必须写组件标签·
31         ReactDOM.render(<Demo />, document.querySelector('.test'))
32         // ReactDOM.render(Demo(), document.querySelector('.test'))
33 
34         /*
35         执行了ReactDOM.render(<Demo />...之后，发生了什么
36         1.React解析组件标签，找到了Demo组件
37         2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM 转为真实DOM，随后呈现在页面上
38         */
39     </script>
40 
41 </body>
42 
43 </html>

需要注意的是组件的名字一定要以大写字母开头，否则在ReactDOM中调用时会被当成标签名并且报错（因为它不认识这个标签）

推荐这些技术文章：

虚拟DOM和render()函数

虚拟DOM和render()函数
虚拟DOM
vue在DOM之上增加一个抽象层来解决渲染效率的问题，这就是虚拟DOM。
虚拟DOM使用普通的JavaScript对象描述DOM元素，每一个虚拟节点都是一个VNode实例。vue在更新真实DOM前，会比较更新前后虚拟DOM结构中的有差异的部分，然后采用异步更新队列的方式将差异的部分更新到真实DOM中，从而减少了最终要在真实DOM上执行的操作次数，提高...

064_Js常用的五大事件 onclick nochanger onload onsubmit onblur

事件是电脑输入设备与页面交互的响应。

onload加载完成事件：onload事件是在页面被浏览器加载完成之后。自动触发的响应
onclick单击事件
onblur失去焦点事件
onchange内容发生改变事件经常用于select下拉列表选中后的内容发生改变时候触发
onsubmit表单提交事件经常用来在表单提交的时候验证所有表单项是否合法。

事件的注册又分为静态注册和动态...

class与style绑定

class与style绑定
绑定HTML class
对象语法
可以给v-bind:class传递一个对象，以动态切换class：
<style>
.active {
width:100px;
height:100px;
background:green;
}
</style>

<div id='ap...

Vue 之组件通信、页面刷新

主要记录在工作中对于父子组件之间的传值和刷新。知识点我总是模糊，记录下来方便自己查看，欢迎大家给建议。 👉我的个人博客👈

组件通信

&nbs...

五、模板语法

五、模板语法
模板引擎是一种可以让开发者把服务端数据填充到html网页中完成渲染效果的技术。它实现了把前端代码和服务端代码分离的作用，让项目中的业务逻辑代码和数据表现代码分离，让前端开发者和服务端开发者可以更好的完成协同开发。

静态网页：页面上的数据都是写死的，万年不变
动态网页：页面上的数据是从后端动态获取的（比如后端获取当前时间；后端获取数据库数据然后传递给前端页面）

Django框架中...

laydate 根据选择渲染日期控件

0、参考
layDay日期格式不合法报错解决
laydate.render报错：日期格式不合法
1、前言
在页面使用laydate，渲染控件后点击赋值，提示日期格式不合法
点击控件时，提示日期非法，在laydate.js找到 "t.elem.appendChild(n)," 将其注释掉
2、代码
<!DOCTYPE html>
<html lang="zh" xmlns:th=...

11 个有用的HTML 属性

1. multiple
此属性允许用户输入多个值。您可以将 multiple 属性与 <input> 标签和 <select> 标签一起使用。此布尔属性仅对电子邮件或文件输入类型有效。
在 <select> 标签中使用 multiple 属性

1234567

<label for="language">Select l...

Layui + TP 实现点击添加input表格，添加与赋值

index视图

{extend name="layout/common" /}

{block name="title"}人员管理{/block}

<!--<link href="https...

react学习---表单数据收集---非受控组件(输入框中的数据不受state管理)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_非受控组件</title>
</head>
<body>

<div ...

forms组件钩子函数、字段参数、字段类型、cookie与session简介

ajax结合sweetalert使用删除功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=de...

文章标题：react函数式组件（不含hooks）
文章链接：https://www.dianjilingqu.com/50813.html
本文章来源于网络，版权归原作者所有，如果本站文章侵犯了您的权益，请联系我们删除，联系邮箱：saisai#email.cn，感谢支持理解。

THE END