React | 易学教程

1.React

1.1React介绍

由Facebook开源
用于构建用户界面的 JavaScript 库
相关网站

http://www.ruanyifeng.com/blog/2015/03/react.html

https://react.docschina.org/

1.2React的特点

声明式编码（Declarative）

告诉机器你想要的是什么，让机器去实现。而无需告诉机器如何去实现
组件化编码(Component-Based)

组件：用来实现特定功能代码和资源的集合（html/css/image）
支持客户端和服务器端渲染
更高效
单向数据流

1.3为什么高效

使用虚拟DOM

用虚拟DOM映射真实DOM，新增标签的时候修改的是虚拟DOM,真实DOM不发生改变，当我们完成所有操作进行打包渲染页面时，真实DOM会发生改变，这样减少了页面渲染次数
高效DOM diff算法，最小化页面重绘（局部渲染）

2React的基本使用

2.1本地环境的搭建

引入文件

react.js：React的核心库。这个包，是专门用来创建React组件、组件生命周期等。

react-dom.js:操作DOM的扩展库。这个包，主要封装了和 DOM 操作相关的包（比如，把组件渲染到页面上）。

babel.min.js:将 JSX语法解析为纯JS语法代码。

本地库引入并实现第一个hello react

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   //也可以使用https://www.bootcdn.cn所提供的库进行引入
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"></script>

 //创建页面元素
 <div id="root"></div>

   <!-- 这里script的type属性要设置成text/babel，因为我们要借助babel将jsx翻译成js -->
   <!-- 浏览器会优先读取type=/text/javascript中的内容 -->
   <script type="text/babel">
       /*创建虚拟DOM*/
       let vDOM = <h1>Hello, world!</h1>
       /*渲染页面*/
       ReactDOM.render(
           <h1>Hello, world!</h1>,
           document.getElementById('root')
       );
   </script>
</body>
</html>

上例中语法：

ReactDOM.render(要渲染的虚拟DOM对象, 容器 container：要渲染到页面上的哪个位置);

2.2虚拟DOM的两种创建方式

分别使用JS语法和jsx语法创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"> </script>

   <div id="test1"></div>
   <div id="test2"></div>

    <script type="text/javascript">
       let myID = 'root'
       let myData = 'rootyonghu'
       let vDOM = React.createElement('h2',{id:myID.toLowerCase()},                                                      React.createElement('span',{},myData.toLowerCase()))
       ReactDOM.render(
           vDOM,
           document.getElementById('test1')
       );

   </script>
   <script type="text/babel">
       /*创建虚拟DOM*/
       let vDOM1 = (
           <h2 id = {myID.toUpperCase()}>
               <span>
                   {myData.toUpperCase()}
               </span>
           </h2>)
       /*渲染页面*/
       ReactDOM.render(
           vDOM1,
           document.getElementById('test2')
       );
   </script>
</body>
</html>

由上面可见使用JavaScript方式创建节点更加繁琐，层层嵌套，使用jsx可以大大简化开发

React.createElement(需要创建的元素类型, 有哪些属性, 子节点)

来源：oschina

链接：https://my.oschina.net/u/4309973/blog/4720591

标签

javascript

jsx

react