React Hooks记忆成本

Question

像React.PureComponent中的shouldComponentUpdate()一样，React.useMemo()是否有成本进行比较？

将经常更改的变量放入useMemo()或useCallback()的dep中是不是很糟糕？

谢谢

Answer 1

这是一个µ基准测试，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>

​