面试题：使用 ES6 或 ES5 语法来编写 React 代码有什么区别？

使用 ES6（ECMAScript 2015）或更现代的 JavaScript 语法与传统的 ES5 语法编写 React 代码，在可读性、简洁性、功能性和开发效率上有显著区别。随着 Babel 等转译工具的普及，现代 React 开发已全面拥抱 ES6+。

以下是主要区别：

---

1. 组件定义方式

ES5: React.createClass

// ❌ 已废弃
var MyComponent = React.createClass({
  getDefaultProps: function() {
    return { name: 'Guest' };
  },
  render: function() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
});

• 缺点：
  • 使用工厂函数 createClass。
  • this 自动绑定，但 Mixins 是反模式。
  • 已废弃，不应在新项目中使用。

ES6+: class 继承

// ✅ 类组件 (ES6)
class MyComponent extends React.Component {
  static defaultProps = {
    name: 'Guest'
  };

  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

• 优点：
  • 使用标准的 ES6 class 语法，更符合现代 JavaScript 规范。
  • 更清晰的继承关系。
  • 可以使用静态属性 defaultProps 和 propTypes。

---

2. 函数组件与箭头函数

ES5: 普通函数

// ❌ 冗长
function Welcome(props) {
  return React.createElement('h1', null, 'Hello, ', props.name);
}

ES6+: 箭头函数 + JSX

// ✅ 简洁
const Welcome = ({ name }) => <h1>Hello, {name}!</h1>;

• 优点：
  • 箭头函数：语法更简洁，尤其适合无状态组件。
  • 解构赋值：直接从 props 解构出需要的属性，减少重复书写 props.。
  • JSX：虽然不是 ES6 特性，但通常与 ES6 一起使用，让 UI 代码更直观。

---

3. 模块系统

ES5: require

// ❌ CommonJS
var React = require('react');
var Component = React.Component;

ES6+: import / export

// ✅ ES Modules
import React, { Component } from 'react';
import MyComponent from './MyComponent';
export default App;

• 优点：
  • 静态分析友好，支持 tree-shaking。
  • 语法更清晰，支持命名导入/导出和默认导入/导出。

---

4. 状态与方法绑定

ES5: getInitialState, 手动绑定

// ❌ 冗长且易错
var Button = React.createClass({
  getInitialState: function() {
    return { clicked: false };
  },
  handleClick: function() {
    this.setState({ clicked: true });
  },
  render: function() {
    // 需要手动 bind
    return <button onClick={this.handleClick.bind(this)}>Click</button>;
  }
});

ES6+: constructor 初始化 state, 箭头函数自动绑定

// ✅ 更清晰
class Button extends Component {
  state = { clicked: false }; // 类字段语法（提案，但广泛支持）

  // 箭头函数自动绑定 this
  handleClick = () => {
    this.setState({ clicked: true });
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

• 优点：
  • 状态直接在类中初始化，无需 getInitialState。
  • 箭头函数作为类属性，自动绑定 this，避免了手动 bind 的样板代码。

---

5. 对象和数组的展开操作符 (...)

ES5: Object.assign

// ❌ 冗长
var newState = Object.assign({}, this.state, { count: this.state.count + 1 });
this.setState(newState);

ES6+: 展开语法

// ✅ 简洁
this.setState(prevState => ({
  ...prevState,
  count: prevState.count + 1
}));

• 优点：
  • 创建新对象/数组时语法更简洁。
  • 强调不可变性（Immutability），是现代前端开发的最佳实践。

---

6. 模板字符串

ES5: 字符串拼接

// ❌ 易错
var greeting = 'Hello, ' + name + '! You have ' + count + ' messages.';

ES6+: 模板字符串

// ✅ 清晰
const greeting = `Hello, ${name}! You have ${count} messages.`;

• 优点：
  • 多行字符串和变量插值更简单。
  • 可读性更强。

---

总结对比表

特性	ES5 (旧)	ES6+ (现代)	优势
组件定义	React.createClass	class extends React.Component	标准化，已废弃旧方式
函数组件	function 声明	箭头函数 =>	更简洁，自动绑定
模块	require / module.exports	import / export	支持 tree-shaking，更现代
默认 Props	getDefaultProps()	static defaultProps = {}	语法更清晰
状态初始化	getInitialState	state = {} 或 constructor	更直观
方法绑定	this.method.bind(this)	箭头函数类字段	减少样板代码
对象/数组操作	Object.assign, concat	展开操作符 ...	简洁，强调不可变性
字符串	+ 拼接	模板字符串 `${}`	可读性强

---

结论

• ES5 语法在 React 中已过时，尤其是 React.createClass 已被官方废弃。
• 现代 React 开发完全基于 ES6+ 语法，结合 JSX、Hooks 等特性，代码更加简洁、可读、高效。
• 使用 ES6+ 不仅是语法糖，更是为了利用现代 JavaScript 的强大功能（如模块化、解构、展开操作符）来编写更高质量、更易于维护的 React 应用。
• 实际开发中，通过 Babel 将 ES6+ 代码转译为兼容性更好的 ES5 代码，因此开发者可以放心使用最新语法。