React入门_只使用react-CSDN博客

本文链接：https://blog.csdn.net/qq_44827845/article/details/117571859

React

一、React概述
二、React基本使用
三、React JSX语法
四、React创建组件的两种方法

一、React概述

React技术是用于动态构建用户界面的 JavaScript 库(只关注于视图)，是由Facebook开源。
React的特点：

声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）

React高效的原因：

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。

二、React基本使用

1.简单案例实现

<body>
     <div id="d"></div>
     
     <script type="text/babel">
          // 1. 创建一个虚拟DOM
          const vDom = <h1>hello react</h1>;    //此处vDom不是字符串，所以两边不要加引号
          console.log(vDom)  //object
          // 2. 渲染到页面上
          ReactDOM.render(vDom, document.getElementById('d'));
          console.log(document.getElementById('d')) //<div id="d"><h1>hello world</h1></div>
     </script>
</body>

在这里插入图片描述

2.相关js库理解

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

babel.js的作用：
1.浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2.只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

在<head>中引入js库
在这里插入图片描述

3.创建虚拟dom的两种方式

（1）纯js方式（一般不用）

<script type = "text/javascript">
     //1. 创建一个虚拟的dom对象
     const vDom1 = React.createElement('h2',{id: 'h2'},React.createElement('p',{'name':'p'},'我是采用纯js代码创建的dom对象')) ;
     //React.createElement("xx",{id:'xx'},"xx")  第一个参数是标签，第二个参数是标签的属性,没有就是空，多个用逗号隔开，第三个是显示的内容，可以写子标签 
       
      //2. 渲染到页面上
     ReactDOM.render(vDom1,document.getElementById('d1')) ;
</script>

在这里插入图片描述

（2）jsx方式

见1.简单案例实现

4.虚拟dom与真实dom

虚拟DOM对象最终都会被React转换为真实的DOM。我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新页面。

三、React JSX语法

JSX，全称: JavaScript XML 是react定义的一种类似于XML的JS扩展语法。其作用是简化创建虚拟dom。
JSX语法：

虚拟dom不是字符串，所以代码两边不要加引号
使用变量应该采用{变量名}的方式
采用className来调用类选择器，不要用class
写内联样式表的时候，要采用style = {{属性:值}}形式。
虚拟dom只能有一个根标签
标签必须有结束标签
标签名的首字符：
a. 如果是小写，则会自动在HTML中寻找对应的标签，并渲染成对应的标签
b. 如果是大写，则会认为标签是一个自定义的标签组件，就会去寻找此组件，找不到，报错。

举例：

<style>
    .one{
          color:red;
     }
</style>
<body>
      <div id = "d"></div>

      <script type = "text/babel">
      	const info = "我是采用jsx语法创建的组件" ;
        const n = 10 ;
        // 1. 创建一个虚拟DOM
        const vDom = (
        	<div>
            	<h1  className = "one" style = {{border:'2px solid green',fontSize:'50px'}}>{info.toUpperCase()}{n + 10}</h1>
                <p>你好</p>
                <input  />
            </div>
         )  ;    
        // 2. 渲染到页面上
        ReactDOM.render(vDom,document.getElementById('d')) ;
	  </script>
</body>

在这里插入图片描述

jsx小练习：

{ }中只能写表达式，不能写语句。表达式是一个用运算符号链接的式子，可以计算出一个具体的值。语句是一个可以执行的代码片段。
常见的表达式：1.变量 2. 函数 3. 数组及各种方法。
常见的语句：1.for 2.if 3.switch…

<script type="text/babel">
const info = "前端js框架列表" ;
const arr = ['angular','react','vue'] ;
// 1. 创建一个虚拟DOM
const vDom = (
	<div>
		<h1>{info}</h1>
        <ul>
        	{
            	arr.map((x,index) => <li key = {index} >{x}</li>)
            }
        </ul>
     </div>
)  ;    
// 2. 渲染到页面上
ReactDOM.render(vDom,document.getElementById('d')) ;
</script>

在这里插入图片描述

四、React创建组件的两种方法

组件的创建有两种方式：
a. 函数式组件: 函数名就是自定义的标签名，通常建议大写。写的时候函数必须返回一个虚拟的dom对象
b. 类式组件：采用class关键字创建一个类，此时类必须继承于react提供的一个类React.Component,在类中提供一个render方法（必须返回一个虚拟dom对象），react会帮我们自动调用render方法，创建组件。

<script type="text/babel">
 //1. 创建自己的组件（自定义标签）
function MyCom(){
	return (
            <div>我是采用函数创建出来的组件对象</div>
    ) ;
}            
//将组件渲染到页面上
ReactDOM.render(<MyCom ></MyCom>,document.getElementById('d'))
</script>

<script type="text/babel">
//2.采用类方式创建组件
class Person extends React.Component{    
//类是不会干活的，创建了类以后谁帮你去渲染，一定是底层创建了类的一个对象，new一个对象，通过对象调用了react的方法
	constructor(){
		super()   //子类继承父类
        console.log("创建对象")
    }
    render(){
        console.log("调用了")
        return (
               <div>我是采用类创建出来的组件对象</div>
        ) ;
    }
}

ReactDOM.render(<Person  />,document.getElementById('d1'))  //创建两个对象，各调用一次
ReactDOM.render(<Person  />,document.getElementById('d2'))
</script>

在这里插入图片描述