Какой из этих подходов лучше для обработчика условных событий?

Question

Я хочу, чтобы мой компонент Button обрабатывал только события onClick, если функция обратного вызова передана компоненту. У меня есть два подхода к этому, но я не знаю, какой подход лучше.

Подход 1 - Связать handleClick с this.handleClick или false в конструкторе и передать handleClick в onClick в методе рендеринга.

class Button extends Component {
  static propTypes = {
    children: PropTypes.element.isRequired,
    onClick: PropTypes.func
  };

  static defaultProps = {
    onClick: undefined
  };

  constructor(props) {
    super(props);

    this.handleClick = (props.onClick) && this.handleClick.bind(this);
  }

  handleClick() {
    const { onClick } = this.props;

    onClick();
  }

  render() {
    const { children } = this.props;

    return (
      <Wrapper onClick={this.handleClick}> // False if onClick is undefined
        {children}
      </Wrapper>
    );
  }
}

Подход 2 - связать handleClick в конструкторе и передать handleClick или false в методе рендеринга.

class Button extends Component {
  static propTypes = {
    children: PropTypes.element.isRequired,
    onClick: PropTypes.func
  };

  static defaultProps = {
    onClick: undefined
  };

  constructor() {
    super();

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { onClick } = this.props;

    onClick();
  }

  render() {
    const { children, onClick } = this.props;

    return (
      <Wrapper onClick={(onClick) && this.handleClick}>
        {children}
      </Wrapper>
    );
  }
}

Answer 1

Я думаю, что это вопрос предпочтений, так как оба случая почти равны.

1. Если вы выберете Подход 1 , вы сэкономите место в памяти (условно) , поскольку this.handleClick будет небольшим значением для случаев, когда props.onClick undefined или false, при втором подходе вы бы всегда устанавливали функцию, которая занимает немного больше места (однако это место для меня амортизируется).

2. Подход 2 используется чаще, люди обычно связывают функцию в конструкторе без каких-либо условий и проверяют вызов в необходимом свойстве.

Так же, как примечание, есть третий подход, который вы могли бы использовать, который заключается в определении функции стрелки в onClick опоре, я на самом деле не использую это так много, но просто хотел упомянуть об этом.

Подробнее о передаче функций компонентам в реактивной документации