javascript - 在 React/Redux 中使用 Object.assign 或 Spread 运算符？这是更好的做法

Question

我对使用 Object.assign 进行 React 和 Redux 感到有些困惑。

我读了这个article 。

它说 ES6 不被所有浏览器支持，但我已经开始使用它了。

我有两个问题:

1. 继续使用 Object.assign 是正确的决定吗？
2. 有什么替代方案吗？

我的代码

export const selectDiameter = (scaleData, size) => {
  return {
    type: SELECT_DIAMETER,
    payload: Object.assign({}, scaleData, {
         diameter: Object.assign({}, scaleData.diameter, {
             selected_tube_diameter: size,
             is_clicked: true,
             audio: Object.assign({}, scaleData.diameter.audio, {
               is_played: true
             })
         })
      })
   }
}

上述代码的替代方案是什么？

Answer 1

Redux 文档建议您使用扩展运算符方法而不是 Object.assign

根据文档:

An alternative approach is to use the object spread syntax proposed for the next versions of JavaScript which lets you use the spread (...) operator to copy enumerable properties from one object to another in a more succinct way. The object spread operator is conceptually similar to the ES6 array spread operator

当您组合复杂对象时，使用对象扩展语法的优势变得更加明显

使用扩展运算符语法

export const selectDiameter = (scaleData,size) => {
  return {
    type: SELECT_DIAMETER,
    payload: {...scaleData, 
                 diameter: {
                          ...scaleData.diameter,
                           selectedTube: size,
                           isClicked: true,
                           audio: {
                                ...scaleData.diameter.audio,
                                isPlayed: true
                           }
                 }

             }
   }
}

它仍然使用ES6。请参阅Redux docs 了解有关配置代码的更多信息

但是当您处理嵌套数据时。我更喜欢使用immutability-helpers

对于你的代码，它会像

import update from 'immutability-helpers';

export const selectDiameter = (scaleData,size) => {
  return {
    type: SELECT_DIAMETER,
    payload: update(scaleData, {
         diameter: {
            selectedTube: { $set: size},
            isClicked: { $set: true},
            audio: {
                isPlayed: {$set: true}
            }
         }
    })
   }
}