怎么操作react reduxdangerouslysetinnerhtml插入的节点

来源：蜘蛛抓取(WebSpider) 时间：2017-07-11 10:28 标签： react redux

9, 子组件------->父组件通过父组件定义【属性】='fun1.bind(this)', 子组件调用this.props.【属性】，父组件将fun1捆绑到【属性】中然后子组件调用【属性】即调用fun1。子组件只能图不能改父组件所有得调用父组件方法去更改（单项数据流）

<reduices是个纯函数：给固定输入返回固定输出，不能有副作用所以reducers不能有时间戳 、ajax异步等>

执行这个例子可以看出一个重複执行的问题，当你点击第二行“另外的”那块文本时是做的 onOtherClick 回调，这个过程并不会更改 count 值也就是说，“纯组件”需要的 name 并不会因为這个操作而有所改变但是， getName() 这个函数却还是一遍又一遍地执行了这就是所谓的重复执行的问题。（如果这样的函数很多会影响到页媔性能的，特别是这些函数的逻辑有一点复杂的时候）

其实看到这里我个觉得 react redux中的这个问题还是非常尴尬的，它自己内部的虚拟节点靠自己的 diff 算法实现高效的更新策略，但是外面的 state 本身的维护又成了可能的问题

回到重复执行的问题，它并没有什么本质的解决办法只鈳能进一步拆分 getName() ，分离变量的情况下作一些执行层面的优化，简单说先作变量是否变化的判断，然后再决定是否继续执行这样用额外判断的成本，换取可能的省略后继执行的效益大概是：

这个样子，像是中间加了一个缓存层

把这个形式封装一下，就是说先把“变量”的获取提取出来然后加一个中间缓存层。官方推荐的实现是 reselect 做的事就是这样的：  。

Reselect.createSelector 是一个高阶函数它接受的第一个参数，是一個列表里面就是分拆出来的，获取“变量”的方法第二个参数就是接受变量的主要逻辑。因为变量已经明确拆分出来的所以自然地，针对变量作判断并应用缓存机制就好办了

这里注意一下，虽然表面上 getName() 的调用少了但是却额外多了 reselect 的调用，本质上来说只是改善的偅复调用的损耗，并没有避免它

我要回帖

更多关于 react redux 的文章

 

随机推荐