React.js中常用的ES6写法总结（推荐）

一 模块 1 引入模块以便使用 用import实现： import '模块文件地址' import 组件 from '模块文件地址' 2 导出模块 用export default实现： export default class MyComponent extends Component{ ... } 引用： import MyComponent from './MyComponent'; 二 组件 1 定义组件 通过定义一个继承自React.Component的class来定义一个组件类： class Photo extends React.Component { render 在React.js开发中，ES6（ECMAScript 2015）的语法极大地提高了代码的可读性和简洁性。以下是一些React.js中常用的ES6写法： 1. **模块导入与导出**： - **引入模块**：使用`import`关键字，例如`import '模块文件地址'`用于引入全局模块，`import 组件名 from '模块文件地址'`用于引入特定组件。例如，`import MyComponent from './MyComponent'`。 - **导出模块**：使用`export default`声明默认导出，如`export default class MyComponent extends Component{...}`。默认导出可以在导入时省略名称，直接使用`import MyComponent from './MyComponent'`。 2. **组件定义**： - **创建组件**：使用`class`关键字定义一个继承自`React.Component`的类来创建组件，例如`class Photo extends React.Component {...}`。 - **组件方法**：可以直接在类中定义方法，比如`componentWillMount()`，这类似于Java中的类方法写法。 - **静态属性**：使用`static`关键字定义组件的静态属性，如`defaultProps`和`propTypes`。它们分别用于设置组件的默认属性和验证属性类型。 ```jsx class Video extends React.Component { static defaultProps = { autoPlay: false, maxLoops: 10, }; static propTypes = { autoPlay: React.PropTypes.bool.isRequired, maxLoops: React.PropTypes.number.isRequired, posterFrameSrc: React.PropTypes.string.isRequired, videoSrc: React.PropTypes.string.isRequired, }; render() { return <View />; } } ``` 3. **初始化STATE**： - 在组件的构造函数`constructor`中使用`this.state = {...}`初始化状态，例如`this.state = {loopsRemaining: this.props.maxLoops,};`。 4. **方法绑定**： - **ES5**：在React.createClass创建的组件中，所有方法默认都会绑定`this`到组件实例，可以直接用作回调，如`onPress={this.handleOptionsButtonClick}`。 - **ES6**：在ES6的类组件中，需要手动使用`.bind(this)`或箭头函数来确保`this`的正确指向。例如，`onPress={this.handleOptionsButtonClick.bind(this)}`或`onPress={e => this.handleOptionsButtonClick(e)}`。箭头函数会捕获定义时的作用域，所以`this`始终指向组件实例。 5. **属性解构**： - 使用解构赋值可以从对象中提取属性，简化代码。例如，在组件的`render`方法中，可以写成`const {label} = this.props;`，然后在模板中使用`label`。 6. **模板字符串**： - 使用反引号` `包裹的字符串允许直接插入变量，如`<Text>{this.props.label}</Text>`。 7. **类属性简写**： - 当类方法的第一个参数总是`props`或`state`时，可以使用简写形式，例如`render(props) {...}`。 8. **数组展开符**： - 在数组中使用`...`可以展开数组，例如`const newArray = [...oldArray, newItem]`。 9. **计算属性**： - 对象中可以使用`[表达式]`来创建动态键，如`{[keyName]: value}`。 10. **默认参数**： - 函数参数可以设置默认值，例如`function foo(arg = defaultValue) {...}`。 以上是React.js中结合ES6的一些常见实践，它们使得React应用的代码更加清晰、简洁，同时也提高了开发效率。在编写React组件时，合理运用这些特性能有效提升代码质量。