React 全讲解

0 React简介

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。React起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React 的生态体系比较庞大，它在web端，移动端，桌面端、服务器端，VR领域都有涉及。React可以说是目前为止最热⻔，生态最完善，应用范围最广的前端框架。可以毫不夸张地说，React已不单纯是一个框架，而是一个行业解决方案。
React特点:

1. 声明式设计：React采用声明范式，可以轻松描述应用。
2. 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活：React可以与已知的库或框架很好地配合。
4. JSX：JSX 是JavaScript语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5. 组件：通过 React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 
6. 单向响应的数据流：React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

VS Code 编辑器安装插件：

1 React 入门

1 起步

创建项目: npx create-react-app my-project-name
打开项目: cd my-project-name
启动项目: npm start
暴露配置项: npm run eject    （webpack）

理解npx create-react-app my-project-name 指令，npx是高版本node所具有的（我的弄的版本18+）

npx是npm的附带产物
执行 npx create-react-app my-app 命令流程如下:

一旦使用npx去执行一段命令,那么npx会首先看第一个参数对应的工具是否被安装
如果没有被安装，npx就会告诉npm临时安装一下，临时安装进内存
当临时安装好了以后，npx会再次直接执行整段命令"create-react-app my-app"
create-react-app是react的官方脚手架

使用create-react-app脚手架创建，webpack进行配置，为了不eject所有的webpack配置，我们选择用react-app-rewired工具来改造webpack配置。

1 安装：

npm install react-app-rewired  

2 修改package.json中的启动脚本

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },

3 在根目录下新增 config-overrides.js 文件并新增如下配置（通过rewired重写webpack配置信息）

// 在根目录下新增config-overrides.js文件并新增如下配置（通过rewired重写webpack配置信息）
const { name } = require("./package");
 
module.exports = {
  webpack: (config) => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = "umd";
    config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;
    return config;
  },
  // 跨域
  devServer: (_) => {
    const config = _;
 
    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };
    config.historyApiFallback = true;
    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;
 
    return config;
  },
};

2 文件结构

README.md--文档（可用于说明项目）
public--存放静态资源（不被编译，原文）
  favicon.ico--网站页面标签图
  index.html--主页面
  logo192.png--logo图
  logo512.png--logo图
  manifest.json--应用加壳的配置文件
  robots.txt--爬虫协议文件
src--具体代码
  assets--存放静态资源（被编译）
  App.css--根组件样式
  App.js--根组件
  App.test.js--用于给App做测试的（一般不用）
  index.css--全局样式
  index.js--入口文件
  reportWebVitals.js--页面性能分析（需要web-vital库的支持）
  setupTests.js--组件单元测试的文件（需要jest-dom库的支持）
package.json--npm 依赖
config--项目的具体配置（可选）
config-overrides.js -- 重写webpack的配置（可选，建议使用）

项目中config文件夹一般是隐藏掉的，如果想要出现可使用 npm run eject ，一旦执行，不可恢复

进入 webpack.config.js（可用config-overrides.js 代替）中，找到 alias 添加以下2行

// webpack.config.js
 
// 文件路径别名
'@': path.resolve(__dirname, '../src'),
'@pages': path.resolve(__dirname, '../src/pages'),

3 React和ReactDom

React元素：是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

// 创建虚拟dom
 
// JSX
const element = <h1>Hello, world!h1>;
 
动态通过 React.createElement() 创建（语法糖：JSX）

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的JS对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。 

render()：渲染虚拟DOM到真实DOM上，render(virtualDOM, containerDOM)，即render(虚拟DOM, 真实DOM)

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
// React 开发的核心模块
import React from 'react';
 
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
// ReactDOM 操作浏览器DOM的模块
import ReactDOM from 'react-dom';
 
// 1.创建虚拟DOM对象
const element = <h1>Hello, world!h1>; // 不是字符串；JSX语法
// 2.将虚拟DOM渲染到真实DOM容器中
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDom.render(
    element,
    document.getElementById('root')
)

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上;

ReactDom.render()接受两个参数，第一个是要被插入的内容（JSX），第二个是插入到DOM或者说index.html的位置

React负责逻辑控制,数据->VDOM，是react的核心库
ReactDom渲染实际Dom,VDOM->DOM

