从 React到React Native

陆城
2023-12-01

React简介

RN基于React设计,了解React有利于我们开发RN应用。
React希望功能分解化,让开发像搭积木一样,快速而且可维护。


React的3个特点

  • 作为UI(Just the UI)
  • 虚拟DOM(Virtual DOM)
    这是亮点,是React最重要的一个特性
    更新View很快,放进内存,最小更新的视图
    差异部分更新 diff算法
  • 数据(Data Flow)单向数据流

学习React要掌握的只是:

  • JSX语法 类似XML
  • ES6相关
  • 前端基础 CSS+DIV JS

举例说明React的用法,IDE工具:WebStorm(JavaScript 开发工具 Web前端开发神器 插件很丰富,智能代码提示,自动补全)
比如:ReactNative 代码智能提醒(Webstorm)
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTempate
下载模板:https://github.com/wix/react-templates
安装命令:npm install react-templates -g

点击下载Webstorm
点击下载Webstorm破解版

例子

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-15.3.1

在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 语法基础" /> ,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简介与代码分析

为什么要使用React Native,如何在开发成本和用户体验做到更好的平衡?
很多时候,前端都有一种乐观的想法:H5可以替代原生应用,RN不仅可以使用前端开发的模式来开发应用,还能调用原生应用的UI组件和API。

 类似资料: