React Native之React速学教程

怼烎@ 2022-03-29 05:18 194阅读 0赞

本文出自[《React Native学习笔记》][React Native]系列文章。

React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。  
通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习，我将《React Native之React速学教程》分为[上][Link 1]、[中][Link 2]、[下][Link 3]三篇，大家可以根据需要进行阅读学习。

## 概述 ##

本篇为《React Native之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component）以及组件的属性，状态等方面进行讲解。

## What’s React ##

React是一个用于组建用户界面的JavaScript库，让你以更简单的方式来创建交互式用户界面。

1.  当数据改变时，React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测，更容易调试。
2.  构建封装管理自己的状态的组件，然后将它们组装成复杂的用户界面。由于组件逻辑是用JavaScript编写的，而不是模板，所以你可以轻松地通过您的应用程序传递丰富的数据，并保持DOM状态。
3.  一次学习随处可写，学习React，你不仅可以将它用于Web开发，也可以用于React Native来开发Android和iOS应用。

不是模板却比模板更加灵活：

![Component][]

> 心得：上图是[GitHub Popular][]的首页截图，这个页面是通过不同的组件组装而成的，组件化的开发模式，使得代码在更大程度上的到复用，而且组件之间对的组装很灵活。

## Get Started ##

使用React之前需要在页面引入如下js库 。

*  react.js
 *  react-dom.js
 *  browser.min.js

上面一共列举了三个库： react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，browser.min.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。  
你可以从[React官网][React]下载这些库，也可以将其下载到本地去使用。

> 心得：在做React Native开发时，这些库作为React Native核心库已经被初始化在node\_modules目录下，所以不需要单独下载。

### 使用React ###

解压从上述地址下载的压缩包，在根目录中创建一个包含以下内容的 “helloworld.html” 。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="build/react.js"></script>
        <script src="build/react-dom.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script>
      </body>
    </html>

在 JavaScript 代码里写着 XML 格式的代码称为 JSX，下文会介绍。为了把 JSX 转成标准的 JavaScript，我们用`<script type="text/babel">`标签，然后通过Babel转换成在浏览器中真正执行的内容。

### ReactDOM.render() ###

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );

上述代码的作用是将`<h1>Hello, world!</h1>`插入到元素id为example的容器中。

## JSX ##

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。  
每一个XML标签都会被JSX转换工具转换成纯JavaScript代码，使用JSX，组件的结构和组件之间的关系看上去更加清晰。  
JSX并不是React必须使用的，但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。

**Usage:**

React.render(//使用JSX
        <div>
            <div>
                <div>content</div>
            </div>
        </div>,
        document.getElementById('example')
    ); 
    React.render(//不使用JSX
        React.createElement('div', null,
            React.createElement('div', null,
                React.createElement('div', null, 'content')
            )
        ),
        document.getElementById('example')
    );

### HTML标签 与 React组件 对比 ###

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。  
要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。

var myDivElement = <div className="foo" />;
    React.render(myDivElement, document.body);

要渲染 React 组件，只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
    var myElement = <MyComponent someProperty={true} />;
    React.render(myElement, document.body);

> 提示：
> 
>  *  React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
>  *  由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代， React DOM 使用 className 和 htmlFor 来做对应的属性。

### JavaScript 表达式 ###

#### 属性表达式 ####

要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 (\{\}) 包起来，不要用引号 ("")。

// 输入 (JSX):
    var person = <Person name={window.isLoggedIn ? window.name : ''} />;
    // 输出 (JS):
    var person = React.createElement(
      Person,
      {name: window.isLoggedIn ? window.name : ''}
    );

#### 子节点表达式 ####

同样地，JavaScript 表达式可用于描述子结点：

// 输入 (JSX):
    var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
    // 输出 (JS):
    var content = React.createElement(
      Container,
      null,
      window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
    );

### 注释 ###

JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)用 \{\} 包围要注释的部分。

class ReactDemo extends Component {
      render() {
        return (     
          <View style={styles.container}>
            {/*标签子节点的注释*/}
            <Text style={styles.welcome}
              //textAlign='right'
              textShadowColor='yellow'
              /*color='red'
              textShadowRadius='1'*/
              >
              React Native!
            </Text>
          </View>
        );
      }
    }

