React: 认识React

一、简介

React-Native是Facebook开源的跨平台框架，用于实现前端和原生进行混合开发。React-Native开发可以很好的使用原生UI构建用户界面，与传统的使用WebView相比，不仅保留了原生的用户体验和流畅度，还提高了开发效率，React-Native的构建思路图如下。而React-Native是基于React设计的，由此可见React在RN开发中是极其重要的。React的地址是Github地址：https://github.com/facebook/react、官网地址：https://facebook.github.io/react/。接下来开始认识React。

二、基础

需要了解React的几个基本的特点，如下：

作为UI： React强调的是界面，只作为视图View在MVC中使用。
虚拟DOM：采用虚拟的节点，可以很好地优化视图的渲染和刷新（局部重绘），提高了性能。
数据流：单方向的数据流，比传统的数据绑定，更加灵活和快捷。

学习React需要掌握一些基本知识，如下：

JSX语法知识：类似于XML语言，HTML是XML的子集，它跟HTML也很像。一种语法糖，更方便地创建虚拟DOM，需要解析器对它进行解析成JS。
ES6/7/8的知识：遵循ECMAScript的JavaScript标准库，添加了许多新的语法特性，ES6解决了ES5的缺陷，有了类的概念，实现了代码库之间的共享。
Web基础知识：这个是要具备的最为基本前端知识，例如CSS/JavaScript等。

一般的React开发需要的文件工具，如下：

react.js：是React的核心文件，通过嵌套JSX来创建组件的工具。
react-dom.js，browser.js：将JSX转译成JavaScript和HTML的工具。
这几个文件下载地址：可前往下载。
推荐使用Node.js预编译：npm install -g react-tools。最新版本用babel：https://babeljs.io/docs/en/

三、JSX

1、概念

1、类似于XML的语法糖

JSX是JavaScript的扩展，React为了代码的可读性更方便地创建虚拟DOM等原因，加入了一些类似XML的语法的扩展。其实它就是HTML标签，只不过在JS中写这些标签时，不再像以前那样作为字符串用引号引起来，而是像在XML文件中书写一样，直接写即可。

2、第一代编译器——jsxTransformer

JSX代码并不能直接运行，需要将它编译成正常的JavaScript表达式才能运行，jsxTransformer.js就是这一编译器的角色。

3、第二代编译器——babel

React官方博客发布了一篇文章，声明其自身用于JSX语法解析的编译器JSTransform已经过期，不再维护，React JS和React Native已经全部采用第三方Babel的JSX编   译器实现。原因是两者在功能上已经完全重复，而Babel作为专门的JavaScript语法编译工具，提供了更为强大的功能。而browser.js是babel编译器的浏览器版本。

2、书写

//这就是一个JSX对象

<h1>I am XYQ</h1>

//这也是一个JSX对象，JSX执行的是JavaScript表达式

var obj = "I am XYQ";

<h1>{obj}</h1> 或者 <h1>obj</h1> 

//这仍然是一个JSX对象，显示HTML，_html为属性

<div>{{_html:'<h1>I am XYQ</h1>'}}</div>

3、载入

//方式1：内联方式载入

<script type="text/babel">

     ReactDOM.render(

           //这里面书写JSX代码

      );

</script>

//方式2：外联方式载入

//test.js文件

ReactDOM.render(

    //这里面书写JSX代码

);

//开始引入

<script type="text/babel" src="test.js"></script>

4、转换

这个<script type="text/babel">...</script>解析器会把JSX对象解析成JavaScript对象，转换格式为：

React.createElement(

    string/ReactClass type,

    [object props],

    [children ...]

)

第一个参数：可以是一个字符串，也可以是一个HTML标签的元素，或者是ReactClass类型的对象

第二个参数：是一个对象或者字段，表示组件的所有属性

第三参数：元素的子元素

JSX对象转换为:

//不带属性

<h1>I am XYQ</h1>  <===> React.createElement("h1", null, "I am XYQ");

//若带属性

<h1 width:"20px">I am XYQ</h1>  <===> React.createElement("h1", {width:"20px"}, "I am XYQ");

//带样式的

