• 【React 一】 入门学习

    目录

    一：简介

    1.1 概念

    1.2 特点

    1.3 高效的原因

    二：虚拟DOM

    2.1 概念

    2.2 创建虚拟DOM

    JS创建虚拟DOM

    准备容器

    创建虚拟DOM

    说明：

    三：JSX语法

    3.1 定义虚拟DOM时不要用引号。

    3.2 标签混入JS表达式需要用{}

    3.3  className样式的类名

    3.4 内联样式

    3.5 只有一个根标签

    3.6 标签必须闭合

    3.7 标签首字母

    3.8 js表达式

    四、 JSX练习

    遍历数组并输出到页面上

    一：简介

    1.1 概念

    React是用于构建用户界面的JavaScript库（只关注视图），起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

    1.2 特点

    声明式编程：React 使创建交互式 UI ，当数据变动时 React 能高效更新并渲染合适的组件。

    组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

    Css html js  封装一个组件

    高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

    灵活：无论你现在使用什么技术栈，都可通过引入 React 来开发新功能。

    1.3 高效的原因

    ·使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。

    ·DOM Diffing算法,最小化页面重绘

    说明：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效`减少渲染次数`。

    二：虚拟DOM

    2.1 概念

    · 本质时Object类型的对象(一般对象)

    · 虚拟DOM比较'轻',真实DOM比较'重',因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性(只有React需要的属性)  

    · 虚拟DOM最终会被React转化为真实DOM,呈现在页面上

    2.2 创建虚拟DOM

    JS创建虚拟DOM

    2.  
    3. <script src="js/react.development.js">script>
    4.  
    6.  
    7. <script src="js/react-dom.development.js">script>
    8.  
    10.  
    11. <script src="js/babel.min.js">script>

    准备容器

    <div id=”hello”>div>

    创建虚拟DOM

    1. const V_DOM=React.createElement('h1',{id:'title'},'hello react!');
    2.  
    3. ReactDOM.render(V_DOM,document.getElementById("hello"));//渲染到页面

    JSX创建虚拟DOM

    1. let V_DOM = <h1>hello,react!h1>
    2.  
    3. ReactDOM.render(V_DOM,document.getElementById("hello"));

    说明：

    · You are using the in-browser Babel transformer. Be sure to precompile..... babel的一个警告：你正在使用浏览器翻译babel，请确定不在生产环境中。

    · jsx 就是让创建虚拟DOM变得更有层次，更简洁。

    三：JSX语法

    JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此.应该说JSX因React框架而流行,但也存在其他的实现.只要你够厉害,甚至能在单片机上实现(当然你要自己写出它的实现方式)。

    3.1 定义虚拟DOM时不要用引号。

    1. //错误形式：
    2. let V_DOM = ‘
      hello,react
      ’;

    3.2 标签混入JS表达式需要用{}

    1. //举例：
    2.  
    3. let str  = "hello,react!";
    4.  
    5. let V_DOM = (
    6.  
    7.       <h1><span>{str}span>h1>
    8.  
    9. )

    3.3  className样式的类名

    1. //样式的类名指定不要用class,要用className
    2.  
    3.  
    4. let V_DOM = (
    5.  
    6. <h1 className='demo'><span>我是文本内容span>h1>
    7.  
    8. )

    3.4 内联样式

    1. //要用style={{key:value}}的形式(`双{}代表对象,单{}代表表达式`)去写。
    2.  
    3. let V_DOM = (
    4.  
    5. <h1 className='demo'><span style={{color:'blue',fontSize:'30px'}}>我是文本内容span>h1>
    6.  
    7.  )
    8.  
    9. ReactDOM.render(V_DOM,document.getElementById("hello"));

    3.5 只有一个根标签

    1. //错误形式：
    2.  
    3.  let V_DOM = (
    4.  
    5. <h1 className='demo'><span style={{color:'blue',fontSize:'30px'}}>我是文本内容span>h1>
    6.  
    7. <p>我是段落p>
    8.  
    9.  )

    3.6 标签必须闭合

    1. //举例：

    3.7 标签首字母

    ·若`小写字母开头`,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则`报错`。

    ·若`大写字母开头`,react就去渲染对应组件,若组件没有定义,则`报错`。

    3.8 js表达式

    一个表达式会产生一个值,可以放在任何一个需要值的地方

      · a

     ·a+b

     ·demo(1)

     ·arr.map(

    )

     ·function test(){}

    语句:不能放在创建虚拟dom语句中

      ·   if(){}

      ·   for(){}

      ·   switch(){}

    四、 JSX练习

    遍历数组并输出到页面上

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <div id="root">
    11.     div>
    12.  
    13.     
    14. 	<script src="js/react.development.js">script>
    15. 	
    16. 	<script src="js/react-dom.development.js">script>
    17. 	
    18. 	<script src="js/babel.min.js">script>
    19.     <script type="text/babel">
    20.         const person=[
    21.             {realname:'张三',age:'18'},
    22.             {realname:'李四',age:'20'}
    23.         ]
    24.         const V_DOM=(
    25.             <ul>
    26.              {
    27.                 person.map((item,index)=>{
    28.                     return <li key={index}>姓名：{item.realname}年龄：{item.age}li>
    29.                 })
    30.              }   
    31.             ul>
    32.         )
    33.         ReactDOM.render(V_DOM,document.getElementById('root'))
    34.     script>
    35. body>
    36. html>

  • 相关阅读:
    git本地搭建服务器[Vmware虚拟机访问window的git服务器]
    剑指 Offer 57. 和为s的两个数字
    【Oracle】Oracle系列之十三--游标
    【C++面向对象】5. this指针
    防火墙的安全机制
    【STL***list容器一】
    从资源隔离、资源配额、存储、网络四个方面认识Docker
    【精选】项目管理工具——Maven详解
    微服务治理之道：构建可伸缩和高可用的系统
    社交网络分析重要概念简介、相关资料和前沿研究（持续更新ing...）
  • 原文地址：https://blog.csdn.net/yzq0820/article/details/126650995