reactjs – 在React中将函数传递给’哑’组件中的处理程序的正确

发布时间：2020-12-15 16:19:49 所属栏目：百科来源：网络整理

导读：看看这个简单的例子,其中prop toggleData将是一个映射到容器道具的redux thunk动作. 这是将这样的函数传递给子’哑’组件的推荐方法吗？我在网上看到一篇文章说,在处理程序中使用箭头功能是昂贵的,从性能角度来看效率不高. class Container extends React.Co

看看这个简单的例子,其中prop toggleData将是一个映射到容器道具的redux thunk动作.

这是将这样的函数传递给子’哑’组件的推荐方法吗？我在网上看到一篇文章说,在处理程序中使用箭头功能是昂贵的,从性能角度来看效率不高.

class Container extends React.Component {
    render(){
        return (
            <Home toggleData={this.props.toggleData}/>
        )
    }
}

const Home = (props) => {
    return (
        <button onClick={()=>{props.toggleData()}}></button>
    )
}

解决方法

是!避免在JSX中使用箭头函数.由于将在每个渲染上创建该函数,因此可能会在以后导致性能问题.

如果您不需要发送参数,可以执行以下操作：

const Home = (props) => {
    return (
      <button onClick={props.toggleData}></button>
    )
}

如果你需要使用参数,我通常会定义一个类来使用箭头函数创建回调,这样它就会被创建并绑定一次.

class Home extends PureComponent {
  onToggle = () => {
    this.props.toggleData(1,2,3);
  }

  render() {
    return (
      <button onClick={this.onToggle}></button>
    )
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!