![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
react入门学习
sheerhr
这个作者很懒,什么都没留下…
展开
-
19.为什么不建议使用index作为key
react使用的diff算法每次都会拿新的虚拟dom去跟旧的虚拟dom对比,发现哪里有变化,就生成真实的dom,而不会渲染整个页面。详情请看下边这篇文章。https://blog.csdn.net/z591102/article/details/106682298转载 2021-03-12 15:11:47 · 128 阅读 · 0 评论 -
1.react入门
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <!-- react核心库 --> <script type="text/javascript" src="package/react.development.js"></script> <原创 2020-12-17 09:10:37 · 106 阅读 · 0 评论 -
2.创建虚拟dom的两种方式
使用jsx语法创建虚拟dom<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <!-- react核心库 --> <script type="text/javascript" src="package/react.development.js"></scri原创 2020-12-17 09:16:17 · 172 阅读 · 0 评论 -
3.真实dom与虚拟dom的区别
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <!-- react核心库 --> <script type="text/javascript" src="package/react.development.js"></script> <原创 2020-12-17 09:38:33 · 385 阅读 · 0 评论 -
4.jsx语法有关规则
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title{ background-color: orange; width: 200px; } </style></head><body> <!-- 准备好一个原创 2020-12-17 10:28:34 · 287 阅读 · 1 评论 -
5.jsx练习
jsx里边不能写程序语句,只能写一些表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px;原创 2020-12-17 13:01:22 · 104 阅读 · 0 评论 -
6.组件的两种创建方式
函数式组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </s原创 2020-12-18 13:54:20 · 84 阅读 · 0 评论 -
7.state状态
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>state</title> <style> .title { background-color: orange; width: 200px; } </style>原创 2020-12-18 15:58:25 · 207 阅读 · 0 评论 -
8.props的简单使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g原创 2020-12-21 09:13:30 · 75 阅读 · 0 评论 -
9.批量传递props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g原创 2020-12-21 11:10:01 · 207 阅读 · 0 评论 -
10.props属性的校验
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g原创 2020-12-21 13:59:31 · 169 阅读 · 0 评论 -
11.函数式组件中的props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g原创 2020-12-21 14:30:03 · 762 阅读 · 0 评论 -
12.字符串形式的ref
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g原创 2020-12-22 09:42:34 · 234 阅读 · 0 评论 -
13.回调形式的ref
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g原创 2020-12-22 09:55:58 · 188 阅读 · 0 评论 -
14.内联形式的ref与类中定义的ref
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g原创 2020-12-22 10:34:55 · 85 阅读 · 0 评论 -
15.creatRef
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g原创 2020-12-22 10:59:06 · 68 阅读 · 0 评论 -
16.事件处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g原创 2020-12-23 09:25:21 · 71 阅读 · 0 评论 -
17.受控组件与非受控组件
非受控组件在 HTML 中,表单元素(如、 和 )通常自己维护 state,并根据用户输入进行更新。像这样自己维护状态的组件称为非受控组件,简单理解就是不受到react中的state的约束的组件 <script type="text/babel"> class Login extends React.Component { saveUsername = (c) => { this.username = c;原创 2020-12-23 10:47:21 · 140 阅读 · 0 评论 -
18.高阶函数与函数柯里化
接着上边的例子,对表单中的数据统一使用saveFormdata来处理 <script type="text/babel"> class Login extends React.Component { state = { username:'', password:'', } saveFromdata = (param) => {原创 2020-12-23 11:31:17 · 92 阅读 · 0 评论