React Hooks запомнить стоимость - PullRequest
Новая
       1

React Hooks запомнить стоимость

0 голосов
/ 27 апреля 2019

Имеет ли React.useMemo() стоимость для сравнения, например, shouldComponentUpdate() в React.PureComponent?

Плохо ли помещать переменные, часто изменяемые в глубины useMemo() или useCallback().

Спасибо

1 Ответ

1 голос
/ 27 апреля 2019

Вот µ-ориентир, React.memo() кажется самым быстрым, с PureComponent в середине и useCallback(), соответственно, самым медленным: 

class P extends React.PureComponent {
  render() {
    return <span onClick={() => this.props.n} />
  }
}
function C(props) {
  const c = React.useCallback(() => props.n, [props.n])
  return <span onClick={c} />
}
const M = React.memo(props => <span onClick={() => props.n} />)

const target = document.getElementById('target')
function test(o) {
  console.log('From fastest to slowest:')
  const entries = Object.entries(o)
  const results = new Map(entries.map(([name]) => [name, 0]))
  for (let i = 0; i < 1e3; i++) {
    for (let [name, X] of entries) {
      const start = performance.now()
      for (let j = 0; j < 1e2; j++) {
        ReactDOM.render(<X n={i} />, target)
      }
      const took = performance.now() - start
      results.set(name, results.get(name) + took)
    }
  }
  const sorted = Array.from(results).sort(([, a], [, b]) => a-b)
  for (let [name, t] of sorted) {
    console.log(name, t)
  }
}

test({PureComponent: P, useCallback: C, memo: M})
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="target" hidden></div>
...