在编写代码时，我总是想找到一种更优雅的方法。更好的可读性和更高的效率。您更喜欢哪种方法？或者您还有其他更好的方法。
在我看来，这是一个丑陋的方法，混合代码。
class Layer extends Component {
render(){
return (
<li
onClick={(event)=>{
console.log(event.target, this.props.layerId);
// Some Code
}}
>
{layerName}
</li>
)
}
}
常用方法。但是每次点击都会创建一个匿名函数。效率？
class Layer extends Component {
onLayerClick(event){
console.log(event.target, this.props.layerId);
// Some Code
}
render(){
return (
<li
onClick={(event)=>{
this.onLayerClick(event);
}}
>
{layerName}
</li>
)
}
}
我最喜欢的方法。但是需要绑定。
class Layer extends Component {
onLayerClick(event){
console.log(event.target, this.props.layerId);
// Some Code
}
render(){
return (
<li
onClick={this.onLayerClick.bind(this)}
>
{layerName}
</li>
)
}
}
非常有见地和基于上下文，但是属性初始化的箭头函数使它成为可能，因此您不必bind在render方法或构造函数中。
class Layer extends Component {
onLayerClick = (event) => {
console.log(event.target, this.props.layerId);
};
render(){
return <li onClick={this.onLayerClick}>{layerName}</li>;
}
}
但是，类属性尚未使用该语言，因此并非所有开发环境都可以访问它们。我认为第二好的选择是bind构造函数中的方法。它比类属性选项要写的要多，但是您不必每次都在render方法中创建一个新函数。
class Layer extends Component {
constructor(props) {
super(props);
this.onLayerClick = this.onLayerClick.bind(this);
}
onLayerClick(event) {
console.log(event.target, this.props.layerId);
};
render(){
return <li onClick={this.onLayerClick}>{layerName}</li>;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句