React基础入门

星霜下逆天生

已于 2023-11-27 21:45:30 修改

阅读量6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： react.js vscode

于 2021-09-24 11:57:36 首次发布

本文链接：https://blog.youkuaiyun.com/donglize521521/article/details/108536152

本教程涵盖React基础知识与进阶内容，包括核心JSX语法、组件化开发、React生命周期、Redux状态管理、React Router路由配置及Hooks使用等。通过丰富的实例与讲解，帮助读者深入理解React并提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.基础知识

邂逅React开发

React系列(一) -邂逅React开发

React系列一 - 核心JSX语法一

点击博客
 官方网站
React内容整体比较多，比较接近原生，使用起来更加灵活。相比于Vue，更接近模板，使用起来比较简单，很多东西不用考虑。就和手动挡汽车和自动档车子有点像。

二. 创建React组件
2.1. 创建类组件
类组件的定义有如下要求：

组件的名称是大写字母开头的（无论类组件还是函数组件）
类组件需要继承自 React.Component
类组件必须实现render函数
【注意】
标签HTML标签是不区分大小写的
在JSX中是严格区别大小写的（）
小写指的就是普通HTML标签元素，大写开头就是组件，如果你把标签名字写成大写，它就会把这个标签当成组件，而你没有定义这个组件，也没有导入这个组件，它就会报如下错误。

快速开发react的两个方式
vscode中一键生成react代码块以及快速补全react代码
 vscode中一键生成react代码块以及快速补全react代码2

在VScode中定义代码块(把类组件和函数组件定义方式定义成代码块)
下载插件，该插件帮助我们定义了特别多的React代码块，包括一些东西的导入，Redux/React Hooks/React Native/PropTypes
具体请自行查看。

①例如类组件生成方式的快捷键是rcc

②函数式组件的生成方式rfc

组件的生命周期代码演示方法调用顺序

(1)挂载阶段

import React, {
   
    Component } from 'react'

export default class App extends Component {
   
   

  constructor(){
   
   
     super();
    
     console.log("执行了组件的constructer方法");
  }

  render() {
   
   
    console.log("执行了组件的Render方法");

    return (
      <div>
        我是App组件
      </div>
    )
  }

  componentDidMount(){
   
   
    console.log("执行了组件的componentDidMount方法");
  }
}

在这里插入图片描述
(2)更新阶段

import React, {
   
    Component } from 'react'

export default class App extends Component {
   
   

  constructor() {
   
   
    super();
    this.state = {
   
   
      counter: 0
    }
    console.log("执行了组件的constructer方法");
  }

  render() {
   
   
    console.log("执行了组件的Render方法");

    return (
      <div>
        我是App组件
        <h2>当前计数：{
   
   this.state.counter}</h2>
        <button onClick={
   
   e => this.increment()}>+1</button>
      </div>
    )
  }
  
  increment(){
   
   
    this.setState({
   
   
      counter:this.state.counter + 1
    })
  }