React脚手架+组件化开发+组件生命周期+组件通信

郭大钰

已于 2023-01-17 11:51:00 修改

阅读量668

点赞数 1

文章标签： react.js javascript 前端

于 2023-01-13 16:18:41 首次发布

本文链接：https://blog.csdn.net/m0_46684624/article/details/128644999

版权

本文介绍了使用React脚手架创建项目，并详细探讨了React的组件化开发、组件生命周期的各个阶段，包括constructor、componentDidMount、componentDidUpdate和componentWillUnmount。此外，还阐述了组件间的通信方式，如props传递、事件回调、跨层级通信以及使用Context API进行状态共享。

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

react脚手架（create-react-app）

1.作用： 帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好
2.依赖环境
脚手架都是使用node编写的，并且都是基于webpack的；
3.安装node
4.安装脚手架

npm install -g create-react-app

5.检查脚手架版本

create-react-app --version

创建项目

create-react-app 项目名称

跑项目

yarn start

目录
在这里插入图片描述

React组件化开发

类组件
定义：

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

使用class定义一个组件：
constructor是可选的，我们通常在constructor中初始化一些数据
this.state中维护的就是我们组件内部的数据
render()方法是class组件中

函数式组件

/**
 * 
 * 函数式组件的特点：
 * 1.没有this对象
 * 2.没有内部的状态
 * 3.没有生命周期
 * 
 */
export default function App(){
   
  return (
    <div>我是function组件</div>
  )
}

类组件

import React, {
    Component } from "react";

export default class App extends Component {
   
  constructor() {
   
    super();

    this.state = {
   
      message: 'hello'
    }
  }
  render () {
   
    return (
      <div>
        <div>app组件</div>
        {
   /* alt+shift+f  代码格式化*/}
        <h2>{
   this.state.message}</h2>
      </div>
    )
  }
}

render函数的返回值

React元素：通常通过JSX创建
数组或fragments
portals：可以渲染子节点到不同的DOM子树中
字符串或数值类型
布尔类型或null:什么都不渲染

生命周期

很多事物从创建到销毁的整个过程，这个过程称之为生命周期。

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

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

componentDidMount
componentDidMount（）会在组件挂在后（插入DOM树中）立即调用
操作：

依赖于DOM的操作可以在这里进行
在此处发送网络请求就最好的地方（官方建议）
可以在此处添加一些订阅（会在componentWillUnmount取消订阅）

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

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

import React, {
    Component } from 'react'

class Cpn extends Component {
   
  render () {
   
    return <h2>我是cpn组件</h2>
  }
  componentWillUnmount () {
   
    console.log('我调用了componentWillUnmount')
  }
}

export default class App extends Component {
   

  constructor() {
   
    super();

    this.state = {
   
      count: 1,
      isShow: true
    }
    console.log('执行了组件的constructor')
  }

  render () {
   
    console.log('执行了组件的render函数')

    return (
      <div>
        我是App组件
        <h2>当前计数：{
   this.state.count}</h2>
        <button onClick={
   e => {
    this.increment() }}>+1</button>
        <hr />
        <button onClick={
   e => {
    this.changeShow() }}>切换</button>
        {
   this.state.isShow && <Cpn />}
      </div>
    )
  }

  increment () {
   
    this.setState({
   
      counter: this.state.counter + 1
    })
  }
  changeShow () {
   
    this.setState(<