<h1 style={{color:'#ff0000', fontSize:'14px'}}>I am XYQ</h1>

<===> React.createElement("h1",{style:{color:'#ff0000',fontSize:'14px'}}, "I am XYQ")

四、动手

IDE：WebStorm或Sublime

文件结构的组成：

HTML中创建组件：

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title>Hello React</title>

        <script src="react.js"></script>

        <script src="react-dom.js"></script>

        <script src="browser.min.js"></script>

    </head>

    <body>

        <script type="text/babel">

            ReactDOM.render(

                 <h1>I am XYQ</h1>,

                 document.body

             );

        </script>

    </body>

</html>

五、分析

1、在head中，通过<script src=""></script>引入了React的3个核心js框架，作用上面已经有过解释；

2、在body中，通过<script type="text/babel"></script>引入JSX编译器对创建的JSX对象进行解析；

3、内部解析的标准形式为：React.createElement(string/ReactClass type, [object props], [childre...] );

4、ReactDOM.render()是将JSX对象转化后挂载到父节点上，最后并渲染到DOM模型上进行展示；

5、ReactDOM.render()两个参数分别是JSX对象、挂载的父节点，本示例挂载到body显然实现了，但是是有问题的，不规范，应该在body内再创建新的节点，作为挂载的父节点使用，检查元素，警告日志如下：

六、规范

进行分析后，重新修改文件后，渲染结果是一样的，不过可以查看控制台警告发现已经去除了，修改如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

</head>

<body>

    <div id="example"></div>

    <script type="text/babel">

        ReactDOM.render(

            <h1>I am XYQ</h1>,

            document.getElementById('example')

        );

    </script>

</body>

</html>

七、组件

上面的代码是常规的方式，创建jsx对象，然后转换解析成DOM，最后进行渲染出来。React之所以能如此流行，主要是它采用了组件化的思想来构建界面。React提供了createClass方法来专门创建自定义的组件，组件内部通过render方法返回一个jsx对象，然后再通过ReactDOM.render方法将创建的组件渲染出来。ReactJS中约定自定义的组件标签首字母一定要大写，这样便于区分是组件标签还是HTML标签。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

</head>

<body>

    <div id="example"></div>

    <script type="text/babel">

        <!-- 创建一个HelloMessage组件 -->

        var HelloMessage = React.createClass({

            render: function(){

                <!-- 创建一个jsx对象 -->

                return <h1>welcome XYQ!</h1>

            }

        });

        <!-- 将HelloMessage组件挂载到父节点div上，并渲染出来 -->

        ReactDOM.render(<HelloMessage/>, document.getElementById('example'));

    </script>

</body>

</html>

八、属性

上面的例子中，数据都固定的，那么如果想要通过传入数据的形式进行更新，该如何做呢？React中对数据的绑定也做了处理，React中默认了组件身份为this对象，this对象都含有一个隐藏的props字段，它是从父组件传递给子组件的，通过这个字段开发者就可以通过this.props获取属性对象。react官方认为，props应该是只读的，不应该被修改。如下：

1、普通属性: this.props.varName

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

</head>

<body>

    <div id="example"></div>

    <script type="text/babel">

        <!-- 创建HelloMessage组件 -->

        var HelloMessage = React.createClass({

            render: function(){

                <!-- 创建jsx对象 -->

                <!-- this.props.name获取到了HelloMessage组件的name属性 -->

                return <h1>welcome {this.props.name}!</h1>

            }

        });

        <!-- 渲染组件 -->

        <!-- 给HelloMessage组件的name属性赋值 -->

        ReactDOM.render(<HelloMessage name="HelloMessage" />, document.getElementById('example'));

    </script>

</body>

</html>

2、数组属性: this.props.children

注意：this.props.children的值有三种可能：如果当前组件没有子节点，它是undefine; 如果有一个子节点，数据类型是Object; 如果有多个子节点，数据类型是Array。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

</head>

