React.js总结（1）

React.js

1.React简介

• React起源于FaceBook的内部项目，因为该公司对市场上所有的avascript MVC框架有不满意，就决定自己写一套，用来架设Instagram(照片交友)的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

• Angula 2009年由谷歌 MVC不支持组件化开发。

• 由于Reactde 设计思想独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以越来越多的人开始关注和使用，认为它可能是将来web开发的主流工具。

• 清楚两个概念：

  • library(库）：小儿巧的库，只提供了特定的API；优点就是船小好调头，可以很方便的从一个库切换到另外的库；但是代码几乎不会改变；

  • Framework（框架）：大而全的是框架；框架只提供了一整套的解决方案；所以，如果在项目中间，想切换到另外的框架，是比较困难的；

2.前端三大主流框架

• Angular.js : 出来比较早的前端框架，学习曲线比较陡峭，NG1学习起来比较麻烦。NG2~NG5开始，进行了一系列的改革，也提供了组件化开发的概念；从NG2开始，也支持使用TypeScript进行编程；
• Vue.js: 最火的一门前端框架，它是中国人开发的，对我们来说，文档要友好一些；
• React.js:最流行的一门框架，因为它的设计很优秀；

3.React与Vue的对比

组件化方面

1. 什么是模块化： 是从 代码 的角度来进行分析的；把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发；
2. 什么是组件化：是从 UI界面 的角度来进行分析的；把一些可复用的UI元素，抽离为单独的组件；便于项目的维护和开发；
3. 组件化的好处： 随着项目规模的增大，手里的组件越来越多；很方便就能把现有的组件，拼接为一个完整的页面；
4. Vue是如何实现组件化的： 通过 .vue 文件，来创建对应的组件；

• template 结构

• script 行为

• style 样式

5. React如何实现组件化 ：大家注意，React中有组件化的概念，但是，并没有像vue这样的组件模板文件；React中，一切都是以JS来表现的；因此要学习React,JS要合格；ES6和ES7(async和await）要会用；

开发团队方面

• React是由FaceBook前端官方团队进行维护和更新的；因此React的维护开发团队，技术实力雄厚；

• Vue：第一版，主要有作者尤雨溪专门进行维护的，当Vue更新到2.x版本后，也有了一个以尤雨溪为主导的开源小团队，进行相关的开发和维护；

社区方面

• 在社区方面，React由于诞生比较早，所以社区比较强大，一些常见的问题、坑、最优解决方案、文档、博客在社区中都是可以很方便就能找到的；
• Vue是近两年才火起来的，所以，它的社区相对于React来说，要小一些，可能有的一些坑，没人踩过；

移动APP开发体验方面

• Vue ,结合Weex这门技术，提供了迁移到移动端App开发的体验（Weex，目前只是一个小的玩具，并没有很成功的大案例；）
• React,结合ReactNative,也提供了无缝迁移待移动App的开发体验（RN用的最多，也是最火最流行的）；

4.为什么要学习React

1. 和Angular1相比，React设计很优秀，一切基于JS 并且实现了组件化开发思想；
2. 开发团队强悍，不必担心断更的情况；
3. 社区强大，很多问题都能找到对应的解决方案；
4. 提供了无缝转到ReactNative上的开发体验，让我们技术能力得到了拓展；增强了我们的核心竞争力；

5.React中几个核心的概念

虚拟DOM （Virtual Document Object Model)

• DOM的本质是什么：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API；
• 什么是React中的虚拟DOM：用JS对象来模拟页面上的DOM和DOM嵌套；
• **为什么要实现虚拟DOM（虚拟DOM的目的）：为了实现页面中，DOM元素的高效更新

Diff算法

• tree diff:新旧两棵DOM树，逐层对比的过程，就是Tree Diff; 当整颗DOM逐层对比完毕，则所有需要被按需要更新的元素，必然能够找到；

• comment diff ：在进行Tree Diff的时候，每一层中，组件级别的对比，叫做Commponent Diff;

  • 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新；

  • 如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上；

• **element diff ** : 在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比；

6.创建基本的Webpack4.x项目

1. 运行npm init -y 快速初始化项目

2. 在项目根目录创建src源代码目录和dist产品目录

3. 在src目录下创建index.html

4. 使用cnpm安装webpack，运行cnpm i webpack webpack-cli -D

   • 全局运行npm i cnpm -g

5. 注意：webpack4.x提供了约定大于配置概念；目的是为了尽量减少配置文件的体积；

• 默认约定；
• 打包的入口是src -> index
• 打包的出口是dist->main.js
• 4.x中新增了mode选项，可选的值为：development 和 production

7.在项目中使用React

1. 运行 cnpm i react react-dom -S 安装包
   • react:专门用于创建组件，同时组件的生命周期都在这个包中；
   • react-dom：专门进行DOM操作，最主要的应用场景，就是ReactDOM.render()

8.JSX语法

什么是JSX语法；就是符合XML规范的JS语法；（语法格式相对来说，要比HTML严谨很多）

1.如何启用JSX语法？

• 安装babel插件

• 运行 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

• 运行cnpm i babel-preset-env babel-preset-stage-0 -D

• 安装能够识别转换JSX语法的包babel-preset-react

  • 运行 cnpm i babel-preset-react

• 添加.babelrc配置文件

  {
    "presets": ["env","stage-0","react"],
    "plugins": ["transform-runtime"]
  }
  

• 添加.babelrc配置文件

module: { // 所有第三方模块的配置规则`
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加exlude排除项`
    ]
  }

2.jsx语法本质

并不是直接把jsx渲染到页面上，而是内部先转换成createElement形式，再渲染的；

3.在jsx中混合写入js表达式

在jsx语法中，要把js代码写到{}中

• 渲染数字
• 渲染字符串
• 渲染布尔值
• 为属性绑定值
• 渲染jsx元素
• 渲染jsx元素数组
• 将普通字符数组转换为jsx数组并渲染到页面上【两种方案】

4.在JSX中写注释

推荐使用{/* 这是注释 */}

5.为JSX中的元素添加class类名

需要使用className来替代 class;htmlFor替换label的for属性

6.在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；

7.在JSX语法中，标签必须成对出现，如果是单标签，则必须闭合！

当编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作HTML代码去编译，如果遇到了{}就把花括号内部的代码当作普通js代码去编译；

9.React中创建组件

1.第一种创建组件的方式

使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收；必须要向外return一个合法的JSX创建的虚拟DOM;

• 创建组件

function Hello (){
	return <div>Hello 组件</div>
}

• 为组件传递数据

// 使用组件并为组件传递props数据
<Hello name={ dog.name }></Hello>

// 在构造函数中，使用props形参，并接收外界 传递过来的数据
function Hello(props) {
  //如果在一个组件中return一个null,则表示此组件为空，什么都不会渲染
  // return null
  //在组件中，必须返回一个合法的JSX虚拟DOM元素
  console.log(props)
  // 结论 ：不论是Vue 还是React，组件中的props永远都是只读的，不能被重新赋值
  return <div>这是Hello组件 -- {props.name}</div>
}

1.父组件向子组件传递数据；
2.使用{…obj}属性扩散传递数据
3.将组件封装到单独的文件中；
4.注意：组件的名称必须是大写

2.第二种创建组件的方式

使用class关键字来创建组件

了解ES6中的class关键字的使用

1. class中constructor的基本使用

2. 实例属性和实例方法

3. 静态属性和静态方法

4. 使用extends关键字来实现继承

5. 如何省略 .jsx后缀名

// 打开webpack.config.js，并在导出的配置对象中，新政 如下节点
resolve:{
extensions:[’.js’,’.jsx’,’.json’] // 表示这几个文件的后缀名，可以省略不写
}
~~~

基于class关键字创建组件

1.最基本的组件结构：

未完待续。。。。。