说说redux的实现原理是什么,写出核心代码?
原理
-
将应用的状态统一放到
state
中,由store
来管理state
。 -
reducer
的作用是 返回一个新的state
去更新store
中对用的state
。 -
按
redux
的原则,UI层
每一次状态的改变都应通过action
去触发,action
传入对应的reducer
中,reducer
返回一个新的state
更新store
中存放的state
,这样就完成了一次状态的更新 -
subscribe
是为store
订阅监听函数,这些订阅后的监听函数是在每一次dipatch
发起后依次执行 -
可以添加中间件对提交的
dispatch
进行重写 核心API -
createStore
创建仓库,接受reducer
作为参数 -
bindActionCreator
绑定store.dispatch
和action
的关系 -
combineReducers
合并多个reducers
-
applyMiddleware
洋葱模型的中间件,介于dispatch
和action
之间,重写dispatch
-
compose
整合多个中间件
41.扩展运算符都有哪些作用,详细介绍一下?
扩展运算符是一个三个连续点(…)的语法,可以在多种上下文中使用,并具有以下几个作用:
展开数组:扩展运算符可以将一个数组展开为独立的元素。这个特性可以用于创建新的数组、合并数组或在函数调用时传递参数。
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
1
2
3
4
展开对象:类似于展开数组,扩展运算符还可以将一个对象的属性展开为独立的键值对。这使得在创建新对象时可以轻松地引入已有对象的属性。
const obj1 = { name: 'John', age: 30 };
const obj2 = { city: 'New York' };
const combinedObj = { ...obj1, ...obj2 }; // { name: 'John', age: 30, city: 'New York' }
1
2
3
4
复制数组和对象:使用扩展运算符还可以创建数组和对象的浅拷贝副本。这样的拷贝是对原始数据的引用,因此对复制的数组或对象的修改不会影响到原始数据。
const arr = [1, 2, 3];
const copyArr = [...arr]; // [1, 2, 3]
const obj = { name: 'John', age: 30 };
const copyObj = { ...obj }; // { name: 'John', age: 30 }
1
2
3
4
5
函数调用时传递参数:扩展运算符可以在函数调用时将数组或对象的元素作为独立的参数传递给函数。
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
const result = sum(...numbers); // 6
1
2
3
4
5
6
剩余参数:扩展运算符还可以用作函数的剩余参数(rest parameter),将传递给函数的多余参数收集为一个数组。
function sum(...args) {
return args.reduce((total, num) => total + num, 0);
}
const result = sum(1, 2, 3, 4, 5); // 15
1
2
3
4
5
扩展运算符非常方便且易读,使得在处理数组和对象时更加灵活和简洁。它对于数组、对象的合并、复制和函数参数的收集等场景都提供了便利的语法。