React节点：专门用于渲染到UI界面的对象，React会通过React元素，创建React节点，ReactDOM一定是通过React节点来进行渲染的

节点类型：

        1、React DOM节点：创建该节点的React元素类型是一个字符串

import React from 'react';
import ReactDOM from 'react-dom';
const app = <div><h1>标题h1>div>
ReactDOM.render(app, document.getElementById('root'));

        2、React 组件节点：创建该节点的React元素类型是一个函数或是一个类

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App"
ReactDOM.render(<App />, document.getElementById('root'));

        3、 React 文本节点：由字符串、数字创建的

import React from 'react';
import ReactDOM from 'react-dom';
const app = 'Hello World'
ReactDOM.render(app, document.getElementById('root'));

React可以使用jsx来描述ui

babel解析JSX原理

babel会监听全局的document.contentLoad，具体流程如下：

1. 当前页面的所有的script标签全部生成完毕，babel会通过document.getElementByTagName，拿到所有的script标签
2. 分别通过getAttributes函数,读取script上面的属性
3. 如果type=“text/babel”,就把里面的代码全部拿过来，通过tansform方法转换一遍，通过新建一个script标签，将转换后的代码插入script中，将script插入到head标签
4. 如果不写type,type默认位text/Javascript，此时以Javascript的形式解析
5. 如果以上两种都不是，浏览器不会看script里面的代码

Babel 会把 JSX 在构建时调用 React.createElement() 函数创建VDOM。

2 JSX

JSX是一种javascript的语法扩展，其语言比较像模板语言，但实际上完全是javaScript内部实现的，jsx可以很好的描述UI，能够有效地提高开发效率。

JSX ：看起来像HTML的 Javascript 一种拓展语法，能够让你的 Javascript 中和正常描述 HTML一样编写 HTML。

使用 JSX 语法可读性更强，书写更方便

JSX语法中，使用 {} 代替 ""

在 JSX 中通过 { js语法 } 大括号使用 JavaScript

Babel 会把 JSX 在构建时调用 React.createElement() 函数创建VDOM。以下两个写法完全等价。

createElement()：createElement(标签名, { 属性: 属性名 }, 内容) 

import React from 'react';
import ReactDOM from 'react-dom';
 
// 看下面的DOM结构
const element = (
    <h1 className="greeting">
        Hello, world!
    h1>
);
 
// 上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来生成：
const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);
 
ReactDOM.render(element, document.getElementById('root'));

所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程: 

JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面 

/*
    jsx语法规则：
        1.定义虚拟DOM时，不能写引号
        2.标签中混入JS表达式时要用 {}
        3.样式的类名指定不要用 class，要用 className
        4.内联样式，要用 style={{ key:value,color: '#999', fontSize: '30px' }} 的形式去写，大驼峰
        5.只有一个根标签
        6.标签必须闭合
        7.标签首字母
            1）若小写字母开头，则将该标签为html中同名元素，若html中无该标签对应的同名元素，则报错
            2）若大写字母开头，react就去渲染对应的组件，若组件未定义，则报错。
        8.注释： {/*  this.input1 = c} /> */}
        9.自定义属性，不需要驼峰 data- 前缀 
"自定义属性">
        10.JSX中默认对数组进行 join() 操作
 
    React中使用：
        1.只能返回一个根元素。如果你不想在标签中增加一个额外的 
，可以用 <> 和  元素来代替
            这个空标签被称作 Fragment。React Fragment 允许你将子元素分组，而不会在 HTML 结构中添加额外节点。
            需要加key，就需要使用 Fragment
            import { Fragment } from 'react'
            <Fragment key={ }> ... Fragment>
        
*/

转换器

1 基本使用

JSX变量渲染：

<div>{msg}div>
<div>{props.msg}div>
<div>{this.props.msg}div>
<div>{this.state.msg}div>

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
 
//基本使用
const name = "react"
const jsx = <div>hello,{name}div>
ReactDOM.render(
  jsx,
  document.getElementById('root')
);

2 函数（有返回值）

函数也是合法的表达式

import React from 'react';
import ReactDOM from 'react-dom';
 
const user = {
  firstName:"Harry",
  lastName:"Potter"
}
 
//函数
function formatName(obj){
  return obj.firstName+" "+ obj.lastName
}
 
const jsx = <div>{formatName(user)}div>
 
