【JavaScript--React】本篇文章将带你体验不同于vue框架的react框架

最好的人
36 阅读3分钟

一，首先我要知什么是React？

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

二，体验React

体验 React React 从诞生之初就是可被逐步采用的，因而你可以按需引入或多或少的 React 特性。不管你是想体验下 React，用它给简单的 HTML 页面增加一点交互，还是要开始一个完全由 React 驱动的复杂应用，该章节内容里的链接都能帮你快速开始。

经典代码演示：

ReactDOM.render(

Hello, world!

,document.getElementById('root'));

image.png

三 ，认识React

1，概念：

React 是一个用于构建用户界面的 JavaScript 库

2，特点：

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

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

Css html js 封装一个组件

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

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

3，高效的原因：

使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。 DOM Diffing算法,最小化页面重绘 说明：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效减少渲染次数。

四，虚拟DOM

1， 概念

本质时Object类型的对象(一般对象) 虚拟DOM比较'轻',真实DOM比较'重',因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性(只有React需要的属性) 虚拟DOM最终会被React转化为真实DOM,呈现在页面上

2，创建虚拟DOM ---步骤

第一步 引入React文件

第二步 准备一个容器

第三步创建虚拟DOM

第一种 JS创建拟DOM

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

第二种 JSX创建虚拟DOM

let V_DOM =

hello,react!

ReactDOM.render(V_DOM,document.getElementById("hello")); 说明：

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

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

五，JSX语法

1，概念：

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

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

    错误形式：let V_DOM = '<h1>hello,react</h1>'

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

举例：

let str = "hello,react!"; let V_DOM = (

{str}

)

4， className样式的类名

样式的类名指定不要用class,要用className

let V_DOM = (

我是文本内容

)

5， 内联样式

要用style={{key:value}}的形式(双{}代表对象,单{}代表表达式)去写。

let V_DOM = (

<span style={{color:'blue',fontSize:'30px'}}>我是文本内容

)

ReactDOM.render(V_DOM,document.getElementById("hello"));

6， 只有一个根标签

错误形式：

let V_DOM = (

<span style={{color:'blue',fontSize:'30px'}}>我是文本内容

我是段落

)

7，标签必须闭合

举例：

8， 标签首字母

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

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

9， js表达式

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

  • a
  • a+b
  • demo(1)
  • arr.map()
  • function test(){}

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

if(){}

for(){}

switch(){}

六，JSX小案例

遍历数组并输出到页面上

    const persons = [
        { realname: "张三", age: 19 },
        { realname: "李四", age: 20 },
    ]
    const V_DOM = (
        <div>
            <ul>
                {
                    persons.map((item,index)=>{
                        return <li key='index'>姓名：{item.realanme},年龄：{item.age}</li>
                    })
                }
            </ul>
        </div>
    )
    ReactDOM.render(V_DOM,document.querySelector('#app'))
avatar
文章
阅读
粉丝