鸭题-06-框架

最新推荐文章于 2023-08-14 19:53:38 发布

m0_52224499

最新推荐文章于 2023-08-14 19:53:38 发布

阅读量123

点赞数

分类专栏：面试

本文链接：https://blog.csdn.net/m0_52224499/article/details/117913972

版权

面试专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. nodejs 创建静态服务器？
http.createServer((req,res)=>{res.writeHead(),res.write(),res.end()}).listen(3000)

2. commonJS规范 vs ES6 模块化规范

> require导入， module.exports 导出
import 导入， export default 导出

区别：import {某个几个接口} from ‘antd’ //webpack (tree shaking 摇树优化)
var myview = require(“antd”) //导入整个接口

3. socket通信聊天
websocket全双工, 双向通信 onopen onmessage onclose onerror

http 应用层协议，区别：http 单向，请求响应模型， XHR编程接口
TCP双向通信传输层协议，socket编程接口

4. mongoDB 基本操作(增删改查)

mysql 区别- 关系型，非关系型
mongoose --（model schema ）

5. express 进行项目构建
nodejs一个框架（express, koa, egg）
6. token（jwt-json web token）与 session配合cookie （登录，鉴权）

7. MV - mvc mvvm mvp*

		vue 分别对应哪一部分？ 
		m=>data状态数据   
		v=>vue模板  
		vm=>var vm = new Vue({el:"#box"})

8. vue数据绑定原理

Object.defineProperty() get set, watcher , render = > 虚拟dom 对比老的vdom , diff
vue3.0 数据绑定 es6 proxy , new Proxy(obj,“name”,{get })

一个对象临时加属性拦截不到，改变索引值拦截不到，在vue3中统统解决了

9. vue - 过滤器
数据的格式化，vue.filter())，计算属性(模糊查询，购物车金额计算)，watch (监听路由改变) , 方法

注：vue3 中没有filter

**10.vue生命周期 **

11.vue指令有哪些

v-if v-for v-else v-model v-html v-bind v-on v-show v-slot...

**12.vue单文件组件 **

template
script
style

13.slot使用场景 (插槽，内容分发)

插槽最大的意义在于增强组件的复用性，在一些特殊结构也好或者是样式也好，可以通过自己写好东西放在组件内部，这样通过slot 可以接到这个东西

14.vue-cli脚手架 eslint
15.vue路由

hash(window.onhashchange)
history (window.onpopstate)

16.vuex基本模块-state ,actions,mutations,getters

怎么理解？
workflow？
项目？非父子通信，状态快照（缓存数据）
store 内存，一刷新页面没有
调试， devtools

17.git管理工具

git add., git commit , git push ,git pull(git fetch ,git merge) ,代码冲突，手动合并

git reset --hard HEAD~10
git checkout -b dev
git merge dev
   
git 可视化 - vscode , webstorm , submit, 插件， 小乌龟 git ,souceTree

18.vue优化

首屏加载过慢，提供seo

首屏加载过慢 (路由懒加载)

<!-- import Foo from './Foo' -->
var Foo = ()=>import("./Foo")  //webpack code split 代码分割
const router = new VueRouter({
    routes: [
        { path: '/foo', component: Foo }
    ]
})

19 .React class组件，函数式组件

class App extends Component{
     state = {}
	 render (){
	  return <div>111</div>
	 }
 }

 function App(props){

 	return <div>111</div>
 }
 
 react 函数式组件 hooks (钩住函数组件的状态) , useState(作用：创建状态，保存状态),useEffect(副作用函数，会根据依赖每次执行一遍这个函数)，useCallback(利用这个函数可以解决每次创建，将函数缓存下来)	，useMemo(每次这个东西都要经过一段逻辑计算出结果来，可以用useMemo来包装，结果就能被缓存下来，如果计算过程中依赖的那个值发生改变就会重新计算一遍，类似vue的计算属性)

20.受控组件&非受控组件？（杭州面试必问）

外部能控制组件内部状态（属性）
tabbar
swiper

既能受控还能非受控

21.vdom（js对象模拟dom节点）与diff (同层级对比,key, 同class , 合并操作)

count = 1
setState({count：this.state.count+1})
setState({count：this.state.count+1})

setState({
	name:"xiaoming"
},()=>{
	//更新到dom, new Swiper
	// this.$nextTick Vue
})

setState({
    count:this.state.count+1
})

setState((prevState)=>{
	return {
		count:prevState.count+1
	}
})
setState((prevState)=>{
	return {
		count:prevState.count+1
	}
})

多次setState

22.setState 之后？React数据更新原理？

setState 调用完之后，会根据新的对象创建出新的虚拟dom来，新的虚拟dom 对比老的虚拟dom 节点，通过diff算法同key 值，同层级，同class对比。然后把要修改的标记出要修改，把要删除的标记出要删除，最后进行合并式的dom 更新。

23. React按钮绑定事件

<button onClick={()=>{

}}></button>

handleClilck(){
	console.log(this)
}
handleClilck = ()=>{
	console.log(this)
}
<button onClick={this.handleClick.bind(this)}></button>

事件与原生事件区别？ 
原生绑在谁身上就是谁，如果是原生，this在这就是指向button 。原生事件是绑定在当前节点上
react 是代理到document

24.Ref - （dom =>refdom节点，组件=>ref组件对象）

ref父子通信

25. 生命周期

老的

componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate ? return false /true 性能优化
componentWillUpdate
render
componentDidUpdate
componentWillUnmount

新的 Fiber （新的调度机制，导致某些生命周期会重复执行，所以需要改成下面两个）

getDerivedStateFromProps
getSnapShotBeforeUpdate

26.父子通信以及非父子通信 (context)
props 父传子 this.props.myname
callback 子传父 this.props.event()

27.Redux

reducer
store
actionCreator
Component View

redux原理: 订阅发布模式
	list = [()=>{},()=>{}]
	state = ""
	
	发布
	dispatch = function(){
			state = reducer(prevstate)
					for(var i in list){

						list[i]()
					}
			}
	监听
	subscribe(()=>{})

	异步？
	middleWare - redux-thunk redux-promise redux-saga

	flux VS react-redux VS redux
		- flux 架构思想 15种 (facebook flux(vue 老太太 ), redux )
		- redux （vue react, angular）
		- react-redux（不用自己监听，connect() 容器组件，自己叫UI组件，Provider组件 ）

	react-redux原理
	(1)高阶组件 HOC 高阶函数
	(2) <Provider store={store}/>,  context	(非父子通信，provider comsumer)

28.Ant-Design
哪些组件？准备几个

 Button (size, type , disabled... )

29.immutable (结构共享)

深复制？
[…] {…} 一级深复制
JSON.parse(JSON.stringify()) 如果name:undefined

30.Mobx

redux(普通js对象， state只读，单一store,纯函数) VS mobx(可观察对象，状态可以被修改，多个store. )
Vuex（直接修改状态,actions, get set拦截,学习成本低） VS Redux (不能直接修改状态， middlerware，自己subsribe, 成本高。)

31.小程序开发 wxml js wxss json

适配？ rpx
wx.request 跨域？安全域名
量级，日活量？ 10万
小程序进行定位和摄像头
uniapp-条件编译，混合开发

m0_52224499

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
鸭题-06-框架

1. nodejs 创建静态服务器？http.createServer((req,res)=>{res.writeHead(),res.write(),res.end()}).listen(3000)2. commonJS规范 vs ES6 模块化规范> require导入， module.exports 导出import 导入， export default 导出区别：import {某个几个接口} from ‘antd’ //webpack (tree shaking 摇树
复制链接

扫一扫

专栏目录