React中状态内常量赋值及this.state解构赋值写法疑问解答

1. 如何在React的state中赋值常量？ #

咱们分两种组件场景来拆解，你可以对应自己的项目情况来用：

类组件场景 #

• 如果你的组件是带constructor的类组件，直接在state初始化时把常量值写进去就行：

  class MonthPicker extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        // 直接将常量值存入state
        minMonth: moment().subtract(12, 'month'),
        month: moment()
      };
    }
    // ...组件其他逻辑
  }
  

• 也可以省略constructor，直接用类属性的方式初始化state：

  class MonthPicker extends React.Component {
    state = {
      minMonth: moment().subtract(12, 'month'), // 固定常量值
      month: moment()
    };
    // ...组件其他逻辑
  }
  

函数组件（Hooks）场景 #

用useState Hook时，直接把常量作为初始值传入即可，如果这个常量是组件内固定用的，也可以先定义再传入：

// 定义在组件外的全局常量（如果多个组件共用的话）
const MAX_MONTH_RANGE = 12;

function MonthPicker() {
  // 组件内的局部常量
  const initialMonth = moment();
  
  const [state, setState] = useState({
    minMonth: initialMonth.subtract(MAX_MONTH_RANGE, 'month'),
    month: initialMonth
  });
  // ...组件其他逻辑
}

小提醒：如果这个常量不需要随state更新，其实没必要放进state里，直接定义在组件内部或外部使用就行，能减少不必要的state更新开销~

2. 代码中的const { month, } = this.state;是什么写法？ #

这是ES6对象解构赋值的语法，末尾的逗号是可选的尾随逗号（Trailing Comma），属于团队代码风格的偏好，不影响功能。

具体说明： #

• 原本从this.state里取month属性，需要写const month = this.state.month;
• 用解构赋值后，const { month } = this.state;就完成了同样的操作，直接把this.state.month的值赋值给同名变量month
• 末尾的逗号month,只是为了方便后续添加新的属性提取，比如之后要加year的话，直接写成const { month, year } = this.state;就行，不用修改上一行代码，不少团队会用这种方式提升代码的可维护性

结合你给出的代码来看：

previous() {
  const { month, } = this.state;
  this.setState({ month: month.subtract(1, 'month'), });
}

这段代码完全等价于：

previous() {
  const month = this.state.month;
  this.setState({ month: month.subtract(1, 'month') });
}

解构赋值能让代码更简洁，尤其是需要从state中提取多个属性时，优势会更明显~

内容的提问来源于stack exchange，提问作者jammy