React基础学习(看心情学习更新)

逃离我推掉我的手 2023-07-07 08:20 22阅读 0赞

#### 几个基本概念介绍 ####

> Library（库）:小而巧的库，只提供了特定的API；优点就是船小好调头，可以很方便的从一个库切换到另一个库；但是代码基本上不需要改变。  
> Framework（框架）:大而全的是框架；框架提供了一整套的解决方案；所以，如果在项目中间，想切换到另外的框架是比较困难的。

#### 前端三大主流框架 ####

> Angular.js:出来较早的前端框架，学习曲线比较陡，NG1学起来麻烦，NG2~NG5开始，进行一系列的改革，也提供了组件化开发的概念；从NG2开始，也支持使用TS（TypeScript）进行编程。  
> Vue.js:最火（关注的人比较多）的一门前端框架，它是中国人开发的，对我们来说，文档要比较友好。  
> React.js:最流行（用的人比较多）的一门编程，因为它的设计很优秀。

#### React与Vue的对比 ####

##### 组件化方面 #####

> 1.什么是模块化:是从代码的角度来进行分析的，把一些可复用的代码，单独抽离出来一个模块；便于项目的维护与开发。  
> 2.什么是组件化:是从UI界面的角度来进行分析的，把一些可复用的UI元素，单独抽离出来一个组件；便于项目的维护与开发。  
> 3.组件化的好处:随着项目规模增大，手里的组件越来越多；很方便就能把现有的组件，拼接为一个完整的页面。  
> 4.Vue是如何实现组件化的:通过’.vue’文件，来创建对应的组件。template:结构、script:行为、style:样式。  
> 5.React是如何实现组件化的:React中一切都是以Js来表现的；

#### React中几个核心的概念 ####

##### 虚拟DOM（Virtual Document Object Model） #####

> DOM的本质是什么:浏览器中的概念，用JS对象来表示页面的元素，并提供了操作DOM对象的API；  
> 什么是React中的虚拟DOM:是框架中的概念，是程序员对JS对象来模拟页面上的DOM和DOM嵌套；  
> 为什么要实现虚拟DOM（虚拟DOM的目的）:为了实现页面中，DOM元素的高级更新。  
> DOM和虚拟DOM的区别:DOM（浏览器中，提供的概念；用Js对象，表示页面上的元素，并提供了操作元素的API）；虚拟DOM（是框架中的概念；而是开发框架的程序员，手动用Js对象来模拟DOM元素和嵌套关系）。

#### 模块与组件和模块化与组件化的理解 ####

##### 模块 #####

> 理解：向外提供特定功能的js程序，一般就是一个js文件。  
> 为什么：js代码更多复杂。  
> 作用：复用js，简化js的编写，提高js的运行效率。

##### 组件 #####

> 理解：用来实现特定（局部）功能效果的代码集合（html/css/js）。  
> 为什么：一个界面的功能更复杂。  
> 作用：复用编码，简化项目编码，提高运行效率。

##### 模块化 #####

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

#### 组件三大属性 ####

##### state #####

##### props #####

> 为组件指定默认值XXXX.defaultProps=\{\}。  
> 对props中的属性值进行类型限制和必要性限制，XXXX.propTypes=\{x1:React.propTypes.string.isRequired, x2:React.propTypes.number.isRequired\}

##### ref #####

> ref类似html里面给元素指定id的意思，在React中使用ref，老版本React指定ref可以直接命名属性名为字符串如ref=‘test’，新版建议使用如下方式ref=\{input => this.input = input\}。

#### 组件组合 ####

##### 功能界面的组件化编码流程（无比重要） #####

> 1.拆分组件:拆分界面，抽取组件。  
> 2.实现静态组件，使用组件实现静态页面效果。  
> 3.实现动态组件:动态显示初始化数据、交互能力(从绑定事件监听开始)。

#### 脚手架零零散散总结经验篇 ####

##### 子组件对父组件接收过来的值进行类型识别 #####

import React from 'react';
    import PropTypes from 'prop-types';
    export default class test extends React.Component {
        
        // 给组件类指定属性
        static propTypes = {
        
            comments = PropTypes.array.isRequired
        }
    }

##### 数组添加删除替换 #####

import React from 'react';
    import PropTypes from 'prop-types';
    export default class test extends React.Component {
        
        state = {
        
            comments: [
                {
        
                    username: 'xipiker',
                    content: 'test1'
                },
                {
        
                    username: 'xipiker',
                    content: 'test2'
                }
            ]
        }
        // 添加
        addComment = (comment) => {
        
            const {
        comments} = this.state;
            comments.unshift(comments);
            // 更新状态
            this.setState({
        
                comments
            });
        }
        // 删除
        addComment = (index) => {
        
            const {
        comments} = this.state;
            // 1删除 0替换
            comments.splice(index, 1);
            // 更新状态
            this.setState({
        
                comments
            });
        }
    }