2、手把手教React Native实战之从React到RN

时间：2021-11-14 19:47:46

###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-tools

<!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更新视图）

<!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简介与代码分析

/**

 * 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

##2、配套视频(下载地址)：https://yunpan.cn/cY4JX8Aj5Vr9Y  访问密码 413d

相关文章