React-native Getting Started Guide (vi) application of--JSX in React-native

React-native Getting Started GuideGitHub:https://github.com/vczero/react-native-lession

React-native: Develop your native app with JavaScript, unleash the Native UI experience and experience hybird development efficiency.

The last one weeks of writing the article below, the link is GitHub page, in fact, you can also find the article in the series blog:

• Lession1:hello react-native
• Lession2: Understanding Code Structure
• Lession3:css and layouts
• Lession4: Learning react-native layout (i)
• LESSION5: Learning react-native layout (ii)
• Lession6:ui components
• Application of LESSION7:JSX in React-native

There are a few times that will be updated:

• Lession8: Write your own components
• LESSION9: Modular Development
• LESSION10: Building the project structure
• LESSION11: Source Code Analysis

Sixth application of JSX in React-native overview of the JSX

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

Second, the grammar introduction

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

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

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

function () {    return  (        <view style={styles.container}>            <text style={ Styles.welcome}>                {0? ' First paragraph ': ' second paragraph '}            </Text>        </View>    );}

上面的代码我们可以看出，style＝｛｝是一个表达式；{0? ‘第一段‘: ‘第二段‘}是表达式，最后显示的应该是“第二段”。3、属性

In HTML, a property can be any value, for example: <div tagid= "00_1" ></div>,tagid is a property, similarly, a property can be used on a component. It is recommended to use the following methods: var props = {    ' ggfsjgffatq ',    ' Oriental Pearl '}; return (<view {...props}></view>);

4、如果需要在调用组件的时候动态增加或者覆盖属性，又该如何呢？很简单：<View {...props} poiname={‘虹桥机场‘}></View>5、关于样式

(1) Common inline style: {{}}, the first layer {} is an expression, the second layer {} is a JS object;<view style={{fontsize:40, width:80,}}> </View> (2  Call style sheet: {Style class. property}<view style={styles.container}></view> (3) style sheet and inline style coexist: {[]}<view style= {[Styles.container, {fontsize:40, width:80}]}>(4) Multiple style sheets: {[Style Class 1, Style Class 2]}<view style={[ Styles.container, styles.color]}>

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

React.createclass ({    porptypes:{        username:React.PropTypes.string,        age:React.propTypes.number,    }});

7、设定默认属性

React.createclass ({    function() {        return  {            ' This guy is lazy, Nothing left '        };}    );

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

Third, understanding virtual DOM

React进行了虚拟DOM的封装，所有的视图的更新都是虚拟DOM做了一个校验（diff）后最小更新。为什么这么做，因为现在机器的内存已经足以支撑这样视图UI的diff计算，用内存计算换取UI渲染效率。1、我们需要获取组件中真实的domReact.findDOMNode(component)2、第二节已经简单说了组件的生命周期（will, did）组件的生命周期分为3个部分：Mounting：正在装载组件；Updating：重新计算渲染组件；Unmounting：卸载组件

React-native Getting Started Guide (vi) application of--JSX in React-native