1. React介绍
- React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram(照片交友) 的网站。
- 库与框架的区别
- library(库):小而巧的库,只提供了特定的API;优点就是 船小好掉头,可以很方便的从一个库切换到另外的库;但是代码几乎不会改变;
- Framework(框架):大而全的是框架;框架提供了一整套的解决方案;所以,如果在项目中间,想切换到另外的框架,是比较困难的;
2. 前端三大主流框架
- Angular.js:出来较早的前端框架,学习曲线比较陡,NG1学起来比较麻烦,NG2 ~ NG5开始,进行了一系列的改革,也提供了组件化开发的概念;从NG2开始,也支持使用TS(TypeScript)进行编程;
- Vue.js:最火(关注的人比较多)的一门前端框架,它是中国人开发的,对我我们来说,文档要友好一些;
- React.js:最流行(用的人比较多)的一门框架,因为它的设计很优秀;
3. React与vue的对比
组件化方面
- 什么是模块化:是从代码**的角度来进行分析的;把一些可复用的代码,抽离为单个的模块;便于项目的维护和开发;
- 什么是组件化:** 是从 UI 界面的角度 来进行分析的;把一些可服用的UI元素,抽离为单独的组件;便于项目的维护和开发;
- 组件化的好处:**随着项目规模的增大,手里的组件越来越多;很方便就能把现有的组件,拼接为一个完整的页面;
- Vue是如何实现组件化的:** 通过
.vue
文件,来创建对应的组件;- template 结构
- script 行为
- style 样式
- React如何实现组件化:React中有组件化的概念,但是,并没有像vue这样的组件模板文件;React中,一切都是以JS来表现的;因此要学习React,JS要合格;ES6 和 ES7 (async 和 await) 要会用;
开发团队方面
- React是由FaceBook前端官方团队进行维护和更新的;因此,React的维护开发团队,技术实力比较雄厚;
- Vue:以 尤雨溪 为主导的开源小团队,进行相关的开发和维护;
社区方面
- 在社区方面,React由于诞生的较早,所以社区比较强大,一些常见的问题、坑、最优解决方案,文档、博客在社区中都是可以很方便就能找到的;
- Vue火起来的时间尚短,它的社区相对于React来说,要小一些,可能有的一些坑,没人踩过;
移动APP开发体验方面
- Vue,结合 Weex 这门技术,提供了 迁移到 移动端App开发的体验
- React,结合 ReactNative,也提供了无缝迁移到 移动App的开发体验
4. 为什么要学习React
- 和Angular1相比,React设计很优秀,一切基于JS并且实现了组件化开发的思想;
- 开发团队实力强悍,不必担心断更的情况;
- 社区强大,很多问题都能找到对应的解决方案;
- 提供了无缝转到 ReactNative 上的开发体验,让我们技术能力得到了拓展;增强了我们的核心竞争力;
- 很多企业中,前端项目的技术选型采用的是React.js;
5. React中几个核心的概念
虚拟DOM(Virtual Document Object Model)
+DOM的本质是什么:浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作 DOM 对象的API
- 什么是React中的虚拟DOM:是框架中的概念,是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套;
- **为什么要实现虚拟DOM(虚拟DOM的目的):**为了实现页面中, DOM 元素的高效更新
- DOM和虚拟DOM的区别:
- **DOM:**浏览器中,提供的概念;用JS对象,表示页面上的元素,并提供了操作元素的API;
- **虚拟DOM:**是框架中的概念;而是开发框架的程序员,手动用JS对象来模拟DOM元素和嵌套关系;
- 本质: 用JS对象,来模拟DOM元素和嵌套关系;
- 目的:就是为了实现页面元素的高效更新;
Diff算法
- **tree diff:**新旧两棵DOM树,逐层对比的过程,就是 Tree Diff; 当整颗DOM逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;
- **component diff:**在进行Tree Diff的时候,每一层中,组件级别的对比,叫做 Component Diff;
- 如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新;
- 如果对比前后,组件类型不同,则需要移除旧组件,创建新组件,并追加到页面上;
- **element diff:**在进行组件对比的时候,如果两个组件类型相同,则需要进行 元素级别的对比,这叫做 Element Diff;
6.React的基本使用
1). 导入相关js库文件(react.js, react-dom.js, babel.min.js)
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
2). 编码:
<div id="container"></div>
<script type="text/babel"> //必须声明babel
// 创建虚拟DOM元素
const vDom = <h1>Hello React</h1> // 千万不要加引号
// 渲染虚拟DOM到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
</script>
7.JSX的理解和使用
1). 理解
* 全称: JavaScript XML
* react定义的一种类似于XML的JS扩展语法: XML+JS
* 作用: 用来创建react虚拟DOM(元素)对象
2). 编码相关
* 在解析显示js数组时, 会自动遍历显示
* 把数据的数组转换为标签的数组:
var liArr = dataArr.map(function(item, index){
return <li key={index}>{item}</li>
})
3). 注意:
* 标签的class属性必须改为className属性
* 标签的style属性值必须为: {{color:'red', width:12}}
-
jsx 语法的本质:并不是直接把 jsx 渲染到页面上,而是 内部先转换成了 createElement 形式,再渲染的;
-
在 jsx 中混合写入 js 表达式:在 jsx 语法中,要把 JS代码写到
{ }
中- 渲染数字
- 渲染字符串
- 渲染布尔值
- 为属性绑定值
- 渲染jsx元素
- 渲染jsx元素数组
- 将普通字符串数组,转为jsx数组并渲染到页面上【两种方案】
-
在 jsx 中 写注释:推荐使用
{ /* 这是注释 */ }
-
在JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹;
-
在 jsx 语法中,标签必须 成对出现,如果是单标签,则必须自闭和!
当 编译引擎,在编译JSX代码的时候,如果遇到了
<
那么就把它当作 HTML代码去编译,如果遇到了{}
就把 花括号内部的代码当作 普通JS代码去编译;
8.React中创建组件
第1种 - 创建组件的方式
使用构造函数来创建组件**,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用
props
来接收;必须要向外return一个合法的JSX创建的虚拟DOM;
- 创建组件:
function Hello () {
// return null
return <div>Hello 组件</div>
}
- 为组件传递数据:
// 使用组件并 为组件传递 props 数据
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>
// 在构造函数中,使用 props 形参,接收外界 传递过来的数据
function Hello(props) {
// props.name = 'zs'
console.log(props)
// 结论:不论是 Vue 还是 React,组件中的 props 永远都是只读的;不能被重新赋值;
return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>
}
- 父组件向子组件传递数据
- 使用{…obj}属性扩散传递数据
- 将组件封装到单独的文件中
- 注意:组件的名称首字母必须是大写
- 在导入组件的时候,如何省略组件的
.jsx
后缀名:
// 打开 webpack.config.js ,并在导出的配置对象中,新增 如下节点:
resolve: {
extensions: ['.js', '.jsx', '.json'], // 表示,这几个文件的后缀名,可以省略不写
alias: {
'@': path.join(__dirname, './src')
}
}
- 在导入组件的时候,配置和使用
@
路径符号
第2种 - 创建组件的方式
使用 class 关键字来创建组件
ES6 中 class 关键字,是实现面向对象编程的新形式;
了解ES6中 class 关键字的使用
- class 中
constructor
的基本使用 - 实例属性和实例方法
- 静态属性和静态方法
- 使用
extends
关键字实现继承
基于class关键字创建组件
最基本的组件结构:
class 组件名称 extends React.Component {
render(){
return <div>这是 class 创建的组件</div>
}
}
9.两种创建组件方式的对比
- 用构造函数创建出来的组件:叫做“无状态组件”
- 用class关键字创建出来的组件:叫做“有状态组件”
有状态组件和无状态组件之间的本质区别就是:有无state属性!