React 简介及其基本使用

时间 2019-11-08

标签 react 简介及其基本使用栏目 React 繁體版

原文原文链接

相关概念：javascript

插件：别人写好的第三方库css

xxx 插件： jQuery 插件 / react 插件html

全家桶：核心库 + 相关插件java

构建项目：对项目源码进行编译、合并、压缩......处理，生成能让浏览器高效运行的打包文件react

构建用户界面：显示带数据的界面（将数据以页面的形式展示出来）算法

jQuery 库：直接操做 DOM，只是简化封装成了函数，是一个函数库。编程

React 库：间接操做 DOM，经过修改状态数据刷新界面，组件化的编程思想数组

模块化编程：一个 js 就是一个模块，项目代码由多个模块构成。浏览器

界面： html、css 实现的babel

功能： js 实现的

React Native 能够用开发原生应用 APP

一个图片的显示：由内存的数据被浏览器解析 DOM 元素对象 渲染到页面

轻量级对象：属性少 ---- 虚拟 DOM 元素对象

重量级对象：属性多 ---- 原生 DOM 元素对象

React

用于动态构建用户界面的 javascript 库，由 Facebook 开源

特色：

声明式： 无需直接操做 DOM，只需更新页面数据对应的状态数据，便可更新页面

组件化编程：每一个界面功能完成的部分(html、css等全部资源)称之为 "组件"

做用：简化、复用

组件使用：

一次学习，随处使用：能够一套代码实现跨平台应用 (支持客户端与浏览器渲染)

高效：只需操做虚拟 DOM，框架会映射到原生 DOM，采用了 DOM Diff 算法，最小化页面重绘

单数据流

基本使用：

1. 使用 CDN 引入 React 16.7

注意: 在浏览器中使用 Babel 来编译 JSX 效率是很是低的____页面运行过程当中编译

产品版，应该是使用构建工具，提早将源码编译成正常的源码

2. 引入插件

操做 DOM 的插件

Babel 将 ES6 转 ES5，将 jsx 转换成 js

3. 写代码（浏览器解析以前，babel 会将 jsx 代码转换成 js 代码）

// 使用 jsx 语法建立虚拟 DOM

<script type="text/babel"> // 声明使用 babel 解析 jsx 为 js

const vDOM = <h2 id={myId} name={myName}>{content}</h2>;

// 而后渲染

ReactDOM.render(vDOM, document.getElementById("test"));

// 建立虚拟 DOM 的非 jsx 语法步骤

const vDOM = React.createElement('h2', {id:"myWords", name: "kjf"}, "Hello React.");

// 而后渲染

ReactDOM.render(vDOM, document.getElementById("test"));

// 插入页面前：根据虚拟 DOM 生成原生 DOM

// 将内存的虚拟 DOM元素渲染到页面的原生 DOM 容器中

jsx

<h2 id={myId} name={myName}>{content}</h2>;

全称：JavaScript XML

react 定义的一种相似于 XML 的 js 扩展语法 XML + js

标签、属性、文档与 html 的相对应

做用： 建立 react 虚拟 DOM 元素对象

注意：

不是字符串，而是最终产生一个对象。虚拟 DOM 元素对象

debugger

动态展现列表数据

/**** 虚拟 DOM 标签数组
const lis = [
    <li>Thor</li>,
    <li>Stark</li>,
    <li>Hock</li>,
]
const ul = (
    <ul>
        {lis}
    </ul>
);
****/

const names= ["Thor", "Stark", "Hock"]

// 建立虚拟 DOM
const ul = (
    <ul>
        {
            names.map(
                (each, index)=><li key={index}>{each}</li>
            )
        }
    </ul>
)

// 渲染 DOM
ReactDOM.render(ul, document.getElementById("outer"))

代码地址： kiss me.