Reactjs 在'；哑巴'；反应中的组分

看看这个简单的例子，其中prop

toggleData

将是映射到容器props的redux thunk操作

这是将这样的函数传递给子“dumb”组件的推荐方法吗？我在网上读到一篇文章说，在处理程序中使用箭头函数是昂贵的，而且从性能角度看不是很有效

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

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

类容器扩展React.Component{
render（）{
返回(
)
}
}
const Home=（道具）=>{
返回(
{props.toggleData（）}}>
)
}

是！避免在JSX中使用箭头函数。因为函数将在每次渲染时创建，这可能会导致以后的性能问题

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

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

const Home=（道具）=>{
返回(
)
}

如果需要使用参数，我通常会定义一个类来使用arrow函数创建回调，这样它只会被创建和绑定一次

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

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

class Home扩展了PureComponent{
onToggle=（）=>{
这个.props.toggleData（1,2,3）；
}
render（）{
返回(
)
}
}

因为您不想从子组件传递任何额外的参数，所以可以直接使用

onClick={props.toggleData}

而不使用箭头创建新函数，请检查：）的最后一段，您还应该使用this.ontogle=this.ontogle.bind（this）在构造函数中，上述注释不正确-如果在类上下文中执行函数时使用

onToggle=（）=>

（即作为类属性），则不需要绑定函数。谢谢！如果我们想从视图中传递变量参数（如索引），您怎么做？我们是否被迫这样做：{props.toggleData（index）}}>？