NsNe / blog

4 stars 0 forks source link

React组件中的事件处理函数 #6

Open NsNe opened 5 years ago

NsNe commented 5 years ago

在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/babel-plugin-proposal-class-properties

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/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

//仅作为示例代码,不遵循常用代码规范
//子组件
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层出不穷。需要我们不断保持学习,深挖技术底层,这样遇到任何新的技术,才能够以一法破万法。