React: autoFocus不适用于React 16中的SSR

我认为我们应该发出自动对焦作为属性。

似乎主要的缺点是IE9，iOS Safari和Android浏览器不支持autofocus 。 我还有其他缺点吗？ 通过JS添加自动对焦有多困难/机械性？

如果我们总是在JS中执行此操作，这很容易，但是对于语义而言似乎很糟糕。 在实际聚焦之前，所有脚本加载可能要花费一些时间。 用户可以同时聚焦其他事物，然后突然变得聚焦。 由于使用Fiber可以异步补水，因此我们可能还想进行部分水合，这可能会使情况变得比现在更糟。

我们都可以做，但是然后您会得到一些奇怪的工件，这些工件可能会被聚焦，然后关闭电源，然后又重新聚焦。

如果普通的JS失败，我们可能只能在JS中执行它，但不确定如何检测到它，这可能会增加很多代码。

考虑到浏览器支持问题，我不确定在这里应该进行正确的权衡。

在实际聚焦之前，所有脚本加载可能要花费一些时间。

我认为这是发出属性的非常有力的案例。 听起来我们无法保证正确性，即使我们检查document.activeElement ，用户也可能已经在流程中或已向下滚动页面。 我们不希望页面跳起来，也不希望有人在击键中途开始在另一个输入框中键入内容。

抱歉，如果其中一些内容需要重提，但是如果有人提出有关此问题，那将是我要提出的论点。

发出属性听起来像是正确的方法。 如果我想让自动对焦在不支持的浏览器上工作，将脚本添加到正文末尾似乎是最明智的选择：

    <script>!function(el){el&&el.focus()}(document.querySelector('[autofocus]'))</script>

我猜这只会在HTML页面很大的情况下引起问题。 我猜它也可以检查activeElement（如果没有或没有身体则集中精力），但是那可能是过大了。

抄送https://github.com/facebook/react/issues/3066

不发出自动对焦属性的最初原因是浏览器实现在处理方式上存在很大差异（有些不支持，有些仅关注页面加载等）。 IMHO意味着认真对待自动对焦的任何人都必须通过JS手动应用它。 但是，我隐约记得现在有一些移动浏览器并不真正听取JS焦点，但是在某种程度上确实支持自动聚焦。

这很混乱，但是仅发出该属性有一些优点，如果您对此有强烈的兴趣，则可以手动进行聚焦。 您将获得所有工具。

我就此与

反应16

• 用SSR HTML发出。
• 确保我们不将JS polyfill称为水合元素。
• 继续在客户端创建的元素上将其列入黑名单，并对这些元素使用JS polyfill。

反应17

• 完全除去JS polyfill。
• 如果在提交期间添加了多个autoFocus元素，则发出警告（因为这是浏览器不一致的地方）。

这有意义吗？

如果在提交期间添加了多个autoFocus元素，则发出警告（因为这是浏览器不一致的地方）。

至少不久之前，浏览器在解释autoFocus属性方面也不一致。 我知道，例如FF仅会在页面加载时接受它，而完全忽略任何动态插入的内容。 但是我已经很长时间没有对此进行调查了。

不过，我认为这种方法是正确的。

经过一些基本调查，看起来除Safari之外，大多数现代浏览器在页面加载后根本不尊重autoFocus 。

对于HTML文档来说，这也许很有意义，但是在应用程序中，我希望autoFocus被动态插入的元素所尊重，因为它们基本上是“页面转换”，与SPA中的第一页加载一样多。

因此，我们应该保留polyfill。

变得奇怪了。

如果没有以前，Chrome会尊重使用autoFocus动态添加的元素。 即使使用autoFocus创建输入，将其添加到文档中，然后在下一个刻度中将其删除，也足以禁用将来在Chrome中添加的任何元素的自动对焦。

Firefox根本不关心任何带有autoFocus动态添加的元素。

Safari始终尊重他们。

已在https://github.com/facebook/react/pull/11192中修复