如何获取React Native类组件的state属性名与内部方法名

场景1：运行时可获取组件实例 #

直接通过实例和类原型即可拿到所需内容，无需反射或eval：

• 获取state属性名
  组件实例化后直接读取state的键即可，示例：

  const personInstance = new Person();
  const stateKeys = Object.keys(personInstance.state);
  // 输出结果：['name', 'dob', 'gender', 'executedDate']
  

• 获取类定义的方法名
  注意区分两种方法的存储位置：普通方法（如render）存在类原型上，类属性形式定义的箭头函数（如onGenderChange）存在实例自身上：

  // 拿原型上的普通方法，过滤掉构造函数
  const protoMethods = Object.getOwnPropertyNames(Person.prototype)
    .filter(item => item !== 'constructor' && typeof Person.prototype[item] === 'function');
  // 拿实例上的箭头函数方法
  const instanceMethods = Object.getOwnPropertyNames(personInstance)
    .filter(item => typeof personInstance[item] === 'function');
  // 合并得到所有自定义方法：['render', 'onGenderChange']
  const allCustomMethods = [...protoMethods, ...instanceMethods];
  

  如果需要过滤掉React自带的原型方法，自己维护一个内置方法黑名单做过滤即可。

场景2：仅存在组件源码字符串、无运行环境 #

可以通过AST静态解析实现，步骤如下：

1. 用babel parser将源码字符串转换为抽象语法树
2. 遍历语法树找到类声明节点
3. 分别提取构造函数内state对象的属性、类体内的方法节点和类属性节点
   该方案无需运行代码，安全性更高，也能精准拿到初始定义的所有内容。

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