手把手教你React Native实战从 React到Rn《二》

了解相关更多技术，可参考《学习React Native必看的几个开源项目》，接下来我们来聊一聊相关的React。

React简介

Rn是基于React的设计，了解 React有助于我们开发RN应用，React希望将功能分解华，让开发变得像搭积木一样，快速而且具有可维护性。

React主要有如下的3个特点：

作为UI（just the UI）
虚拟DOM（Virtural DOM）

这是亮点是React最重要的一个特性，放进内存最小更新的试图

差异部分话更新 different算法
数据流（Data Flow）单项数据流动

SO ，我们要掌握的知识点

JSX语法，类似于xml ,Xxml
ES6的相关知识 *前段基础 CSS_DIV JS 举例说明React的用法，IDE 工具：WebStorm(前段开发工具 JavaScript 问前段开发神奇，插件是非常的丰富的)

比如：ReactNative 代码智能提醒（webstorm）

git clone Https://github.com/virtoolswebpalyer/ReactNative-LiveTemplate

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

点击下载webstore

点击下载webstore破解版

1.例子（简单的组件和数据传递）

使用this.props 指向自己的属性

从http://facebook.github.io.react/downloads.html下载 react kit

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <title> 我的react native  开发  </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>Hello{this.props.name}!卡卡罗特</h1>
        }
    });
    ReactDOM.render(<HelloMessage  ="react hello"/>,document.getElementById("example"));

    </script >

<!--<div class="well" id="well">

</div>-->
</body>
</html>

2.一个简单的定时器

代码如下

 <html>
<head>
    <meta charset="utf-8">
    <title>我的计时器</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 {secondElapsed: 0};
                },


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

                /**
                 * 组装完成装载
                 */
                componentDidMount: function () {
                    this.interval = setInterval(this.tick, 1000);
                },
                /**
                 * 组件江北卸载，清除定时器
                 */
                componentWillUnmount: function () {
                    clearInterval(this.interval);
                },
                /**
                 * 渲染师徒
                 */
                render: function () {
                    return (<div> Second
                    Elapsed:{
                        this.state.secondElapsed
                    }
                    </div>
                    ) ;
                },

            }
    );
    ReactDOM.render(<Timer/>,document.getElementById('example'));
</script>
</body>
</html>

3、监控文本框输入输出

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框输入</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:"你可以在这里面输入文字"};
    },

    handChanged:function(){
        this.setState({value:ReactDOM.findDOMNode(this.refs.textarea).value});
    },

    render:function(){
        return(
                <div>
                  <h3>输入</h3>
                    <textarea style={{width:300,height:150,outline:'none'}}
                    onChange={this.handChanged}
                        ref="textarea"
                        defaultValue={this.state.value}
                    />
                    <h3>输出</h3>
                <div>{this.state.value}</div>
                </div>

        );
    }
});

ReactDOM.render(<ShowEditor />,document.getElementById("example"));

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

为什么要使用React Native?

如何在开发成本和用户体验上做的更好?

很多时候，前端有一种乐观的想法：H5可以代替原生。RN不仅可以使用前端的东西来开发啊，而且还能调用原生的组件和API

学习React Native必看的几个开源项目

手把手教你React Native 实战之开山篇《一》

react-native技术的优劣

如果你觉得此文对您有所帮助，欢迎随时撩我。微信公众号：终端研发部