一 初步了解React
需要理解的概念有:
- 什么是六何分析法?
- 利用六何分析法剖析 React
- 如何查看哪些项目是用 reactjs 进行开发的
- 学习 ReactJs 常用的 JavaScript 语法内容
1.什么是六何分析法?
5W1H(WWWWWH)分析法也叫六何分析法,是一种思考方法,也可以说是一种创造技法 (opens new window)。它在 1932 年,由美国政治学家拉斯维尔提出“5W 分析法 (opens new window)”,后经过人们的不断运用和总结,逐步形成了一套成熟的“5W+IH”模式。
5W+1H:是对选定的项目、工序或操作,都要从原因(何因 Why)、对象(何事 What)、地点(何地 Where)、时间(何时 When)、人员(何人 Who)、方法(何法 How)等六个方面提出问题进行思考。
所以,对于 reactjs 我们同样也可以利用六何分析法进行分析与了解。
2.利用六何分析法剖析 React
React 的官方网站:
- 英文官网: https://reactjs.org/(opens new window)
- 中文官网: https://react.docschina.org/
React 的特点:
- 声明式编码 https://www.cnblogs.com/guanghe/p/6600076.html
- 组件化编码
- React Native 编写原生应用
- 高效(优秀的 Diffing 算法)
React 高效的原因:
- 使用虚拟(virtual)DOM,不总是直接操作页面真实 DOM。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZlRaXbH-1622209765448)(http://qn.chinavanes.com/qiniu_picGo/image-20210526194406536.png)]
- DOM Diffing 算法,最小化页面重绘。
3.复习 JavaScript 语法
-
Javascript 的概念:原型、原型链
-
ES6 语法:变量、箭头函数、数组、对象、参数、赋值、异步、承诺机制、类
ES6常见数组操作
增删:push(后增) pop(前删) shift(后删) unshift(前增)
遍历:map fifter forEach reduceRight…
查找:find findindex
可以封装成哪些?函数 < 类 < 模块
-
判断 this 的指向
-
npm 包的管理
-
模块化开发的概念
-
…
二 React的HelloWorld
1.React 运行环境的依赖资源
React 运行环境的依赖资源下载(opens new window)
React 运行环境的依赖资源说明:(按照顺序放置)
- react.development.js(React 的核心库,当前版本为开发版本)
- react-dom.development.js(React 的扩展库,当前版本主要操作 DOM 渲染,因为现在开发环境是在 PC 网页端)
- babel.min.js(ES6 转 ES5,JSX 转 JS)
- prop-types.js(属性类型的检测与约束库)
2.引入 React
2.1 当引入text/javascript时
text/javascript只能支持的是js语法,它将不能支持react中的jsx语法
创建一个虚拟DOM
-
JS中的变量声明var,const,let
-
此处绝对不能用引号,因为引号设置后变成字符串,但是我们想要的是虚拟DOM对象
-
如果不设置引号,那么创建出来的h1是JSX对象,但是text/javascript是不支持JSX
2.2 当引入text/babel时, React 运行环境的依赖资源,渲染基本内容
需要将VDOM转成真实的DOM,并且插入到页面上
-
先要找到test的真实元素
-
寻找到元素以后,将虚拟DOM渲染到真实DOM上
渲染目标如图所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hello_react</title>
<!-- 引入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>
</head>
<body>
<!-- 准备一个空的DOM容器,后期react会往其中加入解析完的结构 -->
<div id="test"></div>
<!-- type="text/javascript"的时候编写的是Js,但React中主要处理的是JSX -->
<script type="text/babel">
/* 此处一定要写上babel,因为我们写的不是js是jsx要靠babel解析 */
/*
1.创建一个虚拟DOM
1)回顾var、const、let的JS变量声明方式
2)考虑'<h1>Hello,React!</h1>'与<h1>Hello,React!</h1>的差异
3)此处一定不要加引号,因为这是jsx中创建虚拟DOM的特殊语法
*/
const VDOM = <h1>Hello,React!</h1>;
console.log(VDOM