<body>

    <div id="example"></div>

    <script type="text/babel">

        var HelloMessage = React.createClass({

            render: function(){

                return (

                    <div>

                        <ol>

                            {

                                <!-- {this.props.children} -->

                                <!-- React.Children.map()是React提供的对children的遍历 -->

                                React.Children.map(this.props.children,function(child){

                                    return <li>{child}</li>;

                                })

                            }

                        </ol>

                    </div>

                );

            }

        });

        ReactDOM.render(

                        <div>

                            <HelloMessage>HelloMessage1</HelloMessage>

                            <HelloMessage>HelloMessage2</HelloMessage>

                            <HelloMessage>HelloMessage3</HelloMessage>

                        </div>,

                        document.querySelector('#example')

                    );

    </script>

</body>

</html>

九、样式

在做Web开发中，元素的样式是必不可少的，因为没有CSS布局，渲染的界面会是很丑的，那么在JSX中是如何使用样式的呢？有两种方式，分别如下所示：

1、引用CSS布局

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

    <style type="text/css">

        #container {

            padding: 50px;

            background-color: red;

        }

        /*
　　     这种方式不如下面采用类名的方式设置CSS布局更直接

        div div div {

            padding: 10px;

            margin: 10px;

            display: inline-block;

            background-color: #ffde00;

            color: #333;

            font-family: monospace;

            text-align: center;

        }

        */

        .helloMessage {

            padding: 10px;

            margin: 10px;

            display: inline-block;

            background-color: #ffde00;

            color: #333;

            font-family: monospace;

            text-align: center;

        }

    </style>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        var HelloMessage = React.createClass({

            render: function(){

                return (

                    <div className="helloMessage"> //添加类名，只能是className，不能写成class

                        {this.props.children}

                    </div>

                );

            }

        });

        ReactDOM.render(

                        <div>

                            <HelloMessage>I</HelloMessage>

                            <HelloMessage>A</HelloMessage>

                            <HelloMessage>M</HelloMessage>

                            <HelloMessage>X</HelloMessage>

                            <HelloMessage>Y</HelloMessage>

                            <HelloMessage>Q</HelloMessage>

                        </div>,

                        document.querySelector('#container')

                    );

    </script>

</body>

</html>

2、嵌入JSX布局

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

    <style type="text/css">

        #container {

            padding: 50px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        var HelloMessage = React.createClass({

            render: function(){                            

                //将CSS的样式生成一个JS对象

                var helloMessageStyle = {

                    padding: 10,

                    margin: 10,

                    backgroundColor: this.props.bgcolor, //获取组件属性bgcolor

                    color: "#333",

                    display: "inline-block",

                    fontFamily: "monospace",

                    fontSize: 32,

                    textAlign: "center"

                };

                return (

                    <div style={helloMessageStyle}> //将上面的CSS的JS对象嵌入到JSX中

                        {this.props.children}

                    </div>

                );

            }

        });

        ReactDOM.render(

                        <div>

                            <HelloMessage bgcolor="#58B3FF">I</HelloMessage> //设置组件属性bgcolor

                            <HelloMessage bgcolor="#FF605F">A</HelloMessage>

                            <HelloMessage bgcolor="#FFD52E">M</HelloMessage>

                            <HelloMessage bgcolor="#49DD8E">X</HelloMessage>

                            <HelloMessage bgcolor="#AE99FF">Y</HelloMessage>

                            <HelloMessage bgcolor="#EF4d6F">Q</HelloMessage>

                        </div>,

                        document.querySelector('#container')

                    );

    </script>

</body>

</html>

十、事件

