React中同一份初始化逻辑为何函数组件生效类组件不生效？

问题根因 #

类组件的代码存在语法错误：ES6类的成员字段声明不允许使用const/let/var这类变量声明关键字，你在class作用域内写const initCols = [...]属于非法语法，JS引擎解析阶段就会抛出错误，自然无法完成state的初始化。同时你写的类名testclass为小写，不符合React自定义组件大驼峰命名的规范，运行时也可能出现异常。

正确修改方案 #

提供三种常用实现方式：

• 方式一：直接把初始配置写入state定义，无需额外声明变量

class TestClass extends Component {
  state = {
    cols: [
      {
        name: "name"
      }
    ]
  }
}

• 方式二：单独抽离初始列配置复用，正确声明类字段即可

class TestClass extends Component {
  // 类字段声明不需要加const关键字
  initCols = [
    {
      name: "name"
    }
  ];
  // 访问类内部字段需要加this前缀
  state = { cols: this.initCols }
}

• 方式三：在constructor构造函数中完成初始化，逻辑和函数组件的声明逻辑更贴近

class TestClass extends Component {
  constructor(props) {
    super(props);
    // constructor内部是普通函数作用域，可以用const声明变量
    const initCols = [
      {
        name: "name"
      }
    ];
    this.state = { cols: initCols }
  }
}

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