「React源码分析」四. React DOM操作之CSS属性操作分析

2021SC@SDUSC

前言

在传统Html开发或者JQuery开发时，我们可能首先需要选取到我们想要更新或删除等操作的元素，然后再进行相关操作。但在React中，大部分情况下我们并不需要通过查询 DOM 元素来更新组件的 UI，我们只需要关注设置组件的状态（setState），然后React会自动帮我们完成组件相应的更新。

React-DOM中编写了大量的方法来适配对浏览器DOM进行相关的操作。从这篇文章开始，将逐一分析React 17中react-dom部分的有关源码。希望通过这一系列文章，增进对ReactDOM的理解，了解React组件更新是具体如何反应到浏览器DOM层面的。

CSS属性操作源码分析

ReactDOM中对CSS属性的操作相关的源码编写在packages\react-dom\src\client\CSSPropertyOperations.js文件中。
在这里，定义了几个方法：createDangerousStringForStyles、setValueForStyles、isValueEmpty、expandShorthandMap、validateShorthandPropertyCollisionInDev。下面对其逐一分析：

createDangerousStringForStyles

这个方法用来在DEV模式下检查SSR的正确性。它接收一个Style对象，返回序列化后生成的CSS样式字符串。

/**
 * This creates a string that is expected to be equivalent to the style
 * attribute generated by server-side rendering. It by-passes warnings and
 * security checks so it's not safe to use this value for anything other than
 * comparison. It is only used in DEV for SSR validation.
 * 创建预计与SSR生成的样式属性等价的字符串。它绕过了警告和安全检查，所以除了用于
 * 比较之外，使用这个值是不安全的。它只用于DEV环境下对SSR的检查。
 */
export function createDangerousStringForStyles(styles) {
   
  if (__DEV__) {
   
    let serialized = ''; // 序列化后的CSS字符串
    let delimiter = '';  // CSS间隔符，一开始为空字符串，后为;
    for (const styleName in styles) {
    // 遍历styles对象的所有key
      if (!styles.hasOwnProperty(styleName)) {
   
        continue;
      }
      const styleValue = styles[styleName];
      if (styleValue != null) {
    
        const isCustomProperty = styleName.indexOf('--') === 0;
        // 拼接属性名，如果是CSS自定义属性，直接拼接上去即可
        // 若是原生属性，将驼峰式命名转换成CSS的短横式命名
        serialized +=
          delimiter +
          (isCustomProperty ? styleName : hyphenateStyleName(styleName)) +
          ':'