React 初识

此文章之前被驳回，现在解封。所以时间对不上 09年初的。（注意行文规范）

先接触的React Native,因为公司新项目需求需要。但React底层什么的一概不知，虽然有一点Vue的入门经验。所以想年前突击一下，做一些笔记。望与前端各位，共同进步，早日爬坑。

工欲善其事

• 必先利其浏览器，下载相应的扩展
• node环境
• 学习一种语言，建议从官网入手，无味的话，也可以看看视频之类

库与框架

library(库) 小而巧

优点：

方便从一个库，切换另一个库，代码改变较少；更改提供特定的api

Framework(框架) 大而全

解决了一整套的解决方案，所以，如果在项目中想切换另一个框架，是困难的

优点

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

React与Vue

1.组件化方面

• 1.1模块化:代表nodejs,从 代码 的角度来进行分析的；把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发；
• 1.2组件化：从UI的 角度，把一些可复用的UI元素，抽离为单独的组件，便于项目的维护和开发
• 1.3好处：大项目开发，把现有的组建，拼接成完整的新项目

2.Vue组件

• .vue文件 Vue.component()
• vue是如何实现组件化的
  template 结构
  script 行为
  style 样式
  三者缺一不可，.vue模板文件靠webpack中vue-loader(第三方)编译j成s代码

3.React组件

没有模板文件，一切以使用.js文件体现的.所以，要js基本功要牢靠，ES6/ES7 (async await )
React 虚拟DOM(Virtual Document Object Model)，Vue也有虚拟DOM概念

DOM的本质：浏览器中的概念，用js对象来表示页面上的元素，并提供操作了DOM对象的api

虚拟DOM : 框架中的概念，是程序员用js对象来模拟页面上的DOM和DOM嵌套；用虚拟DOM:为了实现页面中，DOM元素可以高效更新

DOM树：

• 1.浏览器请求服务器获取html代码
• 2.浏览器要在内存中，解析DOM结构,渲染DOM树
• 3.浏览器最终将DOM树，呈现在页面上

以往将数据呈现页面：

• 1.for循环
• 2.art-template模板引擎
• 优化性能不好

为什么用虚拟DOM

• 浏览器没有提供获取dom树的api,有获取元素
• 虚拟DOM:程序员用js对象的形式，来模拟页面上dom的嵌套关系
• 按需加载，逐层对比两次的dom树
• 本质：用js对象，来模拟DOM元素和嵌套关系
• 目的：为了实现页面元素的高效更新

diff算法（知道这回事就行了）

• 1.tree diff
• 2.component diff
• 3.element diff

发现不同，删除不同，创建新的

前段时间尤雨溪说过，React与Vue没有哪个好，哪个不好。问题是你掌握了多少。

React

• 1.安装npm i react react-dom -S
  react 专门用于创建组件和虚拟DOM的，还有生命周期
  react-dom 专门进行dom操作的，reactDOM.render()，即展示创建好的组件和虚拟dom
• 2.容器
• 3.创建元素
• 4.render

用jQuery也可以，但是要$() 转化 原生

看大佬都是新建空项目，依此加项目文件的，也可以一次安装react-app脚手架，一键生成

JSX

• 安装babel插件
  npm i babel-core babel-loader babel-plugin-transform-runtime -D
  npm i babel-preset-env babel-preset-stage-0 -D
  npm i babel-preset-react -D

-D就是–save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而–save会将包的名称及版本号放在dependencies里面(感觉没什么区别，有知道的还望告之)

webpack webpack.config.js 默认只能打包处理js文件，像.vue.png等要配置第三方loader 放在modul:{rule:[]}

jsx中写js表达式

• 1.数字
• 2.字符串
• 3.三元运算
• 4.为元素绑定属性值
• 5.遍历
• …

jsx ---- createElement — 虚拟DOM (js对象) —真实的DOM

forEach没有返回值，map有，要return，保持状态，要加key,还有动画，避免混乱
js中 [ ( + - / 之一，要加“ ；”，其他看个人喜好
class-classname

如果有问题，望斧正，也欢迎交流，共同成长