css
1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解
js
1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- reducer 函数签名是 : (state, action) => newState
- Redux state 应该只包含普通的 JS 对象、数组和原语。
- 根状态值通常是一个对象。 重要的是,不应该改变 state 对象,而是在 state 发生变化时返回一个新对象。
- 你可以在 reducer 中使用任何条件逻辑。 在这个例子中,我们使用了 switch 语句,但这不是必需的。
*/
function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case ‘counter/incremented’:
return { value: state.value + 1 }
case ‘counter/decremented’:
return { value: state.value - 1 }
default:
return state
}
}
// 创建一个包含应用程序 state 的 Redux store。
// 它的 API 有 { subscribe, dispatch, getState }.
let store = createStore(counterReducer)
// 你可以使用 subscribe() 来更新 UI 以响应 state 的更改。
// 通常你会使用视图绑定库(例如 React Redux)而不是直接使用 subscribe()。
// 可能还有其他用例对 subscribe 也有帮助。
store.subscribe(() => console.log(store.getState()))
// 改变内部状态的唯一方法是 dispatch 一个 action。
// 这些 action 可以被序列化、记录或存储,然后再重放。
store.dispatch({ type: ‘counter/incremented’ })
// {value: 1}
store.dispatch({ type: ‘counter/incremented’ })
// {value: 2}
store.dispatch({ type: ‘counter/decremented’ })
// {value: 1}
#### Redux Toolkit 示例
import { createSlice, configureStore } from ‘@reduxjs/toolkit’
const counterSlice = createSlice({
name: ‘counter’,
initialState: {
value: 0
},
reducers: {
incremented: state => {
// Redux Toolkit 允许在 reducers 中编写 “mutating” 逻辑。
// 它实际上并没有改变 state,因为使用的是 Immer 库,检测到“草稿 state”的变化并产生一个全新的
// 基于这些更改的不可变的 state。
state.value += 1
},
decremented: state => {
state.value -= 1
}
}
})
export const { incremented, decremented } = counterSlice.actions
const store = configureStore({
reducer: counterSlice.reducer
})
// 可以订阅 store
store.subscribe(() => console.log(store.getState()))
// 将我们所创建的 action 对象传递给 dispatch
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}
## 三、使用教程
#### 安装 Redux Toolkit 和 React-Redux[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
添加 Redux Toolkit 和 React-Redux 依赖包到你的项目中:
#### 创建 Redux Store[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
创建 `src/app/store.js` 文件。从 Redux Toolkit 引入 `configureStore` API。我们从创建一个空的 Redux store 开始,并且导出它:
app/store.js
import { configureStore } from ‘@reduxjs/toolkit’
export default configureStore({
reducer: {}
})
npm install @reduxjs/toolkit react-redux
上面代码创建了 Redux store ,并且自动配置了 Redux DevTools 扩展 ,这样你就可以在开发时调试 store。
#### 为 React 提供 Redux Store[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
创建 store 后,便可以在 React 组件中使用它。 在 src/index.js 中引入我们刚刚创建的 store , 通过 React-Redux 的 `<Provider>`将 `<App>` 包裹起来,并将 store 作为 prop 传入。
index.js
import React from ‘react’
import ReactDOM from ‘react-dom’
import ‘./index.css’
import App from ‘./App’
import store from ‘./app/store’
import { Provider } from ‘react-redux’
ReactDOM.render(
,
document.getElementById(‘root’)
)
#### 创建 Redux State Slice[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
创建 `src/features/counter/counterSlice.js` 文件。在该文件中从 Redux Toolkit 引入 `createSlice` API。
创建 slice 需要一个字符串名称来标识切片、一个初始 state 以及一个或多个定义了该如何更新 state 的 reducer 函数。slice 创建后 ,我们可以导出 slice 中生成的 Redux action creators 和 reducer 函数。
Redux 要求[我们通过创建数据副本和更新数据副本,来实现不可变地写入所有状态更新](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)。不过 Redux Toolkit `createSlice` 和 `createReducer` 在内部使用 Immer 允许我们[编写“可变”的更新逻辑,变成正确的不可变更新](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)。
features/counter/counterSlice.js
import { createSlice } from ‘@reduxjs/toolkit’
export const counterSlice = createSlice({
name: ‘counter’,
initialState: {
value: 0
},
reducers: {
increment: state => {
// Redux Toolkit 允许我们在 reducers 写 “可变” 逻辑。它
// 并不是真正的改变状态值,因为它使用了 Immer 库
// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
// 不可变的状态
state.value += 1
},
decrement: state => {
state.value -= 1
},
incrementByAmount: (state, action) => {
state.value += action.payload
}
}
})
// 每个 case reducer 函数会生成对应的 Action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer
#### 将 Slice Reducers 添加到 Store 中[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
下一步,我们需要从计数切片中引入 reducer 函数,并将它添加到我们的 store 中。通过在 reducer 参数中定义一个字段,我们告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新。
app/store.js
import { configureStore } from ‘@reduxjs/toolkit’
import counterReducer from ‘…/features/counter/counterSlice’
export default configureStore({
reducer: {
counter: counterReducer
}
})
#### 在 React 组件中使用 Redux 状态和操作[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
现在我们可以使用 React-Redux 钩子让 React 组件与 Redux store 交互。我们可以使用 `useSelector` 从 store 中读取数据,使用 `useDispatch` dispatch actions。创建包含 `<Counter>` 组件的 `src/features/counter/Counter.js` 文件,然后将该组件导入 `App.js` 并在 `<App>` 中渲染它。
features/counter/Counter.js
import React from ‘react’
import { useSelector, useDispatch } from ‘react-redux’
import { decrement, increment } from ‘./counterSlice’
import styles from ‘./Counter.module.css’
export function Counter() {
const count = useSelector(state => state.counter.value)
const dispatch = useDispatch()
return (
<button
aria-label=“Increment value”
onClick={() => dispatch(increment())}
>
Increment
{count}
<button
aria-label=“Decrement value”
onClick={() => dispatch(decrement())}
>
Decrement
)
}
现在,每当你点击”递增“和“递减”按钮。
* 会 dispatch 对应的 Redux action 到 store
* 在计数器切片对应的 reducer 中将看到 action 并更新其状态
* `<Counter>`组件将从 store 中看到新的状态,并使用新数据重新渲染组件
### 你学到了什么[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
这是关于如何通过 React 设置和使用 Redux Toolkit 的简要概述。 回顾细节:
总结
>
> * **使用`configureStore`创建 Redux store**
> + `configureStore` 接受 `reducer` 函数作为命名参数
> + `configureStore` 使用的好用的默认设置自动设置 store
> * **为 React 应用程序组件提供 Redux store**
> + 使用 React-Redux `<Provider>` 组件包裹你的 `<App />`
> + 传递 Redux store 如 `<Provider store={store}>`
> * **使用 `createSlice` 创建 Redux "slice" reducer**
> + 使用字符串名称、初始状态和命名的 reducer 函数调用“createSlice”
> + Reducer 函数可以使用 Immer 来“改变”状态
> + 导出生成的 slice reducer 和 action creators
> * **在 React 组件中使用 React-Redux `useSelector/useDispatch` 钩子**
> + 使用 `useSelector` 钩子从 store 中读取数据
> + 使用 `useDispatch` 钩子获取 `dispatch` 函数,并根据需要 dispatch actions
>
>
>
>
>
>
## Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用?
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用?
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?
![](https://img-blog.csdnimg.cn/img_convert/3172e3ae24537b5deddaa9122f0e306a.webp?x-oss-process=image/format,png)
**[如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
?
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?
[外链图片转存中...(img-7KKd0kHI-1715374343451)]
**[如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**