React第一次的笔记整理

1.简介：

1.用于动态构建用户界面的JavaScript库（只关注与视图）
2.由FaceBook开源
3.采用组件化模式，声明式编码，提高开发效率及组件复用率
4.在React Native中可以使用React语法进行移动端开发
5.使用虚拟DOM+优秀的diffing算法，尽量减少与真实DOM的交互

1.1.原生DOM的缺点

1.原生JavaScript操作DOM频繁，效率低(DOM-api操作UI)
2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
3.原生JavaScript没有组件化编码方案，代码复用率低

1.2React高效的原因

1.使用虚拟(virtual)DOM，不总是直接操作页面真实DOM
2.DOM Diffing算法，最小化页面重绘

1.3关于虚拟DOM

1.虚拟DOM就是一个普通的object对象(一般对象)
2.虚拟DOM比较"轻"，真实DOM比较重，因为虚拟DOM在React内部使用，无需真实DOM的那么多属性
3.虚拟DOM最终会被react转化为真实DOM，呈现在页面上

2.jsx

1.全称:JavaScript XML
2.react 定义的一种类似于XML的js扩展语法：js+XML本质是React.createElement(component,props,…children)方法的语法糖。
3.作用：用来简化创建虚拟DOM
3.1写法 var VDOM = <h1> Hello JSX! </h1>
3.2注意，他不是字符串，也不是html/xml标签
3.3注意，它最终产生的就是一个js对象

2.1.jsx语法规则

1.定义虚拟dom时，不要写引号
2.标签中混入js表达式时要用{}表达式与js语句的区别，2.1表达式：会产生一个值，可以放在任何需要值的地方① a    //一个变量②a+b   //一个算数表达式③demo(1)   //函数调用得到确认的值④arr.map()  //map函数获得一个新数组⑤json对象2.2语句：①if(){}②else{}③for(){}④switch(){}
3.样式的类名指定不要用class，要用className
4.内联样式，要用style={{key:value}}的形式去写，外层花括号，表示js的代码，内层花括号表示是一个对象
5.虚拟dom只能有一个根标签
6.标签必须闭合
7.标签首字母：①若小写字母开头，则将该标签转为html同名元素，若HTML中无该标签对应的同名元素，则报错②若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

2.2babel.js的作用

1.浏览器不能直接解析jsx代码，需要babel转译为纯js的代码才能运行
2.只要用了jsx,都要加上type=“text/babel”,声明需要babel来处理

3. 渲染虚拟DOM元素

1.语法:ReactDOM.render(virtualDOM,containerDOM);
2.作用:将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3.参数说明：a.参数1：纯js或jsx创建的虚拟dom对象b.参数2:用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

4.hello，React

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello,React</title>
</head>
<body><!-- 准备好一个容器 --><div id="test"></div><!-- 先引入react核心库 --><script src="./js/react.development.js"></script><!-- 才能引入react-dom，用于支持react操作DOM --><script src="./js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script src="./js/babel.min.js"></script><script type="text/babel">  //此处一定要写babel// 1.创建虚拟DOMconst VDOM = <h1> Hello,React </h1> //此处一定不要写引号，因为不是字符串而是虚拟dom// 2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

创建虚拟DOM不能有引号，并且只能有一个跟标签

如果多行：

   const VDOM = (<h1 id="title"><span> Hello,React </span> </h1>)//此处一定不要写引号，因为不是字符串而是虚拟dom

小案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript"  src="../js/react.development.js"></script><!-- 引入react-dom库，用于支持react操作dom --><script type="text/javascript"  src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript"  src="../js/babel.min.js"></script><script type="text/babel">// 模拟一些数据const data = ['Angular','React','Vue'];// 1.创建虚拟domconst VDOM = (<div style={{border:'1px solid #ccc',width:'300px'}}><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul>   </div>)// 2.将虚拟DOM渲染到页面ReactDOM.render(VDOM,document.getElementById('test'));</script>
</body>
</html>

虚拟DOM中多个列表，必须有不同的key值，否则报错

5.创建组件

组件分为函数式组件和类式组件

5.1函数式组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作dom --><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script src="../js/babel.min.js"></script><script type="text/babel">// 1.创建函数式组件function MyCompontent(){console.log(this); //undefined 是babel开启了严格模式return  <h2>我是用函数定义的组件(适用于简单组件) </h2>}// 2.渲染组件到页面ReactDOM.render(<MyCompontent/>,document.getElementById('test'));// 执行ReactDOM.render(<MyComponent/>,document.getElementById('test')) 之后// 1.React解析组件标签，找到了MyComponent组件// 2.发现组件是使用函数定义的，随后调用该函数// 将返回的虚拟DOM转为真实DOM，随后呈现在页面中</script></body>
</html>

5.2类式组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script src="../js/babel.min.js"></script><script type="text/babel">// 1.创建类式组件class MyComponent extends React.Component{render(){console.log('render中的this:',this);// render是放在哪里的？-——MyComponent的原型对象上，供实例使用// render中的this是谁 ———MyComponent的实例对象, <=> MyComponent组件实例对象return <h2>我是用类定义的组件，适用于复杂组件的定义</h2>}}// 2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'));// 执行ReactDOM.render(<MyComponent/>,document.getElementById('test')) 之后// 1.React解析组件标签，找到了MyComponent组件// 2.发现组件是使用类定义的，随后new出来该类的实例// 并通过该实例调用到原型上的render方法// 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中</script>
</body>
</html>