> 心得：在标签节点以外注释，和通常的注释是一样的，多行用“/\*\*/” 单行用“//”；

### JSX延展属性 ###

#### 不要试图去修改组件的属性 ####

不推荐做法：

var component = <Component />;
      component.props.foo = x; // 不推荐
      component.props.bar = y; // 不推荐

这样修改组件的属性，会导致React不会对组件的属性类型（propTypes）进行的检查。从而引发一些预料之外的问题。

推荐做法：

var component = <Component foo={x} bar={y} />;

#### 延展属性（Spread Attributes） ####

你可以使用 JSX 的新特性 - 延展属性：

var props = {};
      props.foo = x;
      props.bar = y;
      var component = <Component {...props} />;

传入对象的属性会被复制到组件内。

它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。

var props = { foo: 'default' };
      var component = <Component {...props} foo={'override'} />;
      console.log(component.props.foo); // 'override'

上文出现的… 标记被叫做延展操作符（spread operator）已经被 ES6 数组 支持。

## Component ##

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。

上面代码中，变量 HelloMessage 就是一个组件类。模板插入 `<HelloMessage />`时，会自动生成 HelloMessage 的一个实例。所有组件类都必须有自己的 render 方法，用于输出组件。

> 注意

*  组件类的第一个字母必须大写。
 *  组件类只能包含一个顶层标签。

## 组件的属性(props) ##

我们可以通过`this.props.xx`的形式获取组件对象的属性，对象的属性可以任意定义，但要避免与JavaScript关键字冲突。

### 遍历对象的属性： ###

`this.props.children`会返回组件对象的所有属性。  
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 `React.Children.map`或`React.Children.forEach` 来遍历子节点。  
**React.Children.map**

array React.Children.map(object children, function fn [, object thisArg])

该方法会返回一个array。  
**React.Children.forEach**

React.Children.forEach(object children, function fn [, object thisArg])

**Usage：**

### [PropTypes][] ###

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。  
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。

var MyTitle = React.createClass({
      propTypes: {
        title: React.PropTypes.string.isRequired,
      },
      render: function() {
         return <h1> {this.props.title} </h1>;
       }
    });

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。

var data = 123;
    ReactDOM.render(
      <MyTitle title={data} />,
      document.body
    );

这样一来，title属性就通不过验证了。控制台会显示一行错误信息。

``Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.``

更多的PropTypes设置，可以查看[官方文档][Link 4]。  
此外，getDefaultProps 方法可以用来设置组件属性的默认值。

上面代码会输出`"Hello World"`。

## ref 属性(获取真实的DOM节点) ##

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.\[refName\] 就会返回这个真实的 DOM 节点。  
需要注意的是，由于 this.refs.\[refName\] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.\[refName\] 属性。  
React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看[官方文档][Link 5]。

### ref属性不只是string ###

ref属性不仅接受string类型的参数，而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。

render: function() { 
        return (
          <TextInput
            ref={ function(input) { 
              if (input != null) { 
                input.focus();
              }
            }} />
        );
      },

在ES6中我们可以使用箭头函数来为组件的ref设置一个callback。

render() { 
        return <TextInput ref={ (c) => this._input = c} />;
      },
      componentDidMount() { 
        this._input.focus();
      },

需要提醒大家的是，只有在组件的render方法被调用时，ref才会被调用，组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用，那么你得到的是undefined。

> 心得：ref属性在开发中使用频率很高，使用它你可以获取到任何你想要获取的组件的对象，有个这个对象你就可以灵活地做很多事情，比如：读写对象的变量，甚至调用对象的函数。

## state ##

上文讲到了props，因为每个组件只会根据props 渲染了自己一次，props 是不可变的。为了实现交互，可以使用组件的 state 。this.state 是组件私有的，可以通过`getInitialState()`方法初始化，通过调用 `this.setState()` 来改变它。当 state 更新之后，组件就会重新渲染自己。  
render() 方法依赖于 this.props 和 this.state ，框架会确保渲染出来的 UI 界面总是与输入（ this.props 和 this.state ）保持一致。

### 初始化state ###

