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

codeGoogler / 文 发表于2018-06-01 09:54 次阅读 react,android 开发,reaact native

了解相关更多技术,可参考《学习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技术的优劣

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

技术+职场

收藏 赞 (0) 踩 (0)