在react中实现事件处理,有多种写法,那那种写法相对更优,更利于React的渲染性能呢?
React组件中添加事件处理的几种方式
constructor函数中bind
class ReactEvent extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
使用箭头函数(实验语法,尚未标准化)
render中使用箭头函数
class ReactEvent extends Component {
handleClick() {
console.log('Click');
}
render() {
return <button onClick={() => this.handleClick()}>Click Me</button>;
}
}
使用class fields语法(https://babeljs.io/docs/en/ba...)
class ReactEvent extends Component {
//此函数会被绑定到ReactEvent类的实例
handleClick = () => {
console.log('Click');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
在render中使用bind
class ReactEvent extends Component {
handleClick() {
console.log('Click');
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
几种方式比较
影响 | constructor函数中bind | 使用class fields语法 | render中使用箭头函数 | 在render中使用bind |
---|---|---|---|---|
render时生成新函数 | 否 | 否 | 是 | 是 |
性能 | 无影响 | 无影响 | 有影响 | 有影响 |
可直接携带参数 | 否 | 否 | 是 | 是 |
简洁性 | 不好 | 好 | 好 | 好 |
上表中我们看到,在render中直接bind或者箭头函数都会影响性能,原因在于,在render 中的bind和箭头函数在每次render时都会创建新的函数,导致子组件的props发生改变,这在PureComponent中会影响性能,除非自己在shouldComponentUpdate中进行优化。
bind和箭头函数相关请参考mdn:
https://developer.mozilla.org...
https://developer.mozilla.org...
//仅作为示例代码,不遵循常用代码规范
//子组件
class Button extends React.PureComponent {
render() {
console.log('================')
return (
<button onClick={this.props.handleClick}>hahaha</button>
)
}
}
//父组件
class ButtonList extends React.Component {
constructor(props) {
super(props);
this.state = {
index: -1,
list: [1, 2, 3, 4]
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click');
}
onStateChange = () => {
this.setState({
index: 1
});
}
render() {
return (
<div>
<button onClick={this.onStateChange}>stateChange</button>
{
this.state.list.map(item => <Button handleClick={this.handleClick}/>)
}
</div>
)
}
}
ReactDOM.render(
<ButtonList />, document.getElementById('root')
);
事件处理中传参
在开发当中,经常遇到对一个列表做操作,可能包含删除,修改,查看。这时候绑定事件就需要传参,通常为id。
直接传递参数
//render中使用箭头函数
{
this.state.list.map(item => (
<Button onClick={() => this.handleClick(item.id)}/>
))
}
//render中使用bind
{
this.state.list.map(item => (
<Button onClick={this.handleClick.bind(this, item.id)}/>
))
}
使用data属性
//handleClick中通过e.target.dataset.id获取
{
this.state.list.map(item => (
<Button data-id={item.id} onClick={this.handleClick}/>
))
}
总结
这里不强制推荐使用哪一种,对于各个团队来说,可以根据项目,选择自己团队的事件绑定方式。
因为箭头函数的简洁性,在公司项目中,我们团队通常使用class fields 定义箭头函数来绑定事件。
当需要传参的时,单个参数传递使用data属性传参。
多个参数传递时,采用拆分子组件的方式回调传参。
//子组件
class Button extends React.PureComponent {
handleClick = () => {
this.props.handleClick(this.props.item);
}
render() {
return (
<button onClick={this.handleClick}>hahaha</button>
)
}
}
//父组件
class ButtonList extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [1, 2, 3, 4]
};
}
handleClick = (item) => {
console.log('Click', item);
}
render() {
const { list=[] } = this.state;
return (
<div>
{
list.map(item => <Button handleClick={this.handleClick} item={item}/>)
}
</div>
)
}
}
ReactDOM.render(
<ButtonList />, document.getElementById('root')
);
结语
前端发展巨快,各种新特性,新框架,新UI层出不穷。需要我们不断保持学习,深挖技术底层,这样遇到任何新的技术,才能够以一法破万法。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。