Question

只是想知道你们经常使用这样的结构。

class Cmp extends React.Component {
 constructor(props){
  super(props);
  this.handler = this.handler.bind(this)
 }
 handler(x) {
  return () => console.log(`${x}, i am not immediately called`)
 } 

 render() {
  return(
    <div>
     <div onClick={this.handler('hey')}
    </div>
  )
 }
}

我没有使用箭头功能，因为每次组件安装时，都会导致构造函数中的重新绑定函数
我没有在渲染中使用胖箭头，因为每个渲染都会创建一个新函数
im'不在渲染中使用绑定，因为它会导致重新绑定每个渲染
我正在使用普通功能来防止渲染中的自动自动调用

问题是， - 我在哪个宇宙中是对的？

Answer 1

这是做到这一点的方法但是一个更优雅的解决方案是你可以使用babel-preset-stage-0。使用它你不必在构造函数中编写绑定。你的程序将变为

class Cmp extends React.Component {
    constructor(props){
        super(props);
    }

    //This will bind automatically
    handler = (x) => {
        return () => console.log(`${x}, i am not immediately called`)
    } 

    render() {
        return(
            <div>
                <div onClick={this.handler('hey')}></div>
            </div>
        )
    }
}

因此，如果您定义了许多功能，那么它就会派上用场。

Answer 2

我没有使用箭头功能，因为每次组件都会安装它导致在构造函数
中重新绑定函数

嗯，这只是创建对象的成本。对于＆＃34;常规功能＆＃34;会发生同样的情况。绑定在构造函数中。

我＆＃39;不在渲染中使用胖箭头，因为每个渲染都会创建一个新的功能

但是你要在每个渲染上返回新函数:)组件重新渲染并调用handler，它返回新函数并将其作为道具传递。

IM＆＃39;不在渲染中使用绑定，因为它将导致重新绑定每个渲染

与上述相同。

不确定4是什么意思。

Answer 3

我认为你应该这样做：

class Cmp extends React.Component {
    constructor(props) {
        super(props);
        this.handler = this.handler.bind(this)
    }
    handler = (x) => {
        return (console.log(`${x}, i am not immediately called`))
    }

    render() {
        return ( 
            <div>
                <div onClick = {()=>{this.handler('hey')}}> </div>
            </div>
        )
    }
}

并且您提到的要点是反应的核心，如果您想创建反应应用程序，那么您将不得不这样做。

反应渲染中的函数调用

3 个答案: