image.png

使用匿名函数

自 v1.2.9 开始支持 注意:在各小程序端,使用匿名函数,尤其是在 循环中 使用匿名函数,比**使用 bind 进行事件传参占用更大的内存,速度也会更慢。**

除了 bind 之外,事件参数也可以使用匿名函数进行传参。直接写匿名函数不会打乱原有监听函数的参数顺序:

  1. class Popper extends Component {
  2. constructor () {
  3. super(...arguments)
  4. this.state = { name: 'Hello world!' }
  5. }
  6. render () {
  7. const name = 'test'
  8. return (
  9. <Button onClick={(e) => {
  10. e.stopPropagation()
  11. this.setState({
  12. name
  13. })
  14. }}>
  15. {this.state.name}
  16. </Button>
  17. )
  18. }
  19. }

注意: 使用通过 usingComponents 的第三方组件不支持匿名函数

柯里化

自 v1.3.0-beta.1 开始支持 在各小程序端,使用柯里化 Taro 会在编译后多生成一个匿名函数。

除了 bind 和匿名函数之外,事件参数也可以使用柯里化传参。

  1. class Title extends Component{
  2. handleClick = (index) => (e) => {
  3. e.stopPropagation()
  4. this.setState({
  5. currentIndex: index
  6. })
  7. }
  8. render() {
  9. const { currentIndex } = this.props;
  10. return (
  11. {/* 调用 `this.handleClick(currentIndex)` 会返回一个函数,这个函数可以访问到 `currentIndex` 同时也能满足 `onClick` 的签名 */}
  12. <View onClick={this.handleClick(currentIndex)}>
  13. </View>
  14. )
  15. }
  16. }

注意: 使用通过 usingComponents 的第三方组件不支持匿名函数

函数式组件

在函数式组件中,事件传参可以传入事件的引用也可以传入匿名函数,以下是函数式组件配合 useCallback 的一个例子:

  1. const App = () => {
  2. const [c1, setC1] = useState(0);
  3. const [c2, setC2] = useState(0);
  4. const [c3, setC3] = useState(0);
  5. const increment = c => c + 1
  6. // 只有 useCallback 对应的 c1 或 c2 的值改变时,才会返回新的函数
  7. const increment1 = useCallback(() => setC1(increment), [c1]);
  8. const increment2 = useCallback(() => setC2(increment), [c2]);
  9. return (<View>
  10. <Text> Counter 1 is {c1} </Text>
  11. <Text> Counter 2 is {c2} </Text>
  12. <Text> Counter 3 is {c3} </Text>
  13. <View>
  14. <Button onClick={increment1}>Increment Counter 1</Button>
  15. <Button onClick={increment2}>Increment Counter 2</Button>
  16. <Button onClick={() => setC3(increment)}>Increment Counter 3</Button>
  17. </View>
  18. </View>)
  19. }