React入门

前端_贾公子
121 阅读4分钟

React入门

目录

[TOC]

React简介

官网
  1. 英文官网: reactjs.org/
  2. 中文官网:react.docschina.org/
介绍描述
  1. 用于动态构建用户界面的 JavaScript 库(只关注于视图)
  2. 由Facebook开源
React的特点
  1. 声明式编码
  2. 组件化编码
  3. React Native编写原生应用
  4. 高效（优秀的Diffing算法）
React高效的原因
  1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
  2. DOM Diffing算法, 最小化页面重绘。

React的基本使用

效果
<body>
    <!-- 追备好一个容器 -->
    <div id="test">
 
    </div>
</body>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于react操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于jsx转 js-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 一定要写babel -->
<script type="text/babel">
    //创建虚拟dom,此处一定不要写引号。因为不是字符串
    const VDOM=<h1> hello_react</h1>
    //渲染虚拟dom 到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
相关js库
  1. react.js：React核心库。
  2. react-dom.js：提供操作DOM的react扩展库。
  3. babel.min.js：解析JSX语法代码转为JS代码的库。
创建虚拟DOM的两种方式
  1. 纯JS方式(一般不用)
  2. JSX方式
<!-- 一定要写babel -->
<script type="text/javascript" >
    //创建虚拟dom,此处一定不要写引号。因为不是字符串
    const VDOM=React.createElement('h1',{id:'title'},'hello_react')
    //渲染虚拟dom 到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
虚拟DOM与真实DOM
  1. React提供了一些API来创建一种 “特别” 的一般js对象本质就是object类型对象（一般对象）
  2. 虚拟DOM对象最终都会被React转换为真实的DOM
  3. 我们编码时基本只需要操作react的虚拟，DOM相关数据, react会转换为真实DOM变化而更新界。

虚拟dDOM比较“轻”，真实DOM比较“重”，以为虚拟DOM是react内部再用，无需真实DOM上那么多的属性

React.createElement('xx',{id:'xx'},'xx')
上面创建的就是一个简单的虚拟DOM对象

React JSX

XML&&JSON

XML

//早期用于存储和传输数据
<student>
    <name>tom</name>
    <age>18</age>
</student>

JSON

"{"name:"tom","age":"18"}"
JSON.parse 转对象
JSON.stringfy 转JSON字符串
JSX

  1. 全称:  JavaScript XML

  2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是 React . createElement ( component , props , ... children ) 方法的语法糖

  3. 作用: 用来简化创建虚拟DOM

    1. 写法： var **** ele =

      Hello JSX!

    2. 注意1：它不是字符串, 也不是HTML/XML标签 不要写引号
    3. 注意2：它最终产生的就是一个JS对象

  4. 标签名任意: HTML标签或其它标签

  5. 标签属性任意: HTML标签属性或其它

  6. 基本语法规则

    1. 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
    2. 样式类名指定不要用class，要用className
    3. 内联样式，要用style={{key;value}}的形式去写
    4. 只有一个根标签
    5. 标签必须闭合
    6. 标签首字母

      1. 若小写字母开头html同名标签转换为html同名元素，若html中无该标签对应的同名元素，则报错

      2. 若大写字母开头，react就去渲染对应组件，若组件没有定义，则报错

  7. babel.js的作用

    1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
const VDOM=(
    <div>
    <h1 className='title' id={myId.toLocaleLowerCase()}> 
          <span style={{color:"pink",fontSize:'30px'}}>{myData.toLocaleLowerCase()}</span>
    </h1>
    <input type="text"/>
    </div>
    )
    //渲染虚拟dom 到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
渲染虚拟DOM(元素）
  1. 语法: ReactDOM . render ( virtualDOM , containerDOM )
  2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  3. 参数说明
    1. 参数一: 纯js或jsx创建的虚拟dom对象
    2. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
JSX练习

不能渲染对象的，

注意区分【JS语句】与【JS表达式】，

  • 表达式：一个表达式可以产生一个值，可以放在任何一个需要值的地方（a    a+b      demo(1) arr.map    function fn(){}   console.log ）
  • 语句（代码）if() {}  for(){}  switch(){case:xxx}
<script type="text/babel">
    //模拟数据
    const data = ['Angular', 'React', 'Vue']
    //创建虚拟dom,此处一定不要写引号。因为不是字符串
    const VDOM = (
        <div>
            <h1> 前端js框架列表</h1>
            <ul>
                {data.map((item, index) => {
                    return <li key={index}>{item}</li>
                })}
            </ul>
        </div>
    )
    //渲染虚拟dom 到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

模块与组件、模块化与组件化的理解

模块
  1. 理解：向外提供特定功能的js程序,一般就是一个js文件
  2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
  3. 作用：复用js,简化js的编写,提高js运行效率
组件
  1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  2. 为什么要用组件：一个界面的功能更复杂
  3. 作用：复用编码,简化项目编码,提高运行效率
模块化

当应用的js都以模块来编写的,这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现,这个应用就是一个组件化的应用

avatar
文章
阅读
粉丝