请求解析React Native中的`render() {...}`语法

首先直接解决你的核心困惑：render() {...}是在定义类方法，不是调用函数，它是ES6类语法里的简洁方法定义，和箭头函数属于不同的语法范畴，下面一步步给你拆解：

1. 语法来源：ES6类的简洁方法定义 #

在ES6之前，我们用构造函数+原型链模拟类的写法，定义方法需要写function关键字并手动挂载到原型上；ES6引入class语法后，提供了更清爽的方法定义方式——直接在类的大括号里写方法名() {...}，省略了function关键字，这就是你看到的render() {...}的由来。

比如React类组件的ES6写法：

class MyComponent extends React.Component {
  render() {
    return <Text>Hello React Native</Text>;
  }
}

这种写法本质上和在类的原型上定义render方法完全等价，只是语法更简洁直观。

2. 和ES6箭头函数的区别 #

你觉得它像箭头函数() => {...}，但两者有本质差异：

• render() {...}是类的原型方法，它的this默认指向组件实例（不过在React早期，如果你在render里调用自定义方法，可能需要手动绑定this，比如在构造函数里写this.myMethod = this.myMethod.bind(this)）；
• 箭头函数没有自己的this，它的this继承自外层作用域，而且箭头函数不能作为类的原型方法（如果把render写成箭头函数，会变成实例的属性方法，而非原型共享方法，虽然能运行但不够高效）。

3. 工作机制 #

在React类组件中，render是一个必须的生命周期方法：

• React会在组件初始化、状态（state）或属性（props）更新时，自动调用组件实例的render方法；
• render方法需要返回合法的React元素（比如JSX、null、数组等），React会根据这个返回值渲染对应的UI到屏幕上。

4. 用ES5怎么写？ #

如果要转换成ES5的写法，我们需要回到构造函数+原型链的传统模式：

// 定义组件构造函数
function MyComponent(props) {
  React.Component.call(this, props); // 继承React.Component的构造逻辑
}

// 继承原型方法
MyComponent.prototype = Object.create(React.Component.prototype);
MyComponent.prototype.constructor = MyComponent;

// 把render方法挂载到原型上
MyComponent.prototype.render = function() {
  return React.createElement(Text, null, 'Hello React Native');
};

注意ES5本身不支持JSX语法（除非用Babel转译），所以这里用React.createElement来创建元素，和ES6里的<Text>Hello React Native</Text>功能完全一致。

总结一下：render() {...}是ES6类的简洁方法定义，用来声明React类组件的渲染逻辑，React会自动调用它生成UI，转换成ES5就是在组件构造函数的原型上挂载一个普通函数。

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