Welcome everyone

React初步学习

前端 汪明鑫 356浏览 0评论

首先附上react的log

 

react的官网:

https://reactjs.org/

react是什么?

是一个js的库

 

 

支持服务器端渲染

 

 React Native开发一套应用可以部署安卓和苹果
但用户体验不是多好,所以后来用的比较少

 

虚拟DOM是React中重要的概念

React可以操作虚拟DOM,不会重新渲染,真实DOM没有动
虚拟DOM可以转换为真实DOM,才会统一渲染,只用渲染一次 (更高效)
会比较DOM变化的地方,只渲染变化的地方 (局部渲染页面比重新渲染整个页面快)
React需要引入的js文件
<script type="text/javascript" src="../js/react.js"></script>
<script type="text/javascript" src="../js/react-dom.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

注意:要先引入react.js再先引入react-dom.js

 

也可以引入在线的js文件,使用cdn

https://www.bootcdn.cn/

 

再来了解下babel,下面是babel的官网

https://www.babeljs.cn/

 

babel可以把es6语句转换为es5语句

另一个功能就是转换react的语法

jsx专门用来写虚拟DOM
js引擎解析不了,得用babel解析
什么叫jsx?
JavaScript XML
react定义的一种类似于XML的JS扩展语法: XML+JS

作用: 用来创建react虚拟DOM(元素)对象

var jsx = <h1>Hello JSX</h1>;

注意1: 它不是字符串, 也不是HTML/XML标签
注意2: 它最终产生的就是一个JS对象

 

虚拟DOM最简单的一点可以在js里写html

来看看官网的hello world

我们来自己写一个Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HelloWorld</title>

  <script type="text/javascript" src="../js/react.js"></script>
  <script type="text/javascript" src="../js/react-dom.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
</head>
<body>

  <div id="demo"></div>


  <script type="text/babel">

      console.log(ReactDOM);

      //在js里写html
      //render方法要传递2个参数   参数1:要创建的虚拟DOM   参数2:虚拟DOM将要放置的容器
      //注意:虚拟DOM会先转换成真实DOM,在放置参数2指定的页面的容器
      ReactDOM.render(<h1>Hello  World</h1>,
          document.getElementById('demo'));

  </script>


</body>
</html>

 

首先看一下我们打印的ReactDOM

render 是渲染的意思

 

 

虚拟DOM对象就是js对象


如何让创建虚拟DOM对象

创建虚拟DOM的2种方式:
1). 纯JS(一般不用):
React.createElement(‘h1′, {id:’myTitle’}, title)
2). JSX:
<h1 id=’myTitle’>{title}</h1>


 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>虚拟DOM</title>
</head>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<body>

<div id="demo"></div>

<script type="text/babel">

    let element = React.createElement('h1', {id:'element1'}, 'hello world');

    ReactDOM.render(element, document.getElementById('demo'));

</script>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>虚拟DOM</title>
</head>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<body>

<div id="demo"></div>

<script type="text/babel">

    //1,初始化动态数据
    let remark = '666!';
    let name = 'xinye';

    //2,创建虚拟dom (js对象): JSX
    let vDOM = <h1 id="myTitle" name={name}>{remark}</h1>;   // html里写js要加大括号

    //3,将虚拟dom渲染中页面元素中
    ReactDOM.render(vDOM, document.getElementById('demo'));

</script>

</body>
</html>

 

最后在写一个小demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<hr>

<div id="demo"></div>

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

<script type="text/babel">
  var mylist= ['a', 'b', 'c'];

  ReactDOM.render(
    <ul>
      {
          //相当于返回一个新数组,数组的每个元素是一个li
          //遍历数组得有唯一的key
        mylist.map(function (item, index) {
          return <li key={index}>{item}</li>;   //html里写js要加{ }
        })
      }
    </ul>,
    document.getElementById('demo')
  );

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

显示结果:

 

再来看下上面的例子出现的map()函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>map(runoob.com)</title>
</head>
<body>

<p>点击按钮获取数组元素的平方根。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25];
function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}
</script>

</body>
</html>

 

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。


 

最后附上我学习react放在github上的代码: ReactLearn

转载请注明:汪明鑫的个人博客 » React初步学习

喜欢 (0)

说点什么

您将是第一位评论人!

提醒
avatar
wpDiscuz