React学习记录 ---第一章

第一章、基础入门

1.React特点

声明式和组件化编码，React Native 编写原生应用，虚拟DOM和 Diffing算法, 最小化页面重绘

2. 虚拟DOM的两种创建方式

虚拟DOM对象最终都会被React转换为真实的DOM

纯JS方式

浏览器直接运行的代码

const VDOM  = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React')

JSX方式

出现的原因：js创建虚拟DOM太繁琐了

const VDOM = (
    <h1 id="title">
        <span>Hello,React</span>
    </h1>
)

        以上jsx经过babel的翻译会翻译成用js创建的虚拟DOM的样子，所以可以说是上面那种方法的语法糖。

虚拟DOM

        ①本质是Object类型的对象；

        ②虚拟DOM身上的属性比真实DOM上的属性少，因为他是react内部在用；

        ③虚拟DOM最终会被React转化为真实DOM，呈现在页面上

渲染

        ReactDOM.render(virtualDOM, containerDOM)，将虚拟DOM元素渲染到页面中的真实容器DOM中显示。

virtualDOM：由上面两种方式创建的DOM对象

containerDOM：用来包含虚拟DOM的真实DOM对象，一般是一个div

//准备一个容器
<div id="test"></div>


//渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

3. React JSX（JavaScript XML）

        react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖,用来简化虚拟DOM，

type="text/babel", 声明需要babel来处理，因为浏览器无法直接解析JSX代码

介绍XML

早期用于存储和传输数据

<student>
    <name>zt</name>
    <age>12</age>
</student>

现在改用JSON存储:

"{
    "name":"zt",
    "age":12
}"

JS有内置的JSON方法： parse（将JSON字符串解析为JS数组和对象），

stringfy（将JS里的数组和对象转为JSON字符串）

JSX语法规则

1.定义虚拟DOM时，不要写引号

2.标签中混入JS表达式时要用{}

3.样式类名不要用class，要用classname

4.内联样式：要用style={{key:value}}的形式去写 

5.只有一个根标签，标签必须闭合

6.标签首字母

        （1）若小写字母开头，则将标签转为html中同名元素，若html中无该标签对应同名元素，则报错<good>

        （2）若大写字母开头，react就去渲染对应组件，若组件未定义就会报错<Good>

注意：下面VDOM写的不是html标签而是JSX

{{color:'white'}}外层的花括号表示要写JS表达式，内层花括号表示要写对象而不是函数、数组 

const myId = 'title';
const myData = 'hello';
const VDOM = (
    <h1 className="class1" id={myId}>
        <span style={{color:'white'}}>myData</span>
    </h1>
)

4.模块与组件

区别

模块是向外提供特定功能的js程序，一般是一个js文件，可以复用

组件用来实现局部功能效果的代码和资源的集合（html+css+js），可以复用

5.开发者工具推荐

安装成功之后，可以在如下图地方查看组件，十分方便

这个是react dev tools比较常用，另一个还没有用过，等之后用了再来补充

6.vscode常用插件推荐

Chinese(Simplified): 为vscode提供简体中文语言包

ESLint：代码质量检查

vscode-icons：为vscode的文件和文件夹提供图标，增强视觉效果

Simple React Snippets:为react开发提供代码片段，加快开发速度

Code Spell Checker :代码拼写检查器，帮助检查代码中的拼写错误

Color Hightlight:为Css和SCSS文件中的十六进制颜色代码提供高亮显示

GitLens ：在另一篇博客中有介绍git代码管理-CSDN博客

Import Cost:显示引入包的大小，帮助我们更好的优化代码

Todo Tree：提供TODO列表管理，方便追踪代办事项

会不定时更新后续章节！！！