「React源码分析」五. React DOM中对Node节点的属性操作分析

英国大爷扫广场

于 2021-10-30 20:15:46 发布

阅读量410

点赞数

分类专栏： 2021SC@SDUSC 文章标签： react.js javascript reactjs

本文链接：https://blog.csdn.net/u012922190/article/details/121055851

版权

本文深入探讨React DOM中对Node节点属性的操作，包括`getValueForProperty`、`getValueForAttribute`和`setValueForProperty`的源码分析，旨在理解React如何在底层处理DOM属性。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

DOM Node节点属性操作源码分析

上一篇博客介绍了ReactDOM中对于CSS属性的操作。本篇博客将对DOM的属性操作（DOMPropertyOperaions）的源码进行分析。
主要操作就是获取浏览器DOM中对应node节点的属性并设置对应node节点属性。
相关源码在packages\react-dom\src\client\DOMPropertyOperations.js文件中定义。

getValueForProperty

/**
 * 获取node节点上属性的值。该方法只用于DEV模式下的SSR校验。
 * "expected"参数是用来提示我们期望的返回值，因为有些属性有多个等价的值。
 */
export function getValueForProperty(
  node: Element,  // 要获取属性的那个node节点
  name: string,  // 属性名
  expected: mixed,  // 期望值
  propertyInfo: PropertyInfo, 
  /**
   * PropertyInfo记录了一个节点属性的值的相关信息，是这样一个数据类型：
export type PropertyInfo = {|
  +acceptsBooleans: boolean,
  +attributeName: string,
  +attributeNamespace: string | null,
  +mustUseProperty: boolean,
  +propertyName: string,
  +type: PropertyType,
  +sanitizeURL: boolean,
  +removeEmptyString: boolean,
|};
   **/

): mixed {
   
  if (__DEV__) {
    // 该方法只在DEV模式下有效
    if (propertyInfo.mustUseProperty) {
    // 如果是必选属性
      const {
   propertyName} = propertyInfo;
      return (node: any)[propertyName];
    } else {
   
      if (!disableJavaScriptURLs && propertyInfo.sanitizeURL) {
   
        // If we haven’t fully disabled javascript: URLs, and if
        // the hydration is successful of a javascript: URL, we
        // still want to warn on the client.
        sanitizeURL(‘’ + (expected: any));
      }

      const attributeName = propertyInfo.attributeName;

      let stringValue = null;

      if (propertyInfo.type === OVERLOADED_BOOLEAN) {
    
        if (node.hasAttribute(attributeName)) {
   
          const value = node.getAttribute(attributeName);
          if (value === ‘’) {
   
            return true;
          }
          if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
   
            return value;
          }
          if (value === ‘’ + (expected