Реагировать - предотвратить пересчет HOC на основе реквизита - PullRequest
Новая
       27

Реагировать - предотвратить пересчет HOC на основе реквизита

0 голосов
/ 03 мая 2019

Мне интересно, есть ли шаблон, позволяющий мне предотвратить пересчет HOC на основе некоторого условия, вот пример: 

const DumbComponent = () => <button>Click me<button/>;

// Third party HOC, that I can't modify
const SmartComponent = Component => class extends Component {
  componentWillReceiveProps() {
    // Complex stuff that only depends on one or 2 props
    this.state.math = doExpensiveMath(props);
  }
  
  render() {
    return <Component {...this.props} math={this.state.math} />;
  }
}

const FinalComponent = SmartComponent(DumbComponent);

То, что я ищу, это шаблон, который мешает этому HOC делать свое дело, если реквизиты, от которых я знаю, что это зависит, не изменились. Но это не останавливает повторное рендеринг всего дерева на основе реквизита, как сделал бы shouldComponentUpdate.

Суть в том, что этот HOC происходит из другой библиотеки, и в идеале я не хочу его разветвлять.

1 Ответ

0 голосов
/ 03 мая 2019

То, что я получил, это то, что вы хотите помешать hoc пересчитать определенную логику, для этого вы можете сделать следующее: - 

const DumbComponent = () => <button>Click me<button/>;

// Third party HOC
const SmartComponent = Component => class extends Component {
  componentWillReceiveProps() {
    // Complex stuff that only depends on one or 2 props
    this.state.math = doExpensiveMath(props);
  }

  render() {
    return <Component {...this.props} math={this.state.math} />;
  }
}

const withHoc = SmartComponent(DumbComponent);
class FinalComponent extends Component { 
    render() {
        if (your condition here) { 
            return (
                <withHoc {...this.props} />
            ); 
        }

        else {
            return <DumbComponent {...this.props}/>;
        }
    }
}

export default FinalComponent;
...