reactjs - 处理事件和附加参数的函数与类组件

问题描述

我正在尝试选择哪种方式是编写必须处理事件并发送一些数据的 React 组件的最优化方式。

嗨，我正在修补并试图让编写反应组件感到舒适。

这段代码获取一些数组并从中制作按钮。 https://codepen.io/daifuco/pen/OdxWYZ

App只是主要组件，没什么特别的。

我的问题：正如您在工作代码中看到的那样，Header + GenreButton：

class Header extends Component {
    render() {
        return (
            <div clasName="footer">
        {this.props.data.map((genre)=>
          <GenreButton clicky={this.props.clickytoTop}genre={genre}/>
        )}
        </div>
        )
    }
}

class GenreButton extends Component {
    handleClick = () => {
        this.props.clicky(this.props.genre)
    }
    render() {
        return (
            <div className="genreButton" onClick={this.handleClick}>{this.props.genre}</div>
        )
    }
}

和 Header2 的结果一样，只是一个功能组件，但据我所知，Header2 每次渲染每个 div 时都会创建一个回调。


function Header2(props) {
    return (

        <div clasName="footer">
      {props.data.map((genre)=>
          <div className="genreButton" onClick={()=>props.clickytoTop(genre)}>
            {genre} 

      </div>)}</div>
    )
}

那么，我知道 Header2 不是设计它的最佳方式吗？Header + GenreButton 是否更优化？有什么办法可以改善吗？

标签： reactjs

如果您有选择权，通常最好使用无状态组件，因为它们不必管理会减慢您的应用程序的状态。

要在其中一个或另一个之间进行选择，如果您的组件需要重新渲染自身，请使用类，如果不需要，请使用函数。

在这种情况下，您GenreButton也不需要是类组件：

const Header = ({ data, clickytoTop }) => ( //Deconstructs your props
    <div clasName="footer">
        {data.map((genre) =>
            <GenreButton clicky={clickytoTop} genre={genre} />
        )}
    </div>
)

为避免每次在渲染中创建新函数，您可以使用装饰箭头函数，您将以这种方式绑定：

const GenreButton = ({ clicky, genre }) => <div className="genreButton" onClick={clicky(genre)}>{genre}</div>

在 props 中传递的函数header现在将具有以下声明，以处理两组参数：

clickFunction = genre => ev => {

}

调用clicky(genre)时它将返回另一个能够接受您的点击事件的函数。

<Header clickytoTop={this.clickFunction}/>

第二个版本（相同的结果）：

const Header2 = ({ data, clickytoTop }) => ( //Deconstructs your props
    <div clasName="footer">
        {data.map(genre =>
            <div className="genreButton" onClick={clickytoTop(genre)}>{genre}</div>
        )}
    </div>
)

reactjs - 处理事件和附加参数的函数与类组件

问题描述

解决方案

推荐阅读