React (三) 创建安装脚手架，类组件与函数式组件；生命周期；父子通信props；插槽；非父子通信Context

一、脚手架的创建与安装

1. 认识脚手架

  每个项目的基本工程化结构是相似的；既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生成基本的工程化模板；
   脚手架(scaffold)就是一种工具，帮我们可以快速生成一个通用的项目目录结构，并将所需的工程环境配置好。让项目从搭建到开发，再到部署，整个流程变得快速和便捷；

2. 安装脚手架

React的脚手架：create-react-app, 简称cra
（1）提前安装node环境.（这个可参考之前安装Vue的记录配置node环境）
（2）执行命令安装脚手架：npm install create-react-app -g;
  运行create-react-app --version查看安装的版本，显示版本就说明脚手架安装成功。

（执行命令在powershell里也可以，在git bash里也可以）

3. 创建react项目

在对应的文件夹下执行命令create-react-app 项目名，创建项目。
注意：项目名称不能包含大写字母

运行项目:npm run start

4. 项目结构

|--public
|    |-- favucin.ico     // 标签页的icon图标
|    |-- index.html      // 入口文件
|    |-- logo192.png     // 在manifest.json文件里被调用
|    |-- logo512.png     // 在manifest.json文件里被调用
|    |-- manifest.json  // 和web app配置相关
|    |-- robots.txt     //指定本网站哪些文件可以或者无法被爬取
|--src
|    |-- App.css     // App组件相关的样式
|    |-- App.js      // App组件的代码文件
|    |-- App.test.js // App组件的测试代码文件
|    |-- index.css   // 全局的样式文件
|    |-- index.js    // 整个应用程序的入口文件
|    |-- logo.svg    // 启动项目时的react图标
|    |-- reportWebVitals.js  //
|    |-- setupTest.js    //测试初始化文件
|-- package.json        // 对整个应用程序的描述：应用名称、版本号、一些依赖包

logo192.png, logo512.png,manifest.json文件都与PWA相关，PWA(国内应用较少)了解即可。

二、从0编写

将src下的文件都删掉，运行项目，提示缺少index.js文件，新建src/index.js：

import React from "react"
import ReactDOM from "react-dom/client" // 旧版是从react里导入ReactDOM

class App extends React.Component {
   
  constructor() {
   
    super()
    this.state = {
   
      msg: 'HelloWorld'
    }
  }
  render () {
   
    const {
    msg } = this.state
    return (
      <h2>{
   msg}</h2>
    )
  }
}
// 这里的#root是index.html文件里的
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<App />)

与之前写的一样，都是创建类组件，然后渲染到桌面上。
可将App组件拆分到App.jsx文件里：

三、组件化开发

1. 什么是组件化开发

  组件化就是分而治之；如果一个页面里的所有功能和逻辑处理都放在一起，就会很难维护。如果将一个页面拆分为一个个小的功能块，有利于之后页面的管理和扩展。

用组件化的思想来构建应用：

• 一个完整的页面可以分为很多组件；
• 每个组件都用于实现页面的一个功能块
• 每个组件都可以继续细分，组件本身又可以进行复用

最终，任何的应用都会被抽象成一棵组件树

2. 类组件

定义类组件的要求：

• 组件的名称是大写字符开头(无论类组件还是函数组件)
• 类组件需要继承React.Component(后边优化时，可继承Pure)
• 类组件必须实现render函数

使用class定义一个类组件：

import React from "react";  // 导入的React是个对象，里面有React.Component属性
class App extends React.Component {
   
  // constructor是可选的，通常在构造函数里初始化一些数据
  constructor() {
   
    super()
    // 维护的是组件内部的数据
    this.state = {
   
      msg: 'Hello World'
    }
  }
  // 组件内必须要实现的方法
  render () {
   
    return <h2>{
   this.state.msg}</h2>
  }
}

也可以这样继承: 反正继承的都是Component

import {
    Component } from "react";
class App extends Component {
   
  render () {
   
    return <h2>Hello</h2>
  }