React基础

zoukankan html css js c++ java

React基础
React的基本认识

官网:https://react.docschina.org/

什么是React

React是用于构建用户界面的JavaScript库（react只关注界面(视图)）
React是一个将数据渲染为HTML视图的开源JavaScript库
- 在页面上需要展示一些学生的信息，大概需要三步：
  
  发送请求获取数据
  
  处理数据（过滤、整理格式等）
  
  操作DOM呈现页面 (react做的事情)
由谁开发的
- 由Facebook开发，且开源。
- 起初由Facebook的软件工程师Jordan Walike创建。
- 于2011年部署于Facebook的newsfeed
- 随后在2012年部署于Instagram
- 2013年5月宣布开源
为什么要学？
- 原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）
  
  document.getElementById('app')
  
  document.querySelector('#app)
  
  document.getElementsByTagName('span)
- 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
- 原生JavaScript没有组件化编码方案，代码复用率低。
React的特点
- 采用组件化模式，声明式编码，提高开发效率及组件复用率。（命令式编码/声明式编码）
- 组件式编码
- 在React Native中可以使用React语法进行移动端开发
- 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互
React高效的原因
- 1）虚拟（virtual）DOM，不总是直接操作DOM。（批量修改，重绘次数少）
- 2） DOM Diff 算法，最小化页面重绘。减小更新的区域。
React的基本使用

Hello,React 的demo
```

<div id="test"></div>
    

<script src="../../../js/react.development.js"></script>

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

<script src="../../../js/babel.js"></script> 

<script type="text/babel"> // 此处一定要写babel

    // 1、创建虚拟DOM
    const VDOM = <h1>Hello,React</h1> // 此处一定不要写引号，因为不是字符串
    // 2、渲染虚拟DOM到页面
    // ReactDOM.render(虚拟DOM,容器)
    ReactDOM.render(VDOM,document.getElementById('test'))
    
</script>
```
相关的js库
- react.js:react的核心库
- react-dom.js : 提供操作DOM的react的扩展库
- babel.js: ES6转ES5、解析JSX语法代码转为纯js语法代码的库
创建虚拟DOM的两种方式

纯js方式（一般不用）
```
// React.createElement(标签名字，标签属性，标签内容)
const VDOM =  React.createElement('h1',{id:"title"},"Hello,React")
// 创建复杂一点的虚拟DOM
const VDOM1 =  React.createElement('h1',{id:"title"},React.createElement('span',{},"Hello,React"))
```
JSX方式
```
const VDOM = <h1 id="title">Hello,React</h1>
// 创建复杂一点的虚拟DOM
const VDOM1 = <h1 id="title"> <span>Hello,React</span> </h1>
```
注意：JSX方式比纯js方式简单。

虚拟DOM与真实DOM

虚拟DOM与真实DOM在控制台打印出的结果
- 本质上是Object类型的对象（一般对象）。
  
  React 提供了一些API来创建一种‘特别’的一般js对象
  
  var element = React.createElement('h1',{id:"myTitle"},'hello')
  
  上面创建的就是一个简单的虚拟DOM对象。
- 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多操作。
- 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
- 我们编码时基本只需要操作react的虚拟DOM相关数据，react会转换为真实DOM变化而更新界面。
React JSX

JSX
- 全称：JavaScript XML（可扩展标签）
- react定义的一种类似于XML的js扩展语法：js+XML
- 本质上是React.createElement(component.props,....children)方法的语法糖。
- 作用：用来简化创建虚拟DOM
  
  写法：var ele = <h1>Hello JSX</h1>
  
  注意1:它不是字符串，也不是HTML/XML标签
  
  注意2:它最终产生的就是一个js对象
- 标签名和标签属性
  
  标签名任意：HTML标签或其他标签
  
  标签属性任意：HTML标签属性或其他
- 基本语法规则
  
  定义虚拟DOM，不要写引号。
  
  在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
  
  样式的类名指定不要用class，要用className
  
  内联样式，要用style={{key:value}}的形式去写。（camelCase语法骆驼拼写法）
  
  只有1个根标签
  
  标签必须闭合 <input type="text" />
  
  标签首字母
  
  若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
  
  若大写字母开头，react就会去渲染对应的组件，若组件没有定义，则报错。
  
  注释语法： {/注释.../}
- 遇到 < 开头的代码，以标签的语法解析：html同名标签转换为html同名元素，其他标签需要特别解析。
- 遇到以 { 开头的代码，以js语法解析：标签中的js代码必须用{}包含。
- babel.js的作用
  
  浏览器不能直接解析JSX代码，需要babel转译为纯JS的代码才能运行。
  
  只要用了JSX，都要加上type=“text/babel”，声明需要babel来处理。
```
const myId = "TIT";
const myData = "Hello,React"

var myStyle = {
    fontSize: 30,
    color: '#fff'
};

// 1、创建虚拟DOM
const VDOM = (
    <div>
        {/*注释...*/}
        <h2 id={myId.toLocaleLowerCase()} className="title">
            <span style = {myStyle}>{myData.toLocaleLowerCase()}</span>
        </h2>
        <input type="text" />
    </div>
    
) // 此处一定不要写引号，因为不是字符串
// 2、渲染虚拟DOM到页面
// ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM,document.getElementById('test'))
```
渲染虚拟DOM(元素)

语法: ReactDOM.render(virtualDOM 虚拟DOM, containerDOM DOM容器)

作用：将虚拟DOM元素渲染到页面中的真实容器DOM中显示

参数说明
- 参数一: 纯js或jsx创建的虚拟dom对象
- 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
demo：动态展示列表
```
var data = ['angular','react','vue']
// 1、创建虚拟DOM
const VDOM = (
  <div>
    <h1>前端技术列表</h1>
    <ul>
        {
            data.map((item,index)=>{
                return <li key={index}>{item}</li>
            })
        }
    </ul>
</div>
)
// 2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test')) 
```
在 JSX 中使用 JavaScript 表达式。

一定注意区分：【js语法（代码）】与【js表达式】
- 表示式：一个表达式会产生一个值，可以放在任何一个需要值的地方。下面这些都是表示式：
  
  a
  
  a+b
  
  demo(1)
  
  arr.map()
  
  function test(){}
- 语句（代码）：下面这些都是语句（代码）
  
  if(){}
  
  for(){}
  
  swich(){case:xxxx}
react 遍历数组（结合 key 的使用）
- 使用 map 进行遍历数组
- 需要使用到 key 值
- key 的值一定要是唯一的内容，不能重复
- 通常，我们使用数据中的 id 来作为元素的 key
- 当元素没有确定 id的时候，万不得已你可以使用元素索引index 作为 key 但一般不使用index作为key
- 如果不使用key，会报错
模块与组件、模块化与组件化的理解

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

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

4.3 组件化

当应用是以多组件的方式实现的，这个应用就是一个组件化的应用。
查看全文

相关阅读:
5.4 省选模拟赛修改线段树优化dp 线段树上二分
 一本通高手训练 1782 分层图状压dp
luogu P3830 [SHOI2012]随机树期望 dp
5.2 省选模拟赛或许线型基
 luogu P4562 [JXOI2018]游戏组合数学
 一本通高手训练 1781 死亡之树状态压缩dp
luogu P4726 【模板】多项式指数函数多项式 exp 牛顿迭代泰勒展开
 4.28 省选模拟赛负环倍增矩阵乘法 dp
HDU 1756 Cupid's Arrow 计算几何判断一个点是否在多边形内
 一本通高手训练 1763 简单树可持久化线段树树链刨分标记永久化

原文地址：https://www.cnblogs.com/jing428/p/14476183.html

热门文章
静态属性
 高级语法
 Python类中的私有变量和私有方法
 Python类的继承
 ftp主动模式和被动模式
 re模块
 xml处理模块
 sys模块
 time模块
 os模块

React的基本认识

官网:https://react.docschina.org/

什么是React

由谁开发的

为什么要学？

React的特点

React高效的原因

React的基本使用

Hello,React 的demo

相关的js库

创建虚拟DOM的两种方式

纯js方式（一般不用）

JSX方式

虚拟DOM与真实DOM

虚拟DOM与真实DOM在控制台打印出的结果

React JSX

JSX

渲染虚拟DOM(元素)

语法: ReactDOM.render(virtualDOM 虚拟DOM, containerDOM DOM容器)

作用： 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

参数说明

demo：动态展示列表

在 JSX 中使用 JavaScript 表达式。

一定注意区分：【js语法（代码）】与【js表达式】

react 遍历数组 （结合 key 的使用）

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

4.1 模块（js文件）

4.2 组件

4.3 模块化

4.3 组件化

作用：将虚拟DOM元素渲染到页面中的真实容器DOM中显示

react 遍历数组（结合 key 的使用）