ReactDOM.render(
  jsx,
  document.getElementById('root')
);

3 对象

jsx也是js对象,也是合法表达式

import React from 'react';
import ReactDOM from 'react-dom';
 
const greet = <div>gooddiv>
const jsx = <div>{greet}div>
 
ReactDOM.render(
  jsx,
  document.getElementById('root')
);

4 条件语句

import React from 'react';
import ReactDOM from 'react-dom';
 
//条件语句
const show = true; //false;
const greet = <div>gooddiv>;
const jsx = (
  <div>
    {
      show ? greet : "登录"
    }
    {show && greet}
  div>
)
ReactDOM.render(
  jsx,
  document.getElementById('root')
);

5 数组/列表渲染（选用有返回值的API）

JSX中默认对数组进行 join() 操作

数组作为一组子元素对待，数组中存放一组jsx用于显示列表数据

import React from 'react';
import ReactDOM from 'react-dom';
 
//数组
const list = [0,1,2]
//方式二
const listItems = list.map((item,index)=> <li key={index}>{item}li>);
const jsx = (
  <div>
    <ul>
      {
        // diff时候，首先比较type,然后是key，所以同级同类型元素,key值必须唯一
        list .map(item=>(
          <li key={item}>{item}li>
        ))
      }
      {listItems }
    ul>
  div>
)
ReactDOM.render(
  jsx,
  document.getElementById('root')
);

6 属性的使用

属性:静态值用双引号,动态值用花括号,class、for要特殊处理
注意:class是保留字，如果要增加class，需要使用className

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg'
import './index.css'; // 导入样式，webpack推荐
 
// src 动态属性
// style 行内样式
// className 外部样式表css类
const jsx = (
  <div>
    // React 推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体
    <img src={logo} style={{width:"100px"}} className="img"/>
  div>
)
 
ReactDOM.render(
  jsx,
  document.getElementById('root')
);

classnames 插件：

使用js变量--Object,简化我们写动态多class类名的开发

npm install classnames 

import classNames from "classnames";
 
  const myClass = classNames({
    box1:true,
    box2:true,
  })
 
 
    

7 模块化

css模块化,创建index.css

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg'
import './index.css'
 
const jsx = (
  <div className = {styles.app}>
    <img 
      src = {logo} 
      className = "logo" 
      style={{width:"50px",height:"30px"}} 
      alt="这个一个图片"
    />
  div>
)
 
ReactDOM.render(
  jsx,
  document.getElementById('root')
);

或者npm install sass -D

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg'
import styles from './index.module.scss'
 
const jsx = (
  <div className = {styles.app}>
    <img 
       src = {logo} 
      className={styles.logo} 
      style={{width:"50px",height:"30px"}} 
      alt="这个一个图片"
    />
  div>
)
 
ReactDOM.render(
  jsx,
  document.getElementById('root')
);

3 基础组件

组件,从概念上类似javaScript函数，它可以接受任何形式的入参(props),并返回用于描述页面展示内容的React元素,组件有两种形式:类组件（class组件）和函数组件（function 组件）

1 class组件（有状态）

class组件（有状态组件）通常拥有状态和生命周期。（16.8以后很少使用，比较推崇无状态组件）

React类组件中使用this主要是为了访问组件的实例属性和方法。‌‌

在React类组件中，‌this关键字用于访问组件的实例，‌包括组件的状态（‌state）‌和属性（‌props）‌。‌当在组件的方法中使用this时，‌它指向组件的实例，‌这使得可以在方法中访问和修改组件的状态。‌如果在类组件的方法中不使用this，‌而是直接调用方法或函数，‌那么这些方法将无法访问到组件的内部状态，‌从而导致错误。‌

React提供了几种方式来确保this正确指向组件实例：‌

1. ‌使用箭头函数‌：‌在React类组件中，‌可以使用箭头函数来定义事件处理程序，‌这样this就会被自动绑定到组件实例上。‌这是因为箭头函数可以捕获其所在上下文中的this值。‌

2. ‌使用公共类字段语法‌：‌另一种方法是使用ES6的公共类字段语法来定义方法，‌这样在方法内部使用this时，‌它会自动指向组件实例。‌

this.state 是纯js对象,在vue中，data属性是利用Object.defineProperty 处理过的，更改 data的数据的时候会触发数据的getter 和setter ，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setState 。 