类：
1.类中的构造器不是必须写的，要对实例进行一些初始化的操作时，如添加指定属性时，才写
2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super必须要调用
3.类中所定义的方法，都是放在了类的原型对象上，供实例去使用

6.js中类的基本知识

6.1类的声明和使用

<script>// 创建一个Person类class Person{// 构造器方法constructor(name,age){// 构造器中的this指的谁，——类的实例对象this.name = name;this.age = age;}// 一般方法speak(){// speak方法放在了哪里？ ————放在了类的原型对象上，供实例使用// 通过Person实例调用speak时，speak中的this就是Person实例。console.log(`我叫${this.name}，我年龄${this.age}`);}}// 创建一个Person的实例对象const p1 = new Person('tom',19);const p2 = new Person('jerry',10);console.log(p1);console.log(p2);p1.speak();p2.speak();</script>

6.2类的继承

 <script>// 创建一个Person类class Person {// 构造器方法constructor(name, age) {// 构造器中的this指的谁，——类的实例对象this.name = name;this.age = age;}// 一般方法speak() {console.log(`我叫${this.name}，我年龄${this.age}`);}}// 创建一个Student类，继承于Person类class Student extends Person{constructor(name,age,grade){super(name,age);   //共有的属性通过super来构造，super写在最前面this.grade = grade;}// 重写从父类继承过来的方法speak(){console.log(`我叫${this.name}，我年龄${this.age},我读的是${this.grade}`);}study(){// 通过Student实例调用study时，study中的this就是Student的实例console.log('我很努力的学习');}}const s1 = new Student('小张',15,'高一');console.log(s1);s1.speak();  //我叫小张，我年龄15,我读的是高一s1.study();  //我很努力的学习</script>

6.3类中直接写赋值语句

<script>
class Car{constructor(name,price){this.name = name;this.price = price;this.wheel = 4;}// 类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a,值为1；a=1;// run = function(){//     console.log(this);//     console.log('跑起来');// }run = ()=>{//此时this为Car的实例对象，箭头函数this，会去寻找上下文中的内容console.log(this);console.log('跑起来');}}const c1 = new Car('帕拉梅拉',199);const c2 = new Car('捷豹F-type',299);console.log(c1);console.log(c2);c1.run();c2.run();</script>

由于箭头函数不绑定this，它会捕获其所在（即定义的位置）上下文的this值，作为自己的this值

6.4bind

<script>// bind改变this的指向，并返回一个新函数function demo(){console.log(this);}demo(); //window对象const x = demo.bind({a:1,b:2});x();  //{a:1,b:2}</script>

6.5类中局部开启严格模式

<script>class Person{constructor(name,age){this.name = name;this.age = age;}speak(){//  speak放在哪里，————Person的原型对象上,供实例使用// 通过Person实例调用speak，speak中的this就是Person实例console.log(this);  //Person对象}}const p1 = new Person('tom',18);p1.speak();  //通过实例调用speak方法const x = p1.speak;x();     //直接调用   //undefined// 类中局部开启了严格模式</script>

React第一次的笔记整理相关推荐

千锋 Vue 详细笔记整理
视频笔记是根据B站千锋涛哥 - SpringBoot+vue+前后端分离项目<锋迷商城>实战课-完结版进行整理的笔记可上 gitee仓库自取千锋 Vue 笔记整理一.vue ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
Deep Learning（深度学习）学习笔记整理系列三
Deep Learning(深度学习)学习笔记整理系列声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明 ...
Deep Learning（深度学习）学习笔记整理(二）
本文整理了网上几位大牛的博客,详细地讲解了CNN的基础结构与核心思想,欢迎交流 [1]Deep learning简介 [2]Deep Learning训练过程 [3]Deep Learning模型之: ...
jqGrid 学习笔记整理——基础篇
jqGrid 学习笔记整理--基础篇 jqGrid 实例中文版网址:http://blog.mn886.net/jqGrid/ 国外官网:http://www.trirand.com/blog/ 本人 ...
常用API类方法笔记整理1
常用API类方法笔记整理1 1.文档注释文档注释是功能级注释,用来说明一个类,一个方法或一个常量的,因此只在上述三个地方使用. 文档注释可以使用java自带的命令javadoc来对这个类生成手册. ...
javascript学习笔记整理
javascript从零到精通笔记整理 js写在哪 - css写在哪- 内联(行内):属性形式:style="样式属性:样式属性值"- 内部:style双标签,包裹css样式- 外 ...
【转载】Deep Learning（深度学习）学习笔记整理系列
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-0 ...
Python二级笔记整理
Python二级笔记整理 00讲 1. 单选: 2. 操作 3.教材 4.python3.5.2以上环境配置 Hello World 01讲 01章程序设计的基本方法导图程序设计语言编译和解 ...

React第一次的笔记整理

1.简介：

1.1.原生DOM的缺点

1.2React高效的原因

1.3关于虚拟DOM

2.jsx

2.1.jsx语法规则

2.2babel.js的作用

3. 渲染虚拟DOM元素

4.hello，React

5.创建组件

5.1函数式组件

5.2类式组件

6.js中类的基本知识

6.1类的声明和使用

6.2类的继承

6.3类中直接写赋值语句

6.4bind

6.5类中局部开启严格模式

React第一次的笔记整理相关推荐

最新文章

热门文章