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

Source: Internet
Author: User

React-native Getting Started GuideGitHub:

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
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>    );}
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]}>
React.createclass ({    porptypes:{        username:React.PropTypes.string,        age:React.propTypes.number,    }});
React.createclass ({    function() {        return  {            ' This guy is lazy, Nothing left '        };}    );
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.