recompose withPropsOnChange

[monsterooo]

withPropsOnChange 介绍

withPropsOnChange接收两个参数，第一个参数指定了那些props被更改后需要重新调用计算函数，可以是一个数组里面包含了指定props的key，也可以包含一个自定义函数做一些逻辑后返回一个布尔值。第二个参数也是一个函数参数是props，返回一个对象它是组件的props，其他props也会传递下来，类似于withProps。

withPropsOnChange Flow Type

withPropsOnChange(
  shouldMapOrKeys: Array<string> | (props: Object, nextProps: Object) => boolean,
  createProps: (ownerProps: Object) => Object
): HigherOrderComponent

withProps实例

const TriangleArea = withPropsOnChange(
  ['a', 'h'],
  (props) => ({
    area: props.a * props.h / 2,
  })
)(({ area, title = '' }) => (
  <p>{title}{area}</p>
))

只有当TriangleArea组件中props.a或props.h被改变时才会计算area，这样有助于提高性能

在线DEMO

在codepen在线预览