通过`getInitialState()`方法初始化state，在组件的生命周期中仅执行一次，用于设置组件的初始化 state 。

getInitialState:function(){
        return {favorite:false};
      }

### 更新 state ###

通过`this.setState()`方法来更新state，调用该方法后，React会重新渲染相关的UI。  
`this.setState({favorite:!this.state.favorite});`

**Usage:**

上面代码是一个 FavoriteButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

> 心得：由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

本篇将从组件(Component)的详细说明、组件的生命周期(Component Lifecycle)、isMounted是个反模式等方面进行讲解，让大家对组件(Component)有个更系统以及更深入的认识。

## 组件的详细说明 ##

当通过调用 React.createClass() 来创建组件的时候，每个组件必须提供render方法，并且也可以包含其它的在这里描述的生命周期方法。

### render ###

`ReactComponent render()`  
`render()` 方法是必须的。  
当该方法被回调的时候，会检测 `this.props` 和 `this.state`，并返回一个单子级组件。该子级组件可以是虚拟的本地 DOM 组件（比如 <div /> 或者 `React.DOM.div()`），也可以是自定义的复合组件。  
你也可以返回 `null` 或者 `false` 来表明不需要渲染任何东西。实际上，React 渲染一个`<noscript>`标签来处理当前的差异检查逻辑。当返回 `null` 或者 `false` 的时候，`this.getDOMNode()` 将返回 `null`。

**注意：**

`render()`函数应该是纯粹的，也就是说该函数不修改组件的 `state`，每次调用都返回相同的结果，不读写 DOM 信息，也不和浏览器交互（例如通过使用 `setTimeout`）。如果需要和浏览器交互，在 `componentDidMount()` 中或者其它生命周期方法中做这件事。保持 `render()` 纯粹，可以使服务器端渲染更加切实可行，也使组件更容易被理解。

> 心得：不要在`render()`函数中做复杂的操作，更不要进行网络请求，数据库读写，I/O等操作。

### getInitialState ###

`object getInitialState()`  
初始化组件状态，在组件挂载之前调用一次。返回值将会作为 `this.state`的初始值。

> 心得：通常在该方法中对组件的状态进行初始化。

### getDefaultProps ###

`object getDefaultProps()`  
设置组件属性的默认值，在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 `props` 中的某个键，则此处返回的对象中的相应属性将会合并到 `this.props` （使用 in 检测属性）。  
**Usage:**

getDefaultProps() {
        return {
          title: '',
          popEnabled:true
        };
      },

**注意**  
该方法在任何实例创建之前调用，因此不能依赖于 `this.props`。另外，`getDefaultProps()` 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。

> 心得：该方法在你封装一个自定义组件的时候经常用到，通常用于为组件初始化默认属性。

### [PropTypes][] ###

`object propTypes`  
`propTypes` 对象用于验证传入到组件的 `props`。 可参考[可重用的组件][Link 4]。

**Usage:**

