对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
最后
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |