react-学习记录

react简介

1. 起源Facebook内部项目
2. 两个概念
   1. 库library： 小 而 巧，可以很方便的从一个库切换到另一个库，代码几乎不改变
   2. 框架framework ：大 而 全，提供一整套方案，切换到另一个框架很困难
3. mvc框架 mvvm是什么

前端三大主流框架

1. angular 最早
2. vue最火 关注的人最多
3. react最流行 用的人最多

react与vue对比

1. 组件化方面

   1. 什么是模块化

      是从代码逻辑的角度进行分析，把一些可复用的代码抽离为单个模块，便于项目的维护和开发

   2. 什么是组件化

      是从UI界面的角度进行分析，把一些可复用的UI元素抽离为单独的组件（比如轮播图），便于项目的维护和开发

   3. 组件化的好处

      复用 方便拼接

   4. vue组件

      1. .vue文件创建组件
         1. template
         2. script
         3. style

   5. react组件

      1. 一切用js表现

   6. 移动app开发

      1. weex vue方面的
      2. reactnative react方面的

为什么学习react

1. 设计优秀 一切基于js
2. 开发团队实力强大
3. 社区强大
4. 无缝转到reactnative
5. 大企业都选用

react两个核心概念 多看黑马p06 07

1. 虚拟dom

   1. dom：文档对象模型，浏览器中的概念，用js对象来表示页面中的dom元素，并提供操作dom的api
   2. react的虚拟dom：框架中的概念，用js对象来模拟页面中的dom元素
   3. 好处：页面dom元素高效更新

2. diff算法

3. webpack初始化项目

   1. npm init -y初始化
   2. 创建目录结构
   3. 安装本地webpack 及cli
   4. 默认约定大于配置 就不需要手动配置了
      1. 默认入口为index.js
      2. 默认出口为dist/main.js
   5. webpack-dev-server打包好的main.js托管与内存中 看不见
   6. 配置html-webpack-plugin插件

4. 在项目中使用react

   1. 运行cnpm i react react-dom -S安装包
      1. react 用于创建组件和虚拟dom
      2. react-dom 用于展示
   2. 创建虚拟dom元素
   3. 调用render函数进行渲染