React：使用onBlur和onFocus渲染性能

Question

• 直播 - https://tuchk4.github.io/onBlurExample
• 来源 - https://github.com/tuchk4/onBlurExample

  

在这个例子中 - ＆＃34;渲染＆＃34;是父组件构造函数和componentDidMount之间的时间。   （父组件 - 我的意思是按钮列表包装器）

在devtools打开控制台。步骤进行：

使用onFocus渲染1000个按钮：

• 刷新
• 点击＆＃34; FOCUS＆＃34;

渲染~0.02（确定）

使用onBlur渲染1000个按钮：

• 刷新
• 点击＆＃34; BLUR＆＃34;

渲染~0.02（确定）

使用onFocus和onBlur渲染1000个按钮：

• 刷新
• 点击＆＃34; BOTH＆＃34;

渲染~0。（奇怪）

使用onFocus和onBlur重新渲染1000个按钮：

• 刷新
• 点击＆＃34; BOTH＆＃34;
• （~0.3秒）（奇怪）
• 点击＆＃34;清除＆＃34;
• 点击＆＃34; BOTH＆＃34;
• （~0.015秒）（好）

问题：

为什么onBlur和onFocus的组件的初始渲染时间比其他组件大得多？