setState 是异步的

import React,{Component} from "react"
//React.createRef()创建一个ref对象，并将其分配给组件的某个实例属性。然后，你可以在组件的渲染方法中通过将ref属性添加到你想要获取DOM的元素上来引用DOM元素。
 
export default class ClassComponent extends Component{
  constructor(props){
    super(props); // 调用父类构造函数
    // 创建一个ref对象
    this.myDivRef = React.createRef();
 
    //使用state属性维护状态,在构造函数中初始化状态
    this.state = {
      date:new Date(),
      data: null, // 初始化数据为null
      isLoading: false, // 初始化加载状态为false
      error: null, // 初始化错误信息为null
    }
  }
 
  fetchData = () => {
    this.setState({ isLoading: true, error: null });
    axios.get('https://api.example.com/data')
      .then(response => {
        this.setState({ data: response.data, isLoading: false });
      })
      .catch(error => {
        this.setState({ error: error.message, isLoading: false });
      });
  };
 
  componentDidMount(){
    // 获取异步请求
    this.fetchData();
    //组件挂载之后启动定时器每秒更新状态
    this.timerID = setInterval(()=>{
      //使用setState方法更新状态
      this.setState({
        date:new Date()
      })
    },1000)
  }
  componentWillUnmount(){
    //组件卸载前停止定时器
    clearInterval(this.timerID)
  }
  // 组件更新
  componentDidUpdate(){
    console.log("compoentDidUpdate");
  }
  render(){
    // 业务逻辑
    
    // 接收父组件传递过来的参数
    const someProp={someValue}
    const { data, isLoading, error } = this.state;
 
    return (
      // 通过将ref属性添加到DOM元素上，将其与创建的ref对象关联
      <div ref={this.myDivRef}>
        {this.state.date.toLocaleTimeString()}
      div>
    )
  }
}
 

// 上述代码可简写为
import React,{Component} from "react"
 
/**
 * Class 组件
 *
 * Class 组件是 ES6 语法，所以必须使用 class 关键字来定义
 * Class 组件必须继承 Component 组件
 * Class 组件必须实现 render 方法
 * Class 组件必须使用 render 方法返回一个 React 元素
 * Class 组件必须使用 export default 关键字导出
 * Class 组件必须使用export 关键字导出
 */
export default class ClassComponent extends Component{
  // 状态
  state = {
    date:new Date()
  }
  componentDidMount(){
    //组件挂载之后启动定时器每秒更新状态
    this.timerID = setInterval(()=>{
      //使用setState方法更新状态
      this.setState({
        date:new Date()
      })
    },1000)
  }
  componentWillUnmount(){
    //组件卸载前停止定时器
    clearInterval(this.timerID)
  }
  componentDidUpdate(){
    console.log("compoentDidUpdate");
  }
  render(){
    // 接收父组件传递过来的参数
    const someProp={someValue}
    return (
      <div>
        {this.state.date.toLocaleTimeString()}
      div>
    )
  }
}
 
// 父组件，也可传递事件
<ChildComponent someProp={someValue} />

富文本渲染 dangerouslySetInnerHTML

对于富文本创建的内容，后台拿到的数据是这样的： 

content = "

React.js是一个构建UI的库

"

处于安全的原因，React当中所有表达式的内容会被转义，如果直接输入，标签会被当成文本。这时候就需要使用dangerouslySetHTML 属性，它允许我们动态设置innerHTML 

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
  constructor() {
    super()
    this.state = {
      content: "
React.js是一个构建UI的库
"
    }
  }
  render() {
    return (
      <div
        // 注意这里是两个下下划线 __html
        dangerouslySetInnerHTML={{ __html: this.state.content }}
      />
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
)

1.1 组件的组合、嵌套  

将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖

组件嵌套的方式就是将子组件写入到父组件的模板中去，且react没有Vue中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系

// 从 react 的包当中引入了 React 和 React.js 的组件父类 Component
// 还引入了一个React.js里的一种特殊的组件 Fragment
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
 
class Title extends Component {
  render () {
    return (
      <h1>欢迎进入React的世界h1>
  	)
  }
}
class Content extends Component {
  render () {
    return (
      <p>React.js是一个构建UI的库p>
  	)
  }
}
/** 由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom
class App extends Component {
  render () {
    return (