react的诞生
刚开始js的方法，从页面取东西，js处理然后回填回页面
react的意思就是局部更新，生成代码，直接回填，不需要从页面拿任何东西
jsx将类似于html语法的js语法，翻译成js语法，react优化的最后一步
react强制将this变成了undifined
react创意
- 虚拟dom 2.标签即为函数，属性即为对象
永远不要修改别人给你传的对象
组件思想 - 把一堆标签用一个函数包裹起来再return出去
setState优点
- 可以对更新进行优化
组件非常纯净用function
需要传入特定数据，用class
react父子通信
父元素传一个函数给子元素，子元素在特定的时间调用这个函数
react爷孙通信
爷爷传函数给爸爸，爸爸传函数给孙子，依次传下去
Event Hub(发布订阅模式)
- 需要一个管家
- 发布想法
- 处理想法然后局部render
体现了单项数据流数据传递通过props实现
redux没有解决的问题，数据仍然要一层一层地传递下去
vanillajs原生js
redux中store是存储state的地方
react-redux
redux基本逻辑
- 首先引入redux
- 生成store，参数为状态变更的过程
- 将store放入render
- 点击触发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 四行命令
- npm install -g create-react-app
- npx create-react-app my-app
- cd my-app
- 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
使用组件的好处
- 不需多次复制粘贴
- 多处复用
- 要改，只需要改一个地方
- 要个性就传参
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包裹
