Just for recording some points casually.

And you can refer to You-Dont-Need-jQuery.

Questions

  • How to get the runtime diff?
  • How to replace all children of a HTMLElement/DOM
  • How to set up React HMR environment

How to get the runtime diff?

  1. console.time('sort');
  2. arr.sort();
  3. console.timeEnd('sort'); // console result -- sort: 542.668701171875ms

How to replace all children of a HTMLElement/DOM?

If you simply want to replace all children, regarding of the type, why don’t you just set its content to ‘’ and then add your code:

  1. container.innerHTML = '';
  2. container.appendChild(newContainerElements); // or fragment (suggest)

How to set up React HMR environment?

In order to set up React HMR env, you should know about several points like belows:

hot vs —hot vs new webpack.HotModuleReplacementPlugin()

Now the devServer.hot has been deprecated.

If ‘—hot’ & ‘new webpack.HotModuleReplacementPlugin()’ are indicated at the same time, you could get the ‘Maximum call stack size exceeded’ error.

The solution: you just need to indicate one of them.