react入门级详细笔记

目录
  • 一、React的基本认识 
    • 1、介绍
    • 2、 React的特点
    • 3、React高效的原因
  • 二、React的基本使用
    • 1、相关js库
    • 2、在页面中导入js库
    • 3、编码
  • 三、React JSX
    • 1、虚拟DOM
    • 2、JSX
    • 3、渲染虚拟DOM元素
  • 4、创建虚拟DOM的方式
    • 纯JS方式
  • 5、React 之 Hello World

一、React的基本认识 

1、介绍

react是用于构建用户界面的JavaScript库(只关注view)由Facebook开源

2、 React的特点

  • Declarative(声明式编码)
  • Component-Based(组件化编码)
  • Learn Once, Write Anywhere(支持客户端与服务器渲染)
  • 高效
  • 单向数据流

3、React高效的原因

  • 虚拟(virtual)DOM, 不总是直接操作DOM
  • DOM Diff算法, 最小化页面重绘

二、React的基本使用

1、相关js库

  • `react.js`: React的核心库
  • `react-dom.js`: 提供操作DOM的react扩展库
  • `babel.min.js`: 解析JSX语法代码转为纯JS语法代码的库

2、在页面中导入js库

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

3、编码

<script type="text/babel"> //必须声明babel
  // 1、创建虚拟DOM元素
  const vDom = <h1>Hello React</h1> // 千万不要加引号
  // 2、渲染虚拟DOM到页面真实DOM容器中
  ReactDOM.render(vDom, document.getElementById('test'))
</script>

三、React JSX

1、虚拟DOM

React提供了一些API来创建一种特别的一般js对象

var element = React.createElement('h1', {id:'myTitle'},'hello')

上面创建的就是一个简单的虚拟DOM对象

虚拟DOM对象最终都会被React转换为真实的DOM

​ 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

2、JSX

  • 全称: `JavaScript XML`
  • react定义的一种类似于XML的JS扩展语法:`XML+JS`
  • 作用: 用来创建react虚拟DOM(元素)对象

var ele = <h1>Hello JSX!</h1>

注意1: 它不是字符串, 也不是HTML/XML标签

注意2: 它最终产生的就是一个JS对象

  • 标签名任意: HTML标签或其它标签
  • 标签属性任意: HTML标签属性或其它
  • 基本语法规则

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含

  • `babel.js`的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

3、渲染虚拟DOM元素

语法:

ReactDOM.render(virtualDOM, containerDOM)
  • 参数一: 纯js或jsx创建的虚拟dom对象
  • 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

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

4、创建虚拟DOM的方式

纯JS方式

