跳到主要内容

DOM 通用组件

React 怎样把 props 对应到浏览器属性？​

  • 标签与属性: 小写内置标签对应 HTML/SVG 元素，多数属性采用 camelCase，如 className、tabIndex；aria-_ 与 data-_ 保留原写法;
  • Style: 传 JavaScript 对象而不是 CSS 字符串，多数需要长度的数字会按像素处理，无单位属性保留数值;
  • 特殊用途: ref 关联节点，key 用于 React 身份匹配，不能把它们都当作普通 DOM attribute;
const view = (
  <button
    className="primary"
    tabIndex={0}
    data-testid="save"
    aria-label="保存"
    style={{ padding: 8, opacity: 0.9 }}
  >
    保存
  </button>
);

什么是事件委托？合成事件与浏览器原生事件怎样衔接，其作用是什么？​

  • 事件委托机制: React 事件处理函数绑定到根元素，而不是每个元素，事件委托到根元素处理，减少内存占用。
  • 合成事件: React 对浏览器原生事件的统一封装，可访问 target、currentTarget、preventDefault、stopPropagation 与 nativeEvent 等;
  • 提供跨浏览器一致的事件接口；接入 React 的事件委托机制；
  • React 事件传播通常与 DOM 冒泡相似，但并非所有事件都完全对应原生语义；例如 React 的 onFocus、onBlur 会冒泡。

如何渲染一段已经准备好的 HTML？​

  • 显式接口: dangerouslySetInnerHTML={{ __html: html }} 告诉 React 使用 HTML 字符串，不能同时再提供 children;
  • 信任边界: 只对可信且已正确清理的数据使用，插值的自动转义不能保护这个入口，用户输入直接拼入会造成 XSS;
  • 对象组织: 把清理后的 HTML 与创建对象的责任放在清晰边界处，避免渲染时临时拼接不受控内容;
const html = "<strong>你好</strong>";

function Article() {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

React 如何处理自定义元素？​

  • 识别规则: 含连字符的标签等自定义元素按其 DOM 能力处理，不能照搬普通 React 组件 props 的直觉;
  • Property 分配: 元素实例在构造时存在的属性可以接收复杂值，否则通常作为 attribute 字符串化处理;
  • 自定义事件: 使用匹配事件名的 on 前缀，大小写与连字符要与元素派发的事件保持一致;

什么时候使用抑制警告的属性？​

  • 内容可编辑: suppressContentEditableWarning 只适合由专门编辑器自行管理内容的场景，它不会自动协调 React children 与浏览器修改;
  • 水合差异: suppressHydrationWarning 是单层差异的逃生口，不修复结构错误，水合排查见客户端 root;