2016-06-12

React Native语法指南

React Native真的是越来越流行，没使用React Native开发项目都不好意思说自己是搞客户端开发的。对于纯Native开发者来说，刚上手React Native有一定的适应期，如果JavaScript也不熟练的话那就更悲催了。React Native涉及ES6，React语法，JSX，前端调试，Native客户端等知识，本文简单总结了React Native开发中一些知识点。算是在学习中的积累。

Component

Component：组件，使用React.createClass或者extends React.Component创建的类为组件。
Element：元素或者可以说是组件的实例，使用<Label />或者let label = new Label()创建的为实例。

对于定义组件，React以前版本的写法(ES5):

var Lable  = React.createClass({

    render(){
    
    }
});

React最新的写法(ES6):

class Label extends React.Component{
    render(){
    }
}

props与state

props属性：组件可以定义初始值，自己不可更改props属性值，只允许从父组件中传递过来：

// 父组件
class MainComponent extends React.Component{
    render(){
        return(<Label name="标题栏">);
    }
}

// 子组件
class Label extends React.Component{
    render(){
        return(<Text>{this.props.name}</Text>);
    }
}

父组件向Label传递name=”标题栏”的props属性，在Label中使用this.props.name引用此属性。

state属性：组件用来改变自己状态的属性，通常使用setState({key:value})来改变属性值，不能使用this.state.xxx来直接改变，setState({key:value})方法会触发界面刷新。

对于经常改变的数据且需要刷新界面显示，可以使用state。对于不需要改变的属性值可以使用props。React Native建议由顶层的父组件定义state值，并将state值作为子组件的props属性值传递给子组件，这样可以保持单一的数据传递。

在以前版本的React中定义state，props可以使用生命周期方法 getInitialState()和getInitialState():

var Label = React.createClass({
    getInitialState(){
        key:value,
        ...
    },
    getInitialProps(){
        key:value,
        ...
    },// 这种写法需要有，不要使用；
    render:funation(){
        
    }
});

在最新版本的React可以使用构造函数替代getInitialState()，getInitialState()方法定义初始值：

class Label extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            time: '2016',
            city: '上海',
        };
        this.props = {
            name:'标题',
        };
    }
}

默认props与props校验

class Label extends React.Component{
    constructor(props) {
        super(props);
    }

   // 默认props
   static defaultProps = {
      city: '南京',
      index: 12,
   }
    
   // propTypes用于验证转入的props，当向 props 传入无效数据时，JavaScript 控制台会抛出警告
   static propTypes = {
      city: React.PropTypes.string.isRequired,
      index: React.PropTypes.number.isRequired,
   }

   state = {
      city: this.props.city,
      index：this.props.index,
   }
}

// or

class Label extends React.Component{
    constructor(props) {
        super(props);
    }
}

// 默认props
Label.defaultProps = {
    city: '南京',
    index: 12,
}

// propTypes用于验证转入的props，当向 props 传入无效数据时，JavaScript 控制台会抛出警告
Label.propTypes = {
    city: React.PropTypes.string.isRequired,
    index: React.PropTypes.number.isRequired,
}

生命周期

我们把组件从装载,到渲染，再到卸载当做一次生命周期，也就是组件的生存状态从装载开始到卸载为止，期间可以根据属性的变化进行多次渲染。

生命周期的三种状态：

Mounting：装载，
Updating：渲染
Unmounting：卸载

componentWillMount()，组件开始装载之前调用，在一次生命周期中只会执行一次。
componentDidMount()，组件完成装载之后调用，在一次生命周期中只会执行一次，从这里开始就可以对组件进行各种操作了，比如在组件装载完成后要显示的时候执行动画。
componentWillUpdate(object nextProps, object nextState)，组件属性更新之前调用，每一次属性更新都会调用
componentDidUpdate(object prevProps, object prevState)，组件属性更新之后调用，每次属性更新都会调用
componentWillUnmount()，组件卸载之前调用

组件属性更改时会调用以下方法，在一次生命周期中可以执行多次：

1 2	componentWillReceiveProps(object nextProps)，已加载组件收到新的参数时调用 shouldComponentUpdate(object nextProps, object nextState)，组件判断是否重新渲染时调用

页面跳转

初始化第一个页面：

import SeatPageComponent from './SeatPageComponent';
import MainPageComponent from './MainPageComponent';
import TrainListComponent from './TrainListComponent';

class MainPage extends React.Component {
    render() {
        let defaultName = 'MainPageComponent';
        let defaultComponent = MainPageComponent;
        return (
            <Navigator
                // 指定默认页面
                initialRoute={{ name: defaultName, component: defaultComponent }}
                // 配置页面间跳转动画
                configureScene={(route) => {
                    return Navigator.SceneConfigs.VerticalDownSwipeJump;
                }}
                // 初始化默认页面
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    // 将navigator作为props传递到下一个页面
                    return <Component {...route.params} navigator={navigator} />
                }} />
        );
    }
}

跳转到下一页面：

jumpToNext(){
      const { navigator } = this.props;// 由上一个页面传递过来
      if(navigator) {
          navigator.push({
              name: 'SeatPageComponent',
              component: SeatPageComponent,// 下一个页面
          });
      }
}

返回上一个页面：

_back(){
    const { navigator } = this.props;
    if(navigator) {
        navigator.pop();
    }
}

页面间通信

例如：从A页面打开B页面
A通过route.params将参数传递给B：

jumpToNext(){ 
    const { navigator } = this.props;// 由上一个页面传递过来
    if(navigator) { 
        navigator.push({ 
            name: 'SeatPageComponent', 
            component: SeatPageComponent,// 下一个页面 
            params: { // 需要传递个下一个页面的参数,第二个页面使用this.props.xxx获取参数
                id: 123,
                title: this.state.title, 
            },
        });
     }
}

A通过route.params传递回调方法或者A的引用来让B将数据传回给A：


// A页面
jumpToNext(){ 
    const { navigator } = this.props;// 由上一个页面传递过来
    if(navigator) { 
        let that = this;// this作用域，参见下文函数绑定
        navigator.push({ 
            name: 'SeatPageComponent', 
            component: SeatPageComponent,// 下一个页面 
            params: { // 需要传递个下一个页面的参数,第二个页面使用this.props.xxx获取参数
                title: '测试',
                getName: function(name) {that.setState({ name: name })}
            },
        });
     }
}

// B页面
 _back(){
     const { navigator } = this.props;
     if(this.props.getName){
         this.props.getName('测试');
     }
     if(navigator) {
         navigator.pop();
     }
 }

组件间通信

父组件–>子组件，使用props，父组件向子组件传递props

// 父组件
class MainComponent extends React.Component{
    render(){
        return(<Label name="标题栏">);
    }
}

// 子组件
class Label extends React.Component{
    render(){
        return(<Text>{this.props.name}</Text>);
    }
}

子组件–>父组件，父组件在创建子组件时传递回调方法

// 父组件
class MainComponent extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            name: '测试',
        };
    }
  
    // 回调方法
    getName(str){
         this.setState({name:str});
    }

    render(){
        return(<Label name="标题栏" getName={getName}/>);
    }
}

// 子组件
class Label extends React.Component{
    render(){
        return(
            <View>
                  <TouchableOpacity onPress={()=>this._onPress()}>
                          <Text>点我，{this.props.name}</Text>
                  </TouchableOpacity>
            </View>);
    }

    _onPress(){
          if(this.props.getName){
              this.props.getName('测试')
          }
    }
}

非父子关系的组件，即没有任何嵌套关系的组件，可以引入订阅源(js-signals, PubSubJS)，监听订阅事件。例如，在生命周期方法中addEventListener()，removeEventListener()，在合适时机setState()。

ECMAScript

ES6中函数的写法：

class Label extends React.Component{
    doSomething(){
        //...
    }// 不要使用逗号或者分号作为结尾
}

key:value形式定义函数的写法：

var Label = React.createClass({
    doSomething:funation(){
        //......
    },// 需要使用逗号作为结尾，不能使用分号
    doSomething2:function(){
        //......
    },
});

函数绑定

class Label extends React.Component{

    // 有函数
    sayHello(str){
        console.log(str)
    }

    // 在onPress中使用箭头函数调用
    // onPress={() => this.sayHello('Hello')}
    
    // 等同于
    //onPress={sayHello('hello').bind(this)} 

    // 等同于
    // onPress={print('hello',this)}

    render(){
        return (
              <View>
                   <TouchableOpacity onPress={() => this.sayHello('Hello')}>
                          <Text>点我</Text>
                   </TouchableOpacity>
              </View>
        )
    }

    function print(str,this){
        let that = this;// 注意这里this的生命周期
        function say(str){
            that.sayHello(str)// 此处不能再使用this
        }
        say(str);
    }
}

Tips

require，import：javascript的模块管理工具，管理各个模块之间的引用，解决javascript异步加载的问题，解决js写成多个文件后浏览器加载缓慢的问题。

JavaScript中没有private，public的概念
使用_开头的方法代表private方法，不适用则表示public方法

class Label extends Component{
    // private 函数
    _doSomething(){
        //......
    }
    
    // public 函数
    doSomething(){
        //......
    }
}

参考资料
Reactjs中文教程
 极客学院React教程
 ECMAScript语法
 JavaScript模块系统
 require.js
Navigator
结合ES6+开发React
React组件通信