【React】初识React

Komorebi゛

已于 2023-06-29 10:35:43 修改

阅读量76

点赞数

分类专栏：前端基础知识笔记文章标签：前端 react.js

于 2022-07-27 16:53:20 首次发布

本文链接：https://blog.csdn.net/Komorebi_00/article/details/126018294

版权

本文详细介绍了React的基础知识，包括React的特点、基本使用、组件化编程、组件的三大属性（state、props、refs）以及事件处理、表单数据收集。深入探讨了React的模块化和组件化思想，同时涵盖了高阶函数和组件生命周期的概念。

摘要由CSDN通过智能技术生成

React基础

一、React简介

1. React官网

英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/

2. 什么是React？

用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开发，且开源

3. React的特点

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

4. React高效的原因

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

二、React的基本使用

1. 创建第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    
    
    <script type="text/babel"> {
     /* 此处一定要写babel */}
        // 1. 创建虚拟DOM
        const VDOM = <h1>Hello,React!</h1> {
     /* 此处一定要不要写引号，因为不是字符串 */}
        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

2. 相关js库

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

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

纯JS方式（一般不用）

const VDOM = React.createElementById('h1',{
     id:'title'},React.createElement('span',{
     },'Hello,React!'))

JSX方式

const VDOM = <h1 id="title"><span>Hello,React!</span></h1>
// 或者：
const VDOM = (
    <h1 id="title">
    	<span>Hello,React!</span>
    </h1> 
)

4. 虚拟DOM与真实DOM

React提供了一些API来创建一种 “特别” 的一般js对象
- const VDOM = React.createElement('xx',{id:'xx'},'xx')
- 上面创建的就是一个简单的虚拟DOM对象（本质是Object类型的对象）
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据，react会转换为真实DOM变化而更新界面。

5. 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标签属性或其它
基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
- 定义虚拟DOM时，不要写引号
- 标签中混入JS表达式时要用{}
- 样式的类名指定不要用class，要用className
- 内联样式，要用style={ {key:value}}的形式去写
- 只有一个根标签
- 标签必须闭合
- 标签首字母
  - 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
  - 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
babel.js的作用
- 浏览器不能直接解析JSX代码，需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type="text/babel"，声明需要babel来处理

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

1. 模块

理解：向外提供特定功能的js程序, 一般就是一个js文件。
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率。

2. 组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

3. 模块化

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

4. 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

四、React面向组件编程

1. 函数式组件

<script type="text/babel">
    console.log(this); {
   /* 此处的this是undefined，因为babel编译后开启了严格模式 */}
    // 1. 创建函数式组件
    function MyComponent() {
   
        return <h2>我是用函数定义的组件（适用于 简单组件 的定义）</h2>
    }
    // 2. 渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    {
   /*
    	执行了ReactDOM.render(<MyComponent/>...)之后，发生了什么？
    		1. React解析组件标签，找到了MyComponent组件。
    		2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
    */}
</script>

2. 类式组件

<script type="text/babel">
    console.log('render中的this:', this); {
   /* this就是MyComponent的实例对象（MyComponent组件实例对象）*/}
    // 1. 创建类式组件
    class MyComponent extends React.Component {
   
        // render是放在类（MyComponent）的原型对象上，供实例使用
        render() {
   
            return <h2>我是用类定义的组件（适用于 复杂组件 的定义）</h2>
        }
    }
    // 2. 渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    {
   /*
    	执行了ReactDOM.render(<MyComponent/>...)之后，发生了什么？
    		1. React解析组件标签，找到了MyComponent组件
    		2. 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
    		3. 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中
    */}
</script>

3. 注意

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

4. 渲染类组件标签的基本流程

React内部会创建组件实例对象
调用render()得到虚拟DOM, 并解析为真实DOM
插入到指定的页面元素内部

五、组件三大核心属性

1. state

理解

state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)
组件被称为"状态机"，通过更新组件的state来更新对应的页面显示(重新渲染组件)

// 开发中一般不用这种写法
<script type="text/babel">
    // 1. 创建类式组件
    class Weather extends React.Component {
     
        // 构造器调1次
        constructor(props) {
     
            super