React.createElement('h1',{id:'myTitle'}, title

JSX方式

<h1 id='myTitle'>{title}</h1>

代码示例

<div id="app"></div>
const test1 = 'MY TEST 1'
// 1、创建虚拟dom：两种方法
var element = React.createElement('h3',{id:app},test1)
var element2 = <h3 id={test1}>{test1}</h3>
// 2、渲染虚拟dom
ReactDOM.render(element,document.getElementById('app'))
ReactDOM.render(element2,document.getElementById('app'))

5、React 之 Hello World

第一步：引入react.js相关库

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

第二步：定义根元素

<div id="app"></div>

第三步：在babel环境下写React代码

<script type="text/babel">
// 1、创建虚拟dom元素对象
var vDOM = <h1>Hello W</h1>  //不是字符串
// 2、将虚拟dom渲染为页面真实dom容器中
ReactDOM.render(vDOM,document.getElementById('app'))
</script>
赞 (0)

相关推荐

  • 关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)

    最近,在运行一个老RN项目的时候,使用Xcode运行的时候报了如下的代码错误: Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *'                 with an lvalue of type 'NSArray<Class> *__strong' Cannot initialize a parameter of type 'NSArray<Class>

  • 详解React中key的作用

    详解React中key的作用

    要了解React中key的作用,可以从key的取值入手,key的取值可以分为三种,不定值.索引值.确定且唯一值 在下面的代码中,key的取值是不定值(Math.random()) 问题: 点击按钮的时候,span的颜色会变成红色吗? import React, { useState } from 'react'; function App() { const [initMap, setInitMap] = useState([1,2,3,4]); const handleClick = () =

  • 详解React 父组件和子组件的数据传输

    在学习 React 框架组件间数据传输知识点前,我们需要先明确几点使用原则. React的组件间通讯是单向的.数据必须是由父级传到子级或者子级传递给父级层层传递. 如果要给兄弟级的组件传递数据,那么就要先传递给公共的父级而后在传递给你要传递到的组件位置. 这种非父子关系的组件间传递数据,不推荐使用这种层层传递的方式:而是选择使用维护全局状态功能模块(Redux) 一.父组件向子组件传递数据 父组件向子组件传递数据是通过在父组件中引用子组件时,在子组件标签设置传输数据的属性:而子组件中通过 thi

  • react基础知识总结

    react基础知识总结

    前言 最近在准备面试.复习了一些react的知识点,特此总结. 开始 React 生命周期 react 16以前的生命周期是这样的 组件在首次渲染时会被实例化,然后调用实例上面的componentWillMount,render和componentDidMount函数.组件在更新渲染时可以调用componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render和componentDidUpdate函数.组件在卸载时可

  • react入门级详细笔记

    目录 一.React的基本认识  1.介绍 2. React的特点 3.React高效的原因 二.React的基本使用 1.相关js库 2.在页面中导入js库 3.编码 三.React JSX 1.虚拟DOM 2.JSX 3.渲染虚拟DOM元素 4.创建虚拟DOM的方式 纯JS方式 5.React 之 Hello World 一.React的基本认识  1.介绍 react是用于构建用户界面的JavaScript库(只关注view)由Facebook开源 2. React的特点 Declarat

  • java基础详细笔记之异常处理

    java基础详细笔记之异常处理

    目录 异常概述 常见异常的举例 空指针异常NullPointerException 数组角标越界异常ArrayIndexOutOfBoundsException 异常的抛出与捕捉 抛出异常 捕捉异常 在方法中抛出异常 使用throws关键字抛出异常 使用throw关键字抛出异常(自定义异常) 异常的使用原则 总结 异常概述 在Java中,这种在程序运行时可能出现的一些错误称为异常.异常是一个在程序执行期间发生的事件,它中断了正在执行的成宿的正常指令流. 视频笔记:  Java程序执行时遇到的异常

  • React超详细分析useState与useReducer源码

    目录 热身准备 为什么会有hooks hooks执行时机 两套hooks hooks存储 初始化 mount useState mountWorkInProgressHook 更新update updateState updateReducer updateWorkInProgressHook 总结 热身准备 在正式讲useState,我们先热热身,了解下必备知识. 为什么会有hooks 大家都知道hooks是在函数组件的产物.之前class组件为什么没有出现hooks这种东西呢? 答案很简单,

  • React useCallback详细使用教程

    目录 一.useCallback的作用 二.useRef解决方案 三.useReducer解决方案 四.usePersistFn解决方案 一.useCallback的作用 usecallback不是用来解决组件中有过多内部函数导致的性能问题: 1.我们要知道,js创建一个函数的成本是非常小的,这点计算对于计算机来说是小case 2.其实使用useCallback会产成额外的性能:对deps的判断 3.其实每次组件重新渲染时,都无所谓避免重新创建内部函数,因为即使useCallback的deps没

  • React超详细讲述Fiber的使用

    目录 Fiber 概念 结构 Fiber树的遍历是这样发生的深度遍历 window.requestIdleCallback() requestAnimationFrame Fiber是如何工作的 结论 Fiber 概念 JavaScript引擎和页面渲染引擎两个线程是互斥的,当其中一个线程执行时,另一个线程只能挂起等待 如果 JavaScript 线程长时间地占用了主线程,那么渲染层面的更新就不得不长时间地等待,界面长时间不更新,会导致页面响应度变差,用户可能会感觉到卡顿 破解JavaScrip

  • Android Mouse实现过程详细笔记

    简单的做点笔记 ,省得以后忘记了-- 1.emulator模拟器实际上是一个基于qemu的arm环境模拟器,其源码在external/qemu里面,编译出来的目录在/host/linux-x86. export ANDROID_PRODUCT_OUT=~/google_r2/out/target/product/generic export PATH=$PATH:~/google_r2/out/host/linux-x86/bin加入前面两个path以后直接运行emulator就是运行我们编译好

  • linux下apache、mysql、php安装配置详细笔记

    软件准备: mysql-5.0.56.tar.gzhttp://dev.mysql.com/get/Downloads/ httpd-2.2.12.tar.gzhttp://labs.xiaonei.com/apache-mirror/httpd/ php-5.3.0.tar.gzhttp://cn.php.net/get/php-5.3.0.tar.gz/from/this/mirror 一.安装MYSQL 复制代码 代码如下: groupadd mysql                  

  • jQuery 入门级学习笔记及源码

    jQuery真的很好,有些效果甚至让我尖叫.而各种插件能实现你喜欢的效果,这种方式为jQuery的流行奠定了基础,就像那个crocs鞋子似的.jQuery还有一个优点是达到了将行为与结构分开的目的. 内容概要: 1. 安装 2. Hello jQuery 3. Find me:使用选择器和事件 4. Rate me:使用AJAX 5. Animate me(让我生动起来):使用FX (jQuery FX,jQuery UI后的第二个子库,强调动画效果而非UI的外观模块,包括对象的消失.出现:颜色

  • JS页面获取 session 值，作用域和闭包学习笔记

    JS页面获取 session 值，作用域和闭包学习笔记

    本文实例讲述了JS页面获取 session 值,作用域和闭包.分享给大家供大家参考,具体如下: Javascript获取session的值: var name= "${sessioScope.变量名}"; 注意这里面需要使用 "" 把 El 表达式给括起来,否则就取不到数据. JSP获取session的值: 可以直接${sessionScope.变量名},在标签里也是一样. JSP获取URL的值: var name = "<%=request.get

  • Java中的使用及连接Redis数据库(附源码)

    引言: 本文主要分享了Redis如何在IDEA中部署,运行:模拟加入Redis的操作: 目录结构 1. 在IDEA中搭建Redis 1.1 创建项目 新建含有web的SpringBoot项目: 搭建项目参考:SpringBoot超详细笔记:https://blog.csdn.net/weixin_42601136/article/details/108396511 1.2 添加依赖(不够手动添加) <dependencies> <!-- 1. Jedis--> <depend

随机推荐