- 起源于Facebook的内部项目（2013.5开源）
- 组件化相关概念
- 模块化（node）：从代码角度分析，把一些可复用的代码，抽离成单独的模块，方便维护和使用。
- 组件化（vue、react）：从UI方面分析，把一些可复用的UI，抽离成单独的组件
- vue实现组件化：.vue单文件 （template（结构） script（行为） style（样式））
- react实现组件化：react中，一切都是由JS来表现的，
- 迁移到移动端app
- vue+weex，提供了迁移到移动端app的开发体验（目前没有什么打的成功案例）
- react+react-native 无缝迁移到移动端app的开发体验
- react中几个核心概念
- 虚拟DOM：框架中的概念，用JS对象来模拟页面上的DOM和DOM嵌套
- Diff算法 ： 获取内存的虚拟DOM结构对象（模拟浏览器中的DOM tree），进行对比，得到需要按需更新的DOM，更新需要更新的部分，提高页面渲染的性能
- 虚拟DOM和Diff算法介绍
- 在webpack中使用react
- 初始化项目
npm init 项目名 - 安装webpack
npm i webpack -D - 新建项目目录
src dist配置文件webpack,config.js - 配置webpack 配置文件
webpack,config.js，配置好入口和出口文件 - 安装webpack-dev-server方便实时更新，使用插件html-webpack-plugin，将html页面保存在内存中，提高性能，配置babel
- 安装
react react-dom（npm 安装）
- react 在webpack中的简单使用
- 导入react 和react-dom 这两个包（命名为React ReactDOM）
- React.createElement('标签名'，'属性或null'，子节点1，子节点2，子节点n)创建一个虚拟DOM，返回虚拟DOM对象
- ReactDOM.render('虚拟DOM对象'，要挂载的页面容器DOM)
-
这种写法太过繁琐，我们可以使用 jsx（在js代码中嵌套html），将createElement部分改成html标签，再使用babel将它转化成js代码的形式，方便开发
配置babel启用jsx语法
网友评论