二、手把手教React Native實戰之從React到RN

時間 2019-11-11

原文原文鏈接

###React簡介
RN是基於React設計，瞭解React有助於咱們開發RN應用；
React但願將功能分解化，讓開發變得像搭積木同樣，快速並且可維護

React主要有以下3個特色：

*做爲UI（Just the UI）

*虛擬DOM（Virtual DOM）

這是亮點  是React最重要的一個特性  放進內存   最小更新的視圖

差別部分更新 diff算法

*數據流（Date Flow）單向數據流

學習React須要掌握哪些知識？

*JSX語法   相似XML

*ES6相關知識

*前端基礎  CSS+DIV  JS

舉例說明React的用法，IDE工具：WebStorm(JavaScript 開發工具 Web前端開發神器  插件很豐富)

好比：ReactNative 代碼智能提醒（webstorm）

`git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate`

下載模板：https://github.com/wix/react-templates安裝命令
`npm install react-templates -g`

[點擊下載WebStorm](https://www.jetbrains.com/webstorm/download/)

[點擊下載WebStorm破解版](http://www.cr173.com/soft/130969.html)

1.例子一（簡單組件和數據傳遞）
使用this.props 指向本身的屬性

從http://facebook.github.io/react/downloads.html下載react Kit

react.js react-dom.js：React的核心文件

JSXTransformer.js browser.min.js：講JSX轉譯成js和html的工具

最新的react版本：react-0.14.7

>在react 0.14前，瀏覽器端實現對jsx的編譯依賴jsxtransformer.js
在react 0.14後，這個依賴的庫改成browser.js，頁面script標籤的type也由text/jsx改成text/babel
可是以上只能用來測試學習react
生產環境須要藉助編譯工具事先將jsx編譯成js

例如可使用Node.js作預編譯，能夠安裝react-tools工具
npm install -g react-toolsjavascript

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第一個例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    var HelloMessage=React.createClass(
            {
                render:function(){
                    return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是東方耀</h1>;
                    //這是註釋  React.createElement
                }
            }
    );

    ReactDOM.render(<HelloMessage name="React 語法基礎8" /> ,document.getElementById('example'));




</script>
</body>
</html>

2.例子二（經過this.state更新視圖）
html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第二個例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>

<div id="example"></div>

<script type="text/babel">
    var Timer=React.createClass(
            {
      /*初始狀態*/
            getInitialState:function(){
      return {secondsElapsed:0};
    },

    tick:function(){
      this.setState({secondsElapsed:this.state.secondsElapsed+1});
    },

    /*組件完成裝載*/
    componentDidMount:function(){
      this.interval=setInterval(this.tick,1000);
    },
    /*組件將被卸載   清除定時器*/
    componentWillUnmount:function(){
        clearInterval(this.interval);
    },
    /*渲染視圖*/
    render:function(){
        return(
                <div> Seconds Elapsed:{this.state.secondsElapsed} </div>
        );
    }

    }
    );




    React.render( <Timer /> ,document.getElementById('example'));


</script>

</body>
</html>

3.例子三（簡單應用）前端

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第三個例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>

<div id="example"></div>

<script type="text/babel">

    var ShowEditor=React.createClass(
            {
                getInitialState:function(){
                  return {value:'你能夠在這裏輸入文字'};
                },

                handleChange:function(){
                  this.setState({value:React.findDOMNode(this.refs.textarea).value});
                },

                render:function(){
                    return (



                            <div>
                            <h3>輸入</h3>
                                    <textarea style={{width:300,height:150,outline:'none'}}
                       onChange={this.handleChange}
                       ref="textarea"
                    defaultValue={this.state.value}

                />
    <h3>輸出</h3>

            <div> {this.state.value} </div>

                            </div>

                    );

                }




            }

    );


    React.render(<ShowEditor />,document.getElementById('example'));



</script>

</body>
</html>

###React Native簡介與代碼分析java

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class DongFang extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!東方耀的第5課
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('DongFang', () => DongFang);

###爲何要使用React Native
如何在開發成本和用戶體驗作到更好的平衡？
不少時候，前端都有一種樂觀的想法：H5能夠替代原生應用
RN不只可使用前端開發的模式來開發應用，還能調用原生應用的UI組件和API

##二、配套視頻(下載地址)：https://yunpan.cn/cY4JX8Aj5Vr9Y 訪問密碼 413dreact

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。