React Native学习之从React到React Native

Joe.Ye • 2023-02-25 • React Native

基本介绍

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

React的核心思想：组件化，特别适合一个团队开发项目。

React主要有如下3个特点：

  • 作为UI（Just the UI）
  • 虚拟DOM（Virtual DOM）：React 最重要的一个特性，放进内存，最小更新的视图，差异部分更新使用diff算法
  • 数据流（Date Flow）：单向数据流

学习React需要掌握的知识：

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

React IDE

WebStorm插件

WebStorm：http://www.jetbrains.com/webstorm/
WebStorm破解参考：http://idea.lanyus.com

npm install ReactNative-LiveTemplate -g
npm install react-templates -g

Visual Studio Code

跨平台免费的：微软的 Visual Studio Code

官方网站：https://code.visualstudio.com/

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作。

Visual Studio Code 现在已经支持大量的扩展插件，可以根据自己的需求打造出最适合自己使用的编辑器

插件：https://marketplace.visualstudio.com/VSCode

React Native 插件：https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

插件安装方法：

  • 启动 VS Code 并按下快捷键Ctrl+P
  • 输入命令：ext install vscode-react-native，回车
  • 点击安装/更新，即可安装/更新指定插件

问题及使用小技巧：

  • 解决修改字体报错的问题，不用 VS Code 自己修改，使用其他编辑器修改：.vscode/setting.json，添加：{"editor.fontSize": 0}
  • 使用技巧：拆分编辑器ctrl+\
  • 无插件化的代码diff：右键文件 -> 选择以进行比较；右键另一个文件 -> 与 xxx 比较
  • 格式化js文件，右键代码区域 -> 格式代码，或直接Alt+Shift+F

nuclide

FaceBook官方推荐：nuclide 只支持Mac 基于Atom（github的）（Atom最大的特色就是可以安装很多的插件来完成我们的需求）炫酷插件

nuclide 官方网站：https://nuclide.io/

案例

下载 React Kit：http://facebook.github.io/react/downloads.html

  • react.js react-dom.js：React的核心文件
  • JSXTransformer.js browser.min.js：讲JSX转译成js和html的工具

React最新版本：https://facebook.github.io/react/downloads/react-15.3.1.zip

在React 0.14前，浏览器端实现对jsx的编译依赖jsxtransformer.js
在React 0.14后，这个依赖的库改为browser.js，页面script标签的type也由text/jsx改为text/babel

jsx只能用来测试学习React，生产环境需要借助编译工具事先将jsx编译成js。例如可以使用Node.js做预编译，安装react-tools工具

npm install -g react-tools

简单组件和数据传递

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

<!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}! <br />www.rnapp.cc</h1>;
            //这是注释 React.createElement
        }
    });

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

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

通过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>

简单应用，数据回显

<!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}
                        placeholder = {this.state.value}
                        />
                    <h3>输出</h3>
                    <div> {this.state.value} </div>
                </div>
            );
        }
    });

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

</script>

</body>
</html>

版权声明：
作者：Joe.Ye
链接：https://www.appblog.cn/index.php/2023/02/25/react-native-learning-from-react-to-react-native/
来源：APP全栈技术分享
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
海报
React Native学习之从React到React Native
基本介绍 ReactNative是基于React设计，了解React有助于我们开发RN应用。React希望将功能分解化，让开发变得像搭积木一样，快速而且可维护。 React的核心思想……
<<上一篇
下一篇>>
文章目录
关闭
目 录