[Recompose] Compute Expensive Props Lazily using Recompose
2024-09-25 01:26:59
Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop computations are only executed when necessary. Simply specify which props are “expensive” and provide a factory function for those props.
withPropsOnChange(
shouldMapOrKeys: Array<string> | (props: Object, nextProps: Object) => boolean,
createProps: (ownerProps: Object) => Object
): HigherOrderComponent
Instead of an array of prop keys, the first parameter can also be a function that returns a boolean, given the current props and the next props. This allows you to customize when createProps()
should be called.
const { Component } = React;
const { withPropsOnChange, withState, withHandlers, compose } = Recompose; // only generate 'result' when depth changed
const lazyResult = withPropsOnChange(
['depth'],
({ depth }) => ({
result: fibonacci(depth)
})
); const Fibonacci = lazyResult(({ result, color, size }) =>
<div style={{ color, fontSize: size }}>
Fibonacci Result:<br/>{ result }
</div>
);
最新文章
- MVC _ aspx视图引擎登录及状态保持
- C# inline-asm / 嵌入x86汇编
- Unity3D 实现简单的语音聊天 [iOS版本]
- 【SPOJ】7258. Lexicographical Substring Search(后缀自动机)
- AllocateHwnd is not Thread-Safe
- java中Object相关的几个方法
- solrCloud+tomcat+zookeeper配置
- 获取select选中的值
- 聊聊RocksDB Compact
- 【JS】jquery通知插件toastr
- 使用node操作mongodb
- Web App Checklist
- 栈帧 2.6. Frames 虚拟机内存模型
- MySQL内核整理(一)
- Python 列表 reverse() 方法
- mysql之SQLYog配置
- Java 堆栈,内存分配理解
- 【bootstrap】.container与.container_fluid
- [写出来才有价值系列:node.js]node.js 02-,learnyounode
- JDBC 事务(一) 隔离级别