zoukankan      html  css  js  c++  java
  • [Recompose] Compute Expensive Props Lazily using Recompose

    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>
    );

  • 相关阅读:
    二进制中1的个数
    原码、反码、补码,计算机中负数的表示
    win10安装MySQL
    X86、X64、X86_64
    windows搭建深度学习环境
    驱动
    cpu、gpu
    常见的文件系统
    UltralSO制作U盘启动盘
    save、load
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6863703.html
Copyright © 2011-2022 走看看