var NavigationBar=React.createClass({
      propTypes: {
        navigator:React.PropTypes.object,
        leftButtonTitle: React.PropTypes.string,
        leftButtonIcon: Image.propTypes.source,
        popEnabled:React.PropTypes.bool,
        onLeftButtonClick: React.PropTypes.func,
        title:React.PropTypes.string,
        rightButtonTitle: React.PropTypes.string,
        rightButtonIcon:Image.propTypes.source,
        onRightButtonClick:React.PropTypes.func
      },

> 心得：在封装组件时，对组件的属性通常会有类型限制，如：组件的背景图片，需要`Image.propTypes.source`类型，propTypes便可以帮你完成你需要的属性类型的检查。

### mixins ###

`array mixins`  
`mixin` 数组允许使用混合来在多个组件之间共享行为。更多关于混合的信息，可参考[Reusable Components][]。

> 心得：由于ES6不再支持mixins，所以不建议在使用mixins，我们可以用另外一种方式来替代mixins，请参考：React Native之React速学教程(下)-ES6不再支持Mixins。

### statics ###

`object statics`  
`statics` 对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。例如：

在这个块儿里面定义的方法都是静态的，你可以通过`ClassName.funcationName`的形式调用它。  
**注意**  
这些方法不能获取组件的 `props` 和 `state`。如果你想在静态方法中检查 `props` 的值，在调用处把 `props` 作为参数传入到静态方法。

### displayName ###

`string displayName`  
`displayName` 字符串用于输出调试信息。JSX 自动设置该值；可参考[JSX in Depth][]。

#### isMounted ####

`boolean isMounted()`，当组件被渲染到DOM，该方法返回true，否则返回false。该方法通常用于异步任务完成后修改state前的检查，以避免修改一个没有被渲染的组件的state。

> 心得：开发中不建议大家isMounted，大家可以使用另外一种更好的方式来避免修改没有被渲染的DOM，请下文的isMounted 是个反模式。

## [组件的生命周期(Component Lifecycle)][Component Lifecycle] ##

在iOS中`UIViewController`提供了`(void)viewWillAppear:(BOOL)animated`, `- (void)viewDidLoad`,`(void)viewWillDisappear:(BOOL)animated`等生命周期方法，在Android中`Activity`则提供了`onCreate()`,`onStart()`,`onResume()`,`onPause()`,`onStop()`,`onDestroy()`等生命周期方法，这些生命周期方法展示了一个界面从创建到销毁的一生。

那么在React 中组件(Component)也是有自己的生命周期方法的。

![component-lifecycle][]

### 组件的生命周期分成三个状态： ###

*  Mounting：已插入真实 DOM
 *  Updating：正在被重新渲染
 *  Unmounting：已移出真实 DOM

> 心得：你会发现这些React 中组件(Component)的生命周期方法从写法上和iOS中`UIViewController`的生命周期方法很像，React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用。

### Mounting(装载) ###

*  `getInitialState()`: 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
 *  `componentWillMount()`：服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。
 *  `componentDidMount()`：在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。

### Updating (更新) ###

*  componentWillReceiveProps(object nextProps) 在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。

用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

*  shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state，将要渲染之前调用。

该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。

> 心得：重写次方你可以根据实际情况，来灵活的控制组件当 props 和 state 发生变化时是否要重新渲染组件。

*  componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 之前立刻调用。

在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。

> 注意：你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 `componentWillReceiveProps`。

*  componentDidUpdate(object prevProps, object prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用。

该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。

### Unmounting(移除) ###

*  componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。

在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

## isMounted是个反模式 ##

isMounted通常用于避免修改一个已经被卸载的组件的状态，因为调用一个没有被装载的组件的`setState()`方法，系统会抛出异常警告。

if(this.isMounted()) {  //不推荐
      this.setState({ ...});
    }

上面做法有点反模式，`isMounted()`起到作用的时候也就是组件被卸载之后还有异步操作在进行的时候，这就意味着一个被销毁的组件还持有着一些资源的引用，这会导致系统性能降低甚至内存溢出。

React 在设计的时候通过`setState()`被调用时做了一些检查，来帮助开发者发现被卸载的组件还持有一些资源的引用的情况。如何你使用了`isMounted()`，也就是跳过的React的检查，也就无法发现被卸载的组件还持有资源的问题。

既然isMounted()是反模式，那么有没有可替代方案呢？  
我们可以通过在设置一个变量来表示组件的装载和卸载的状态，当`componentDidMount`被调用时该变量为true，当  
`componentWillUnmount`被调用时，该变量为false，这样该变量就可以当`isMounted()`来使用。但还不够，到目前为止，我们只是通过变量来替代`isMounted()`，还没有做任何的优化，接下来我们需要在`componentWillUnmount`被调用时取消所有的异步回调，主动释放所有资源，这样就能避免被卸载的组件还持有资源的引用的情况，从而减少了内存溢出等情况的发生。

class MyComponent extends React.Component { 
      componentDidMount() { 
        mydatastore.subscribe(this);
      }
      render() { 
        ...
      }
      componentWillUnmount() { 
        mydatastore.unsubscribe(this);
      }
    }

使用可取消的Promise做异步操作。

const cancelablePromise = makeCancelable(
      new Promise(r => component.setState({ ...}}))
    );
    cancelablePromise
      .promise
      .then(() => console.log('resolved'))
      .catch((reason) => console.log('isCanceled', reason.isCanceled));
    cancelablePromise.cancel(); // Cancel the promise

可取消的Promise。

本篇将带着大家一起认识ES6，学习在开发中常用的一些ES6的新特性，以及ES6与ES5的区别，解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑。

## ES6的特性 ##

### 何为ES6？ ###

ES6全称ECMAScript 6.0，ES6于2015年6月17日发布，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。

下面我为大家列举了ES6新特性中对我们开发影响比较大的六方面的特性。

### 1.类（class） ###

对熟悉Java，object-c，c\#等纯面向对象语言的开发者来说，都会对class有一种特殊的情怀。ES6 引入了class（类），让JavaScript的面向对象编程变得更加简单和易于理解。

class Animal { 
        // 构造方法，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
        constructor(name,color) { 
          this.name = name;
          this.color = color;
        }
        // toString 是原型对象上的属性
        toString() { 
          console.log('name:' + this.name + ',color:' + this.color);
    
        }
      }
       
     var animal = new Animal('dog','white');//实例化Animal
     animal.toString();
    
     console.log(animal.hasOwnProperty('name')); //true
     console.log(animal.hasOwnProperty('toString')); // false
     console.log(animal.__proto__.hasOwnProperty('toString')); // true
    
     class Cat extends Animal { 
      constructor(action) { 
        // 子类必须要在constructor中指定super 方法，否则在新建实例的时候会报错.
        // 如果没有置顶consructor,默认带super方法的constructor将会被添加、
        super('cat','white');
        this.action = action;
      }
      toString() { 
        console.log(super.toString());
      }
     }
    
     var cat = new Cat('catch')
     cat.toString();
     
     // 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
     console.log(cat instanceof Cat); // true
     console.log(cat instanceof Animal); // true

### 2.模块(Module) ###

ES5不支持原生的模块化，在ES6中，模块将作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

#### 导出(export) ####

ES6允许在一个模块中使用export来导出多个变量或方法。

**导出变量**

//test.js
    export var name = 'Rainbow'

> 心得：ES6不仅支持变量的导出，也支持常量的导出。 `export const sqrt = Math.sqrt;//导出常量`

ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

//test.js
     var name = 'Rainbow';
     var age = '24';
     export { name, age};

**导出函数**

// myModule.js
    export function myModule(someArg) { 
      return someArg;
    }

#### 导入(import) ####

定义好模块的输出以后就可以在另外一个模块通过import引用。

import { myModule} from 'myModule';// main.js
    import { name,age} from 'test';// test.js

> 心得:一条import 语句可以同时导入默认方法和其它变量。`import defaultMethod, { otherMethod } from 'xxx.js';`

### 3.箭头（Arrow）函数 ###

这是ES6中最令人激动的特性之一。`=>`不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个`this`,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如`var self = this;`或`var that = this`这种引用外围this的模式。但借助`=>`，就不需要这种模式了。

### 箭头函数的结构 ###

箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名，而箭头之后可以是一个表达式（作为函数的返回值），或者是用花括号括起的函数体（需要自行通过return来返回值，否则返回的是undefined）。

// 箭头函数的例子
    ()=>1
    v=>v+1
    (a,b)=>a+b
    ()=>{ 
        alert("foo");
    }
    e=>{ 
        if (e == 0){ 
            return 0;
        }
        return 1000/e;
    }

> 心得：不论是箭头函数还是bind，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用。

#### 卸载监听器时的陷阱 ####

> **错误的做法**

class PauseMenu extends React.Component{ 
        componentWillMount(){ 
            AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
        }
        componentWillUnmount(){ 
            AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
        }
        onAppPaused(event){ 
        }
    }

> **正确的做法**

class PauseMenu extends React.Component{ 
        constructor(props){ 
            super(props);
            this._onAppPaused = this.onAppPaused.bind(this);
        }
        componentWillMount(){ 
            AppStateIOS.addEventListener('change', this._onAppPaused);
        }
        componentWillUnmount(){ 
            AppStateIOS.removeEventListener('change', this._onAppPaused);
        }
        onAppPaused(event){ 
        }
    }

除上述的做法外，我们还可以这样做：

class PauseMenu extends React.Component{ 
        componentWillMount(){ 
            AppStateIOS.addEventListener('change', this.onAppPaused);
        }
        componentWillUnmount(){ 
            AppStateIOS.removeEventListener('change', this.onAppPaused);
        }
        onAppPaused = (event) => { 
            //把方法直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
        }
    }

> 需要注意的是：不论是bind还是箭头函数，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用。

### 4.ES6不再支持Mixins ###

在ES5下，我们经常使用mixin来为组件添加一些新的方法，如：

但，很不幸的是，ES6不支持使用Mixins了，不过我们可以使用，增强组件来替代Mixins。

//Enhance.js
    import {  Component } from "React";
    
    export var Enhance = ComposedComponent => class extends Component { 
        constructor() { 
            this.state = {  data: null };
        }
        componentDidMount() { 
            this.setState({  data: 'Hello' });
        }
        render() { 
            return <ComposedComponent { ...this.props} data={ this.state.data} />;
        }
    };
    //HigherOrderComponent.js
    import {  Enhance } from "./Enhance";
    
    class MyComponent { 
        render() { 
            if (!this.data) return <div>Waiting...</div>;
            return <div>{ this.data}</div>;
        }
    }
    
    export default Enhance(MyComponent); // Enhanced component

用一个“增强组件”，来为某个类增加一些方法，并且返回一个新类，这无疑能实现mixin所实现的大部分需求。

另外，网上也有很多其他的方案，如[react-mixin][]。

### 5.ES6不再有自动绑定 ###

在ES5中，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但在ES6中没有了自动绑定，也就是说，你需要通过bind或者箭头函数来手动绑定this引用。

// 通过使用 bind() 来绑定`this`
    <div onClick={ this.tick.bind(this)}>
    // 也可通过使用箭头函数来实现
    <div onClick={ () => this.tick()}>

> 心得： 因为无论是箭头函数还是bind()每次被执行都返回的是一个新的函数引用，所以，推荐大家在组件的构造函数中来绑定`this`。

constructor(props) \{  
super(props);  
this.state = \{count: props.initialCount\};  
this.tick = this.tick.bind(this);//在构造函数中绑定`this`  
\}  
// 使用

\`\`\`

### 6.static关键字 ###

在ES6中我们可以通过static关键字来定义一个类函数。

class People { 
        constructor(name) {  //构造函数
              this.name = name;
        }
        sayName() { 
              console.log(this.name);
        }
        static formatName(name) //将formatName定义为类方法
            return name[0].toUpperCase() + name.sustr(1).toLowerCase();
        }
    }

console.log(People.formatName("tom")); //使用类方法formatName

## ES6 VS ES5（ES6与ES5的区别） ##

新版本的React /React Native使用了ES6标准，下面就让我们一起了解一下基于ES6的React/React Native相比ES5有哪些不同。

> 心得：很多React/React Native的初学者经常会被ES6问题迷惑：官方建议我们ES6，但是网上搜到的很多教程和例子都是基于ES5版本的，所以很多人感觉无法下手，下面就让我们一起认识ES6与ES5在React/React Native开发上有哪些不同和需要注意的地方。

下面是我们需要知道的ES6与ES5在4大方面上的区别。

### 1.在定义方面的不同 ###

在定义组件，方法，属性等方面，ES6与ES5是有所不同的，下面就让我们一起看一下有哪些不同。

> 心得：因为向下兼容的原因，你在开发过程中可使用ES6也可以使用ES5的规范，但为了代码的风格一致性，建议尽量减少混写。

#### 定义组件 ####

> **ES5**

在ES5里，通常通过React.createClass来定义一个组件类，像这样：

var Photo = React.createClass({ 
        render: function() { 
            return (
                <Image source={ this.props.source} />
            );
        },
    });

> **ES6**

在ES6里，我们通过继承React.Component 来定义一个组件类，像这样：

class Photo extends React.Component { 
        render() { 
            return (
                <Image source={ this.props.source} />
            );
        }
    }

#### 定义方法 ####

相比ES5，ES6在方法定义上语法更加简洁，从上面的例子里可以看到，给组件定义方法不再用 名字: function()的写法，而是直接用名字()，在方法的最后也不能有逗号了。

> **ES5**

var Photo = React.createClass({ 
        test: function(){ 
        },
        render: function() { 
            return (
                <Image source={ this.props.source} />
            );
        },
    });

> **ES6**

class Photo extends React.Component { 
        test() { 
        }
        render() { 
            return (
                <Image source={ this.props.source} />
            );
        }
    }

#### 定义组件的属性类型和默认属性 ####

> **ES5**

在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现。

> **ES6**

在ES6里，可以统一使用static成员来实现。

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 />
            );
        } // 注意这里既没有分号也没有逗号
    }

也有人这么写，虽然不推荐，但读到代码的时候你应当能明白它的意思：

class Video extends React.Component { 
        render() { 
            return (
                <View />
            );
        }
    }
    Video.defaultProps = { 
        autoPlay: false,
        maxLoops: 10,
    };
    Video.propTypes = { 
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    };

> 心得:对React开发者而言，static在一些老版本的浏览器上是不支持的。React Native开发者可以不用担心这个问题。

### 2.在导入(import)与导出(export)组件上的不同 ###

#### 导入组件 ####

> **ES5**

在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：

var React = require("react");
    var { 
        Component,
        PropTypes
    } = React;  //引用React抽象组件

var ReactNative = require("react-native");
    var { 
        Image,
        Text,
    } = ReactNative;  //引用具体的React Native组件

var AboutPage=require('./app/AboutPage') //引入app目录下AboutPage组件，即AboutPag.js
    var PopularPage=require('./app/PopularPage') //引入app目录下PopularPage组件，即PopularPage.js
    var FavoritePage=require('./app/FavoritePage') //引入app目录下FavoritePage组件，即FavoritePage.js

> **ES6**

在ES6里，没有了require，而是使用import来导入组件，有点像Java的写法。

import React, {  
        Component,
        PropTypes,
    } from 'react';//引用React抽象组件

import { 
        Image,
        Text
    } from 'react-native' //引用具体的React Native组件

import AboutPage from './app/AboutPage' //引入app目录下AboutPage组件，即AboutPag.js
    import PopularPage from './app/PopularPage' //引入app目录下PopularPage组件，即PopularPage.js
    import FavoritePage  from './app/FavoritePage' //引入app目录下FavoritePage组件，即FavoritePage.js

另外，ES6支持将组件导入作为一个对象，使用“ \* as”修饰即可。

//引入app目录下AboutPage组件作为一个对象，接下来就可使用“AboutPage.”来调用AboutPage的方法及属性了。 
    import  * as AboutPage from './app/AboutPage'

> 心得：使用“ \* as ”修饰后，导入的组件直接被实例化成一个对象，可以使用“.”语法来调用组件的方法和属性，和没有“ \* as ”修饰是有本质区别的，使用的时候要特别注意。

#### 导出组件 ####

> **ES5**  
> 在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出：

var MyComponent = React.createClass({ 
        ...
    });
    module.exports = MyComponent;

> **ES6**  
> 在ES6里，通常用export default来实现相同的功能：

export default class MyComponent extends Component{ 
        ...
    }

### 3.在初始化state上的不同 ###

> **ES5**

var Video = React.createClass({ 
        getInitialState: function() { 
            return { 
                loopsRemaining: this.props.maxLoops,
            };
        },
    })

> **ES6**  
> ES6下，有两种写法：

class Video extends React.Component { 
        state = { 
            loopsRemaining: this.props.maxLoops,
        }
    }

不过我们推荐更易理解的在构造函数中初始化（这样你还可以根据需要做一些计算）：

class Video extends React.Component { 
        constructor(props){ 
            super(props);
            this.state = { 
                loopsRemaining: this.props.maxLoops,
            };
        }
    }

### 4.在方法作为回调上的不同 ###

在开发工作中，经常会使用到回调，如按钮的单击回调等，这也是在很多编程语言中都会经常出现的情况。ES6与ES5在使用回调方面是有区别的。

> **ES5**

var PostInfo = React.createClass({ 
        handleOptionsButtonClick: function(e) { 
            // Here, 'this' refers to the component instance.
            this.setState({ showOptionsModal: true});
        },
        render: function(){ 
            return (
                <TouchableHighlight onPress={ this.handleOptionsButtonClick}>
                    <Text>{ this.props.label}</Text>
                </TouchableHighlight>
            )
        },
    });

在ES5中，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但官方现在逐步认为这反而是不标准、不易理解的。

在ES6下，你需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）：

> **ES6**

class PostInfo extends React.Component{ 
        handleOptionsButtonClick(e){ 
            this.setState({ showOptionsModal: true});
        }
        render(){ 
            return (
                <TouchableHighlight 
                    onPress={ this.handleOptionsButtonClick.bind(this)}
                    //onPress={e=>this.handleOptionsButtonClick(e)}//这种方式和上面的效果是一样的
                    >
                    <Text>{ this.props.label}</Text>
                </TouchableHighlight>
            )
        },·
    }

## 参考 ##

[React’s official site][React_s official site]  
[React on ES6+][React on ES6]

## About ##

本文出自[《React Native学习笔记》][React Native]系列文章。  
了解更多，可以[关注我的GitHub][GitHub]  
@[http://jiapenghui.com][http_jiapenghui.com]

## 推荐阅读 ##

*  [React Native 学习笔记][React Native 1]
 *  \[Reac Native布局详细指南\]([https://github.com/crazycodeboy/RNStudyNotes/tree/master/React][https_github.com_crazycodeboy_RNStudyNotes_tree_master_React] Native布局/React Native布局详细指南/React [Native布局详细指南.md][Native_.md])
 *  [React Native调试技巧与心得][React Native 2]
 *  [React Native发布APP之签名打包APK][React Native_APP_APK]
 *  [React Native应用部署、热更新-CodePush最新集成总结][React Native_-CodePush]

[React Native]: https://github.com/crazycodeboy/RNStudyNotes/
[Link 1]: https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B/React%20Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B%20%28%E4%B8%8A%29.md
[Link 2]: https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B/React%20Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B%20%28%E4%B8%AD%29%20.md
[Link 3]: https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B/React%20Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B%20%28%E4%B8%8B%29.md
[Component]: /images/20220329/ddc4223edc924514ae8fe155fb627f16.png
[GitHub Popular]: https://github.com/crazycodeboy/GitHubPopular
[React]: https://facebook.github.io/react/downloads.html
[PropTypes]: https://facebook.github.io/react/docs/top-level-api.html#react.proptypes
[Link 4]: https://facebook.github.io/react/docs/reusable-components.html
[Link 5]: https://facebook.github.io/react/docs/events.html#supported-events
[Reusable Components]: https://facebook.github.io/react/docs/reusable-components.html#mixins
[JSX in Depth]: https://facebook.github.io/react/docs/jsx-in-depth.html#the-transform
[Component Lifecycle]: https://facebook.github.io/react/docs/working-with-the-browser.html#component-lifecycle
[component-lifecycle]: /images/20220329/d46299a0d22b457a876650267a5aeb15.png
[react-mixin]: https://github.com/brigand/react-mixin
[React_s official site]: https://facebook.github.io/react/
[React on ES6]: https://babeljs.io/blog/2015/06/07/react-on-es6-plus
[GitHub]: https://github.com/crazycodeboy/
[http_jiapenghui.com]: http://jiapenghui.com
[React Native 1]: https://github.com/crazycodeboy/RNStudyNotes
[https_github.com_crazycodeboy_RNStudyNotes_tree_master_React]: https://github.com/crazycodeboy/RNStudyNotes/tree/master/React
[Native_.md]: http://xn--Native-ug5jt20d7wd5oqmm8e856a.md
[React Native 2]: https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97.md
[React Native_APP_APK]: https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%E5%8F%91%E5%B8%83APP%E4%B9%8B%E7%AD%BE%E5%90%8D%E6%89%93%E5%8C%85APK
[React Native_-CodePush]: https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%E5%BA%94%E7%94%A8%E9%83%A8%E7%BD%B2%E3%80%81%E7%83%AD%E6%9B%B4%E6%96%B0-CodePush%E6%9C%80%E6%96%B0%E9%9B%86%E6%88%90%E6%80%BB%E7%BB%93