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在线预览
备注
我至少每周会更新4个左右的api使用指南,欢迎关注