我们一起学ReactNative(五)：React语法基础

学完JavaScript后，就可以进下一步，学习React的开发了，学习Reac需要掌握几个知识点，JSX语法、组件、状态，生命周期。

React语法基础

关于React的语法，可以参考React 入门实例教程，基本可以对几个基础语法点进行理解，不过文章面对的是React.js，具体语法有一点点区别。下面的案例，基本语法点保持一致，但是面对的是ReactNative。

编写的时候，如果想方便，也可以在在线模拟器上进行练习。

显示一个组件

// demo1.js
// 导入依赖包
import React, { Component } from 'react'
import {
  AppRegistry,
  Text,
  View,
} from 'react-native'

// 定义一个组件
export default class App extends Component{
    render() {
        return (
            <View>
                <Text>Hello World!</Text>
            </View>
        )
    }
}

// JS运行所有React Native应用的入口。应用的根组件应当通过AppRegistry.registerComponent方法注册自己，然后原生系统才可以加载应用的代码包
AppRegistry.registerComponent('App', () => App)

JSX语法

通过JSX语法，可以使得HTML和JavaScript语法混写，如果想写HTML语法，就使用<>，如果使用JavaScript语法，则使用{}。

JSX不是一种标记语言，实质是调用React.createElement函数，所以在开发中使用其时，要在头部定义import React from 'react';。

// demo2.js
export default class App extends Component{
    render() {
        let name = "yuan"
        return (
            <View>
                <Text>Hello {name}!</Text>
            </View>
        )
    }
}

语法规则

• 标签首字母必须大写

• 开始和结束标签配对

  <组件>内容</组件>
  // 如果无内容的组件，标签应写成自封闭形式
  <组件/>

• 必须为单一子节点，如果有多个节点，最外层可以用<View></View>嵌套起来

  // 错误做法
  return (
      <View>
          <Text>Hello World!</Text>
  	</View>
      <View>
          <Text>Hello World!</Text>
  	</View>
  )
  
  // 正确做法
  return (
      <View>
          <View>
              <Text>Hello World!</Text>
          </View>
          <View>
              <Text>Hello World!</Text>
          </View>
      </View>
  )

注释

在JSX代码内，注释只能使用{/* 注释内容 */}

// demo3.js
export default class App extends Component{
    render() {
        let name = "yuan"
        // JSX外的注释
        return (
            <View>
                {/*JSX的注释*/}
                <Text>Hello {name}!</Text>
            </View>
        )
    }
}

组件

在React Native开发中，一个个布局可以通过创建组件的方式搭建起来，然后通过return返回一个在页面上展示的React元素。定义一个组件有两种方式，一种是通过function，称为函数定义组件，功能比较简单的组件可以采用该方法。另外一种是通过继承class，称为类定义组件。可以把组件类似认为，在Android开发中，在java类中创建自定义View，然后把View添加到原有布局中。

// demo4.js
// 函数定义组件，采用箭头函数
const HelloWorld = () => {
    return (
        <Text>Hello world!</Text>
    );
}

// 类定义组件，与上面的效果一致
class HelloWorld extends Component{
    render() {
        return (
            <Text>Hello World!</Text>
        )
    }
}

组件属性props

每次在使用的时候，不可能组件内容都一样，所以，需要可以在使用的时候，传入不同的值，改变组件里面的内容，那么就可以使用关键字props。

// demo5.js
// 函数定义组件，属性需要传递进去
const HelloWorld = (props) => {
    return (
        <Text>Hello {props.name}!</Text>
    );
}

// 类定义组件，属性通过this.props获取，与上面的效果一致
class HelloWorld extends Component{
    render() {
        return (
            <Text>Hello {this.props.name}!</Text>
        )
    }
}

class App extends Component{
    render() {
        return (
            <View>
                <HelloWorld name="yuan"/>
            </View>
        )
    };
}

自定义属性，字符串应使用双引号，其他值用{}括起来，布尔值可省略，默认为true。

<Person age={30} sex="male" married/>

类定义组件属性

class HelloWorld extends Component{
    // 如果组件没有设置该属性，则会使用默认值
    static defaultProps = {
        name:"yuan",
    };

	// 约定组件属性所需要的类型(为字符串)，如果类型不符合，编译的时候会报错
	static propTypes = {
        name: React.PropTypes.string,
    };

    render() {
        return (
            <Text>Hello {this.props.name}!</Text>
        )
    }
}

变量作用域

• 函数内的局部变量，只能函数内读写，函数运行完后销毁（闭包除外）
• class内的成员变量，在单个class的实例内读写，实例销毁时一并销毁
  • 使用时不要忘记this.
• class内的静态成员变量，在所有class的实例内共享，不会自动销毁
  • 其他模块可通过此class访问（类public
• class外的变量，在所有class的实例内共享（公有），不会自动销毁
  • 除非明确export，否则其他模块不可访问（类private）

状态state

上面讲到了不同的属性值，可以用props，但是其值一经指定，在组件的生命周期中则不再改变。 对于需要改变的数据，我们就需要使用state。

// demo6.js
// 定义一个文字按钮的组件
class LikeButton extends Component{
    // 设置默认状态值为false，同时也声明为boolean类型
    state = {
        liked : false
    };
	
	// 定义一个函数，响应点击事件，改变state的值，方法名可以任意
    onPress = () => {
        this.setState({
            liked: !this.state.liked
        })
    };
    render() {
        var text = this.state.liked ? 'like' : 'haven\'t liked';
        return (
            <View>
            	{/*声明了点击事件执行的方法*/}
                <Text onPress={this.onPress}>
                    You {text} this. Click to toggle.
                </Text>
            </View>
        )
    };
}

export default class App extends Component{
    render() {
        return (
            <View>
                <LikeButton/>
            </View>
        )
    }
}

• state的变化，必须通过setState()方法，不能直接赋值修改

• setState是异常操作，修改不会马上生效

  onPress = () => {
      console.log(this.state.liked)
      this.setState({
          liked: !this.state.liked
      });
      console.log(this.state.liked)
  };
  // 结果的输出，两次都保持一样，执行setState()后，该值不会立马生效，还是保持原来的状态值

• setState被执行后，会触发render，对界面重新渲染，所以，不要再renser，对数据进行改变，避免会调用到setState，导致死循环。

组件的生命周期

组件的生命周期，可以分为三个状态：

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

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数：

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数：

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

各种组件处理函数的流程图如下

实例代码

// dmeo7.js
class TextOpacity extends Component{
    state = {
        opacity : 1.0
    };

    componentDidMount() {
        this.timer = setInterval(() => {
                let opacity = this.state.opacity;
                opacity -= 0.05;
                if (opacity < 0.1) {
                    opacity = 1.0;
                }
                this.setState({
                    opacity: opacity
                });
            },100);
    }

	// 卸载后清空时钟
    comnponentWillUnmount() {
        clearInterval(this.timer)
    }

    render() {
        return (
            <Text style={{opacity:this.state.opacity}}>
                Hello world
            </Text>
        )
    }

}

export default class App extends Component{
    render() {
        return (
            <View>
                <TextOpacity/>
            </View>
        )
    }
}

上面代码在TextOpacity组件加载以后，默认设置透明度为1，然后通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新通过setState设置组件的透明度，从而引发重新渲染调用render。

参考资料

• React 入门实例教程
• ReactNative中文网