React（三）：脚手架、组件化、生命周期、父子组件通信、插槽、Context-CSDN博客

本文链接：https://blog.csdn.net/qq_51234063/article/details/149974776

React（三）

一、脚手架安装和创建

首先安装node，建议使用nvm管理node版本。使用nvm管理node

1. 安装脚手架

在git bash中输入： npm install create-react-app -g，然后输入create-react-app --version，如果能正常显示版本号，那么安装就成功了。

2. 创建脚手架

目录下右键 => git bash => create-react-app 项目名 => 回车等几分钟就欧了。
注意项目名不能包含大写字母。

3. 看看脚手架目录

在这里插入图片描述

4. 运行脚手架

脚手架目录下 => npm run start，然后就可以看到非常帅气的大花。

二、脚手架下从0开始写代码

没啥用的先删了，我们自己搭建src中的文件：
在这里插入图片描述
好，那么接下来我们重新写一下src里面的文件：

index.js
//重写react代码，并且通过react渲染出来对应的内容
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App/>);

App.jsx
import React from 'react';
import HelloReact from './Components/HelloReact';

class App extends React.Component {
   
   
    constructor() {
   
   
        super();
        this.state = {
   
   
            name:'zzy'
        }
    }

    render() {
   
   
        return (
            <div>
                <h2>奥里给</h2>
                <button>按钮</button>
                <HelloReact/>
            </div>
        )
    }
}

export default App;

HelloReact.jsx
import React from 'react';

class HelloReact extends React.Component {
   
   
    constructor() {
   
   
        super();
        this.state = {
   
   
            name: 'react'
        }
    }

    render() {
   
   
        return (
            <div>
                <h2>Hello React!</h2>
            </div>
        )
    }
}

export default HelloReact

三、组件化

1. 类组件

类组件的定义有如下要求：

组件的名称是大写字符开头（无论类组件还是函数组件）
类组件需要继承自 React.Component
类组件必须实现render函数

使用class定义一个组件：

constructor是可选的，我们通常在constructor中初始化一些数据；
this.state中维护的就是我们组件内部的数据；
render()方法是 class 组件中唯一必须实现的方法；

class App extends React.Component {
   
   
    constructor() {
   
   
        super();
        this.state = {
   
   
            name:'zzy'
        }
    }

    render() {
   
   
        return [
            <div>
                <h2>奥里给</h2>
                <button>按钮</button>
                <HelloReact/>
            </div>,
            <div></div>
        ]
    }
}

render函数的返回值可以是什么？

React 元素：通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent />会被 React 渲染为自定义组件，无论是<div />还是<MyComponent />均为 React 元素（通过creatElement创建出来的东西）。
数组或 fragments：使得 render 方法可以返回多个元素。
Portals：可以渲染子节点到不同的 DOM 子树中。
字符串或数值类型：它们在 DOM 中会被渲染为文本节点。
布尔类型或 null：什么都不渲染。

2. 函数组件

函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容。
函数组件有自己的特点（当然，后面我们会讲hooks，就不一样了）：

没有生命周期，也会被更新并挂载，但是没有生命周期函数；
没有this(组件实例）；
没有内部状态（state）；

我们来定义一个函数组件:

//函数式组件
function App() {
   
   
    //返回的东西和render返回的是一样的。
    return <h1>我是一个函数组件</h1>
}

export default App;

四、React的生命周期

1. 认识生命周期

生命周期的概念和vue中是一样的，只不过在React中钩子更少一些。

React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

比如实现componentDidMount函数：组件已经挂载到DOM上时，就会回调；
比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调；
比如实现componentWillUnmount函数：组件即将被移除时，就会回调；

我们可以在这些回调函数中编写自己的逻辑代码，来完成自己的需求功能；
我们谈React生命周期时，主要谈的类的生命周期，因为函数式组件是没有生命周期函数的；（后面我们可以通过hooks来模拟一些生命周期的回调）

2. 图解生命周期

在这里插入图片描述
分别对应挂载、更新和卸载。

（1）Constructor

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
constructor中通常只做两件事情：

通过给 this.state 赋值对象来初始化内部的state；
为事件绑定实例（this）；

（2）componentDidMount

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
componentDidMount中通常进行哪里操作呢？
依赖于DOM的操作可以在这里进行；
在此处发送网络请求就最好的地方；（官方建议）
可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；

（3）componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。
当组件更新后，可以在此处对 DOM 进行操作；
如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。

（4）componentWillUnmount

componentWillUnmount() 会在组件卸载及销毁之前直接调用。
在此方法中执行必要的清理操作；
例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；

3. 演示生命周期

我们创建类组件App，并将HelloReact组件作为它的子组件：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>

  <body>
    <div id="root"></div>
    <script type="text/babel">

      class App extends React.Component {
   
   
        constructor() {
   
   
          console.log('APP-constructor')
          super();
          this.state = {
   
   
            name: 'zzy'
          }
        }

        changeData() {
   
   
          this.setState({
   
   
            name: 'ht'
          })
        }

        render() {
   
   
          console.log('App-render');
          const {
   
    name } = this.state;
          return (