导语

已React 为例，聚焦在一个类的方法中。 然后，拔剑吧！少年，是熟悉的味道。

正文

0

劝人多用const 是好的，但下面的观点多多少少有点像耍流氓。

• 既然函数执行完它都没有变，就应该声明为常量
• 使用const 可以防止一个变量重复使用
• 声明为常量，后续我就可以不再关注它的变化了。

先看一个渲染表格的例子

数据格式

export enum ESex {
  man = "man",
  woman = "woman",
}

export interface IHero {
  id: string;
  name: string;
  age: number;
  sex: ESex;
}

渲染姓名

  private renderNameColumn = (name, { sex, id }: IHero) => {
    const { checkedIdList } = this.state;
    const checked = checkedIdList.some((key) => key === id);
    let sexStr = sex === ESex.man ? "男" : "女";
    let color = checked ? "red" : "blue";
    return (
      <span style={{ color }}>
        {name} ({sexStr})
      </span>
    );
  };

是常量它不能被再次赋值，不代表没有再次赋值就是常量

checked 在写这行语句的时候它的状态就确定，声明成一个常量为啥问题。 text 和 color 的值是没有变，但你很难表述它确定了一个什么状态。

可以预见，在不断变化的业务中，text、color 是最有可能被再次赋值的。

比如IHero 增加了isAnimal，这时候就要渲染出公、母了，不能总指望在一行代码中写完吧。

如此看来，checkedIdList 声明为const是合理的，它的状态始终不会变。

1

每一个标识符都只承担一种职责，承担多个会造成逻辑的混乱，这是写代码的大忌。 用const 是指标不治本，一种职责声明了太多标识符，滥用比不用更可怕。

多用const 正是希望在编码的时候，程序员能通过思考标识符的职责与状态梳理出执行流程，做到提前规划，从而一气呵成。

2

看一个添加的例子

  private onHeroAdd = (hero: IHero) => {
    const { dataSource } = this.state;
    let newDataSource = [...dataSource];
    if (hero.sex === ESex.man) {
      newDataSource.push(hero);
    } else {
      newDataSource.unshift(hero);
    }
    this.setState({
      dataSource: newDataSource,
    });
  };

newDataSource 是变了还是没变? const 只能限制再次赋值而已。

结语

代码规范应侧重实用性，强调帮助程序员解决问题，而非约束程序员不犯什么问题，正所谓易疏不易堵。

每个人都有能力的天花板，这种事情在于水道渠成，强行拔高无异于揠苗助长，当举棋不定时，请优先使用let，希望总比绝望好。