React-Native入门指南（六）——JSX在React-Native中的应用

时间 2019-11-07

标签 react native 入门指南 jsx 应用栏目 React 繁體版

原文原文链接

React-Native入门指南

github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript开发你的原生应用，释放Native的UI体验，体验 Hybird开发效率。css

最近一个星期写的文章以下，连接是github page的，其实也能够在系列博客找到相应文章：html

还有几篇会时刻更新：react

第六篇JSX在React-Native中的应用

1、JSX概述

你必定疑问为何要用JSX？其实这不是必需，而是建议。只是由于React是做为MVC中的V,是为UI而生，因此，React-Native使用JSX更能像HTML样表达树形结构，其实HTML的超类就是XML,React-Native将这个带到了解放前，不能否认的是JSX相比节省了不少的代码。JSX不是什么新奇的东西，JSX只是对JavaScript进行了拓展，仅此而已。

2、语法介绍

一、类XML UI组件表达，在React-Native中表现为：

render: function() { return ( <View style={styles.container}>
            <Text style={styles.welcome}> Welcome to React Native!
            </Text>
        </View>
 ); }

二、js表达式
在JSX中，表达式须要｛｝包裹，例如：

render: function() { return ( <View style={styles.container}>
            <Text style={styles.welcome}> {0? '第一段': '第二段'} </Text>
        </View>
 ); }

上面的代码咱们能够看出，style＝｛｝是一个表达式；{0? '第一段': '第二段'}是表达式，最后显示的应该是“第二段”。

三、属性

在HTML中，属性能够是任何值，例如：<div tagid="00_1"></div>,tagid就是属性；一样，在组件上可使用属性。
建议使用如下方式： var props = { tagid: 'GGFSJGFFATQ', poiname: '东方明珠' }; return (<View {...props}></View>);

四、若是须要在调用组件的时候动态增长或者覆盖属性，又该如何呢？
很简单：<View {...props} poiname={'虹桥机场'}></View>

五、关于样式

（1）普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象； <View style={{fontSize:40, width:80,}}> </View>
（2）调用样式表:{样式类.属性} <View style={styles.container}></View>
（3）样式表和内联样式共存:{[]} <View style={[styles.container, {fontSize:40, width:80}]}> （4）多个样式表:{[样式类1， 样式类2]} <View style={[styles.container, styles.color]}>

六、属性校验
为了实现强类型语言的效果，咱们可使用propTypes来声明数据属性的合法性校验。例如：

React.createClass({ porpTypes:{ username: React.PropTypes.string, age: React.propTypes.number, } });

七、设定默认属性

React.createClass({ getDefaultProps: function(){ return { sign: '这个家伙很懒，什么都没留下' }; } });

八、组件的生命周期
componentWillMount：组件建立以前
getInitialState：初始化状态
render：渲染视图
componentDidMount：渲染视图完成后
componentWillUnmount：组件被卸载以前

3、了解虚拟DOM

React进行了虚拟DOM的封装，全部的视图的更新都是虚拟DOM作了一个校验（diff）后最小更新。为何这么作，由于如今机器的内存已经足以支撑这样视图UI的diff计算，用内存计算换取UI渲染效率。

一、咱们须要获取组件中真实的dom
React.findDOMNode(component)

二、第二节已经简单说了组件的生命周期（will, did）
组件的生命周期分为3个部分：
Mounting：正在装载组件；
Updating：从新计算渲染组件；
Unmounting：卸载组件