通过 console.log
通过上面的 React update 流程，我们发现每次渲染组件的时候，都会通过组件返回的 JSX 再去到后面的流程，所以我们可以在组件写 console.log 来判断组件是否重新渲染，如下：
Function Component，在函数体语句写 console.log
const Box = () => {
console.log('Box render.');
return <div></div>;
}
Class Component，在 render() 函数写 console.log
class Box extends React.Component {
render() {
console.log("Box render.");
return <div>Box</div>;
}
}
使用 React DevTools
我们可以在 React DevTools 启用 Highlight updates when components render 功能，这时候每当组件发生渲染的时候，组件就会高亮。
你还可以通过 React DevTools Profiler 功能查看组件为什么渲染、渲染的时间等等信息，对之后组件的优化可以起到参考作用。
Virtual DOM 和 Real DOM
组件的重复渲染不一定会直接操作到真实DOM，因为 React 有 Diff 算法来避免操作无更新的真实DOM，我们可以打开 Chrome 开发者工具 -> More tools -> Rendering，开启 Paint flashing，这时候我们可以观察到真实DOM的操作情况。
个人看法
虽然说减少组件重新渲染可以提升一定的性能，但是我们也不能盲目地避免渲染，需要视情况而优化，如果是为了避免重新渲染而降低了代码的可读性，这样有点得不偿失。