俗话说代码之间没有交互，就相当于没有灵魂。了解了React中JSX的定义和样式后，再来看看JSX中如何完成事件绑定的。其实，JSX中事件的绑定和HTML使用的绑定事件几乎是一样的，JSX支持所有的HTML元素的事件。不过，需要注意的是，JSX中的事件名称必须采用驼峰式写法。例如点击事件，需要写成onClick，不能写成onclick，否则不会生效。无参数时：onClick = {function.bind(this)}、有参数时: onClick = {function.bind(this, 'argName')}。如下所示

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

    <style type="text/css">

        #container {

            padding: 50px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        var HelloMessage = React.createClass({

            render: function(){

                //定义一个点击函数的js事件对象并接收一个参数

                function testClick(message){

                    alert(message);

                }

                var helloMessageStyle = {

                    padding: 10,

                    margin: 10,

                    backgroundColor: this.props.bgcolor,

                    color: "#333",

                    display: "inline-block",

                    fontFamily: "monospace",

                    fontSize: 32,

                    textAlign: "center"

                };

                //对组件绑定上面的事件，并传入参数

                return (

                    <div style={helloMessageStyle} onClick={testClick.bind(this, this.props.message)}>

                        {this.props.children}

                    </div>

                );

            }

        });

        ReactDOM.render(

                        <div>

                            <HelloMessage bgcolor="#58B3FF" message='I'>I</HelloMessage>

                            <HelloMessage bgcolor="#FF605F" message='A'>A</HelloMessage>

                            <HelloMessage bgcolor="#FFD52E" message='M'>M</HelloMessage>

                            <HelloMessage bgcolor="#49DD8E" message='X'>X</HelloMessage>

                            <HelloMessage bgcolor="#AE99FF" message='Y'>Y</HelloMessage>

                            <HelloMessage bgcolor="#EF4d6F" message='Q'>Q</HelloMessage>

                        </div>,

                        document.querySelector('#container')

                    );

    </script>

</body>

</html>

React: 认识React的更多相关文章

React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
React的React Native
React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...
React Navigation & React Native & React Native Navigation
React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...
重谈react优势——react技术栈回顾
react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...
React 与 React Native 底层共识：React 是什么
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...
一次掌握 React 与 React Native 两个框架
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质我 ...
《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
[React] Validate React Forms with Formik and Yup
Validating forms in React can take several lines of code to build. However, Formik's ErrorMessage co ...
JavaScript 和 React，React用了大量语法糖，让JS编写更方便。
https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...

随机推荐

python从小白到大咖方便查看链接
直通BAT面试题 PyCharm快捷键一.python基础 01 python基础 02python中基本数据类型以及运算符 03流程控制之if,while,for 04基本数据类型内置方法一 05 ...
TCP/IP网络协议初识
目录一.什么是协议? 二.什么是TCP/IP协议? 三.TCP/IP为什么这么多协议? 四.TCP/IP协议为什么分层? 五.TCP/IP协议如何入门? 六.TCP/IP 的分层: 七.各协议层打包 ...
字符串 string方法
字符串 name = 'ab c dd' i = name.find('a', 1, 3) # 找到返回对应下标找不到返回-1 print(i) j = name.rfind('d') # 寻找对应 ...
Linux平台达梦数据库V7单实例安装方式之图形方式
一前言我们在学习任何一个应用时,了解它的最初步骤通常是学会如何进行安装配置,后序才去关心如何使用,学习达梦数据库也是如此,而达梦数据库的安装提供了多种方式,接下来会一一介绍每种安装方式,达梦数据库 ...
kubernets学习笔记
K8s CI :持续集成CD :持续交付 D --DeliveryCD :持续部署 D --Deployment Kubernetes Cluster: Masters: (3-host 做高可用)A ...
C++ std::array 基本用法
#include <iostream> #include <string> #include <array> using namespace std; // htt ...
[考试反思]1112csp-s模拟测试111：二重
还是AK场.考前信心赛? 而且T3的部分分还放反了所有80的都其实只有50. 总算在AK场真正AK了一次... 手感好,整场考试很顺利.要不是因为T3是原题可能就没这么好看了. 20minT1,50m ...
[译]Vulkan教程(01)入门
[译]Vulkan教程(01)入门接下来我将翻译(https://vulkan-tutorial.com)上的Vulkan教程.这可能是我学习Vulkan的最好方式,但不是最理想的方式. 我会用“d ...
【转载】【PAT】PAT甲级题型分类整理
最短路径 Emergency (25)-PAT甲级真题(Dijkstra算法) Public Bike Management (30)-PAT甲级真题(Dijkstra + DFS) Travel P ...
linux自建https证书
一.生成单向认证的https证书建立服务器私钥,生成RSA秘钥. 会有两次要求输入密码, 然后获得了一个server.key文件. 以后使用此文件(通过openssl提供的命令或API)可能经常回要 ...

React: 认识React

React: 认识React的更多相关文章

随机推荐

热门专题