react基础到实战-尚硅谷（学习笔记一）

身为一只react小白，最近在找react的学习资料，在b站上搜到一套react的学习视频，感觉非常的详细，给大家分享一下我的学习笔记。并附上这套视频的学习地址
链接：https://www.bilibili.com/video/BV184411x7F9

基本认识

React特点

1. Declarative（声明式编码）
2. Component-Based（组件化编码）
3. Learn Once，Write Anywhere（支持客户端与服务器渲染）
4. 高效
5. 单向数据流

React高效的原因

1. 虚拟DOM，不总直接操作DOM
2. DOM Diff 算法，最小化页面重绘
   react使用了虚拟DOM渲染和DOM Diff算法，这两样有效的减少了前端对DOM的操作，也降低了局部刷新的次数。

基本使用

在测试React时，会引用以下的几种js：
react.development.js：是开发版
react.production.js：是压缩版
babel.js：用来把es6转es5，解析JXS语法代码转为纯JS语法代码的库
react-dom.js：提供操作DOM的react扩展库

步骤

1. 创建虚拟DOM元素对象

var vDom = <h1>Hello React!</h1>

2. 将虚拟DOM渲染到页面真实DOM容器中

ReactDOM.render(vDom,document.getElementById('test'))

JSX

两种创建虚拟DOM的方式，前者用的createElement()，后者用的jsx。

虚拟DOM

1. react提供了一些API创建一种特别的js对象

    var element = React.createElement('h1',{id:'myTitle'},'hello')

2. 虚拟DOM对象最终会被React转换为真实的DOM
3. 我们编码时基本只需要操作react的虚拟DOM相关数据，React会转换为真实DOM变化而更新界面

JSX

1. 全称 Javascript XML
2. react定义的一种类似于XML的JS扩展语法：XML+JS
3. 作用：用来创建react虚拟DOM（元素）对象
   1. var ele = <h1>Hello JSX!</h1>
   2. 不是字符串，所以不用加双引号，不是HTML/XML标签
   3. 有嵌套的标签时，整个都用括号包起来
   4. 最终会产生一个JS对象
4. 标签名或属性任意： HTML标签或其他标签
5. 基本语法规则
   1. 遇到<开头的代码，以标签的语法解析：html同名标签转换为html同名元素，其他标签需要特别解析
   2. 遇到以{开头的代码，以JS语法解析：标签中的js代码必须用{}包含
6. babel的作用
   1. 将JSX转换为纯js代码
   2. 用了JSX语法，就要在script标签上加上type=“text/babel”，声明需要babel来处理

渲染虚拟DOM（元素）

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

动态展示列表数据

react会自动遍历数组，如果想给每一个加标签

const names = ['jquery','2','3','4','5']

const ul = (
    <ul>
        {
            names.map((name,index) => <li key={index}>{name}<li>)
        }
    </ul>
)

每一个标签都需要有一个唯一的标识key，并且值不一样，所以需要有index。

模块与组件和模块化与组件化的理解

js模块

1. 向外提供特定功能的js程序，一般就是一个js文件
2. 为什么：js代码更多更复杂

组件

实现局部功能效果的代码集合

模块化

一种编码方式，模块化项目

组件化

一个组件一个组件的写，合起来以后的项目就是组件化项目

我的笔记可能和视频的相似度有些大，毕竟人家讲的对我这个小白来说，我都想记下来。都想跟着做一遍。咳咳。
下一篇文章地址：https://blog.csdn.net/AtalantaDavis/article/details/108245250