react\vue

react的诞生
刚开始js的方法，从页面取东西，js处理然后回填回页面
react的意思就是局部更新，生成代码，直接回填，不需要从页面拿任何东西
jsx将类似于html语法的js语法，翻译成js语法，react优化的最后一步
react强制将this变成了undifined
react创意

1. 虚拟dom 2.标签即为函数，属性即为对象
   永远不要修改别人给你传的对象
   组件思想
2. 把一堆标签用一个函数包裹起来再return出去

setState优点

1. 可以对更新进行优化

组件非常纯净用function
需要传入特定数据，用class
react父子通信
父元素传一个函数给子元素，子元素在特定的时间调用这个函数
react爷孙通信
爷爷传函数给爸爸，爸爸传函数给孙子，依次传下去

Event Hub(发布订阅模式)

1. 需要一个管家
2. 发布想法
3. 处理想法然后局部render
   体现了单项数据流数据传递通过props实现
   redux没有解决的问题，数据仍然要一层一层地传递下去

vanillajs原生js

redux中store是存储state的地方
react-redux

redux基本逻辑

1. 首先引入redux
2. 生成store，参数为状态变更的过程
3. 将store放入render
4. 点击触发action
   5。 action进入状态变更逻辑，产生新的state，导致render再次运行

react context
全局变量谨慎使用，使用局部全局变量
react hooks// useState useEffect
从16.7.0开始，函数组件是可以有状态的
hook只能在一个函数内部被调用useState只能在内部，函数名字是随意的，只要匹配

函数的副作用：指函数或表达式的行为依赖于外部事件
useEffect如果你的函数是有副作用的函数，就把这个函数写在useEffect里面

React Router 路由，互联网络将信息从原地址传送到目标地址的活动

react生命周期 生：create创建阶段，出现在js内存中 mount：挂载，放入页面 update更新值 销毁div，div要移除，div所绑定的事件监听也被销毁，div指向也改变

对于react来说，创建阶段为constructor
8个生命周期
创建div，往div里填充东西，将div放入页面

1.请求数据(ajax) 8个钩子都可以放，但是最好越早越好，推荐放在constructor和onclick里面
初始化state最好放在constructor，理论上在用之前在哪个钩子初始化都行
2.更新数据（setState） didmount和willreceiveprops及onclick两个钩子可以放
shouldComponentUpdate允许手动判断是否更新组件，帮我们避免不必要的更新
3.事件监听（onclick）
4.初始化state

创建一个react-app 四行命令

1. npm install -g create-react-app
2. npx create-react-app my-app
3. cd my-app
4. yarn start

import引入css文件
import引入js文件
react里面没用花括号括起来的会被翻译成js，用花括号括起来的就是js

1.styled-component
2.emotion
3.css-module
4.radium
如果是写App商城，就用css-modules或者styled-component
如果是写lib库，只能用旧的css写法

第一次build不行，在package.json里面加入了homepage然后重新build

关于react的class第一个库classNames

使用组件的好处

1. 不需多次复制粘贴
2. 多处复用
3. 要改，只需要改一个地方
4. 要个性就传参

nodejs语法
HTML语法
CSS语法
JS语法
扎实的HTML、CSS、JS语法
设计模式
Vue Api 组件 钩子 模板语法
webpack配置 vue-cli vue-loader
vue全家桶 vuex vue-router
UI框架
VUE 3.0
高级 虚拟DOM Diff算法 模板编译
命令 yarn global add @vue/cli@3.9.3后面加@加上版本号可以安装特定版本

命令
yarn global add @vue/cli
vue create vue-demo-1
yarn serve

复杂的东西务必简单化
组件化
没有良好的基础学不好vue
vue基础需要学到响应式原理部分
vue是你所有前端知识的汇总

常用三件套基础
设计模式
Vue API 组件钩子 模式语法
webpack css-loader、vue-loader sass-loader bable-loader
Vue全家桶 Vuex Vue Router Axios PWA
UI框架 Element
Vue3.0
高级 虚拟DOM DIff算法 模板编译
vue项目里面template与div的区别，template无div包裹