此文章之前被驳回,现在解封。所以时间对不上 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