对react技术栈的一些理解
目的本篇文章主要帮助大家了解下 React为什么选择react,而不是vue2vue2的优点
vue2的缺点
为什么没有选择riotriot的优点小,用在移动端很合适 riot的缺点小的缺点很多,但是比较好克服,最大的缺点还是在于 native的基本原理一个线程为 reduxreact + redux的缺点利用 如下面代码: render() {
const { child1Data,child2Data } = this.props.store;
return (
<div> <Child1 data="child1Data" /> <Child2 data="child2Data" /> </div> ); }
假如只有 引入purerender
// is可以理解为Object.is()
function shallowEqual(objA,objB) {
if (is(objA,objB)) {
return true;
}
// 非引用类型,且不相等直接返回
if (typeof objA !== 'object' || objA === null ||
typeof objB !== 'object' || objB === null) {
return false;
}
const keysA = Object.keys(objA),keysB = Object.keys(objB);
if (keysA.length !== keysB.length) {
return false;
}
// 问题所在,仅仅是比较了第一层,假设引用没变,不会触发更新
for (let i = 0; i < keysA.length; i++) {
if (
!hasOwnProperty.call(objB,keysA[i]) ||
!is(objA[keysA[i]],objB[keysB][i])
) {
return false;
}
}
return true;
}
注意:使用 对于一般的情况来说 // 之前的数据:
let person = {
name: 'zp1996',age: 21
};
// 改变引用
person = {
name: 'zp1996',age: 21
};
(注:上面场景我做了下简化,真实中可能是从服务器端获得的数据,比如帖子列表这种) const data = {
person: {
students: [{
name: 'zp1996',age: 21
}]
}
};
// 加入一个新的学生,数据结构会变成这样
{
person: {
students: [{
name: 'zp1996',age: 20
},{
name: 'zpy',age: 21
}]
}
}
假如是这种情况,引用根本没有发生变化,所以就不会触发 利用immutable解决很容易想到的是在 还有问题吗?我们希望的是 // 从服务端拉回来的数据
{
students: {
'id_111': {
name: 'zp1996',age: 21
}
}
}
// 最终组件希望我们传入这样的数据
{
students: [{
name: 'zp1996',age: 21,id: 'id_111'
}]
}
// 一般会在connect中对数据进行整理
const mapStateToProp = state => {
const { students } = state,res = [];
for (let key in students) {
if (students.hasOwnProperty(key)) {
let obj = students[key];
obj[id] = key;
res.push(obj);
}
}
return res;
};
@connect(
mapStateToProp,// 被叫做selector
);
每次
// createSelector的最后一个参数作为计算函数
const state = { num: 10 },selector = state => state.num,reSelector = createSelector(
selector,a => {
console.log('被调用了')
return a * a;
}
);
console.log(reSelector(state)); // 第一次计算
console.log(reSelector(state)); // 拿缓存
console.log(reSelector(state)); // 拿缓存
state.num = 100;
console.log(reSelector(state)); // 值发生改变,计算
console.log(reSelector(state)); // 拿缓存
console.log(reSelector(state)); // 拿缓存
实现也是非常简单,就是对传入的参数进行判断,如果与之前一样则直接返回结果 function defaultMemoize(func,equalityCheck = defaultEqualityCheck) {
let lastArgs = null,lastResult = null;
const isEqualToLastArg = (value,index) => equalityCheck(value,lastArgs[index]);
return (...args) => {
// 检测输入是否相等,不等或者第一次执行的话执行函数,反之拿之间的结果
if (
lastArgs === null ||
lastArgs.length !== args.length ||
!args.every(isEqualToLastArg)
) {
lastResult = func(...args);
}
lastArgs = args;
return lastResult;
};
}
redux太复杂?尝试mobx
最后
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |