react 基础入门

已于 2023-05-19 23:20:21 修改
阅读量75 收藏
点赞数
文章标签： react.js javascript 前端
于 2023-05-18 18:52:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56708967/article/details/130750519
版权

目录

安装

React&ReactDOM

index.js

App.js

JSX

元素渲染

修改状态state

数组解构遍历

React.createRef()创建ref对象 

父子组件通信

生命周期

挂载

更新

卸载

安装

  • npm i -g create-react-app 安装官方脚手架
  • create-react-app 01_react 初始化

React&ReactDOM

React只做逻辑层,reactDOM去渲染真实的DOM 

将项目中src下目录的文件全部删除新增index.js，App.js

index.js

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

App.js

import React from "react";
class App extends React.Component{
    render(){
        return(
            <div>react学习</div>
        )
    }
}
export default App;

JSX

在JavaScript中直接写的标签,是一个JSX(JS+XML,由于HTML也是XML的一种,可以认为JS+HTML)元素,也是一个react元素,这个元素实际是一个对象,就是虚拟DOM元素

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合.比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

元素渲染

元素是构成React应用的最小砖块,比如:

const ele = <h1>hello,world</h1>

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致

修改状态state

import React from 'react'
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      // 声明响应式的数据
      count: 0,
    }
  }
add() {
    // console.log(this.state.count)
    // 修改state必须通过setState来进行修改
    // setState它是个异步函数
    // this.setState({
    //   count: this.state.count + 1,
    // })
    // console.log(this.state.count)
    // 函数的写法
    this.setState(
      (prevState, prevProps) => ({
        count: prevState.count + 1,
      }),
      () => {
        console.log(this.state.count)
      }
    )
  }
   render() {
    return (
       //class要写成className,style使用{{}}包裹
      <div className="container" style={{ color: 'red', marginTop: 20 }}>
        <h2>hello jsx</h2>
        <h2>
          {name}- {1 + 1}
        </h2>
        <hr />
        <h3> 当前的值:{this.state.count}</h3>
        <button onClick={() => this.add()}>+1</button>
      </div>
    )
  }
}
export default App;

除了constructor之外的其它地方,如果需要修改状态,都只能通过this.setState方法

如果下一个状态依赖于上一个状态，需要写成函数的方式

修改state的唯一方式是setState（）

  • setState（）是异步
  • 函数式的setState（（prevState，prevProps）=>({}),()=>{}）

这个方法setState传入的第一个参数,可以是一个对象,也可以是一个函数

  • 是一个对象，这个对象中包含需要改变的属性，它会与原有的状态进行合并
  • 是一个函数，接收第一个参数是 prevState，上一个状态对象，第二个参数是 props

这个方法的第二个参数，是一个回调函数，在状态改变之后执行。

数组解构遍历

数组解构遍历要是数组的map方法，注意key的使用

import React from 'react'
const arr = [1, 2, 3]
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }
  add() {
    this.setState(
      (prevState, prevProps) => ({
        count: prevState.count + 1,
      }),
      () => {
        console.log(this.state.count)
      }
    )
  }
  render() {
    return (
      <div className="container" style={{ color: 'red', marginTop: 20 }}>
        //通过map()方法遍历，因为有返回值
        <ul>
          {arr.length>0 && arr.map((item)=>{
            <li key={item} id={item}>
                {item}
            </li>})
           }
        </ul>
      </div>
    )
  }
}
export default App

React.createRef()创建ref对象 

在React中,类似于Vue,可以通过ref标记元素,然后通过this.refs获取元素,只是Vue中使用的是this.$refs获取元素

Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

import logo from './logo.svg'
//使用React.createRef()创建ref
class App extends React.Component {
  constructor(props) {
    super(props)
    this.imgDomRef = React.createRef()
  }
  render() {
    return (
      <div className="container" style={{ color: 'red', marginTop: 20 }}>
  
         <img src={logo} alt="" ref={imgDomRef } />
        
      </div>
    )
  }
}
export default App

 使用回调函数方式

import logo from './logo.svg'
//使用回调函数创建ref
class App extends React.Component {
  constructor(props) {
    super(props)
    this.imgDom = null
    this.setImgDomRef = element=>{
      this.imgDom = element
    }
  }
  render() {
    return (
      <div className="container" style={{ color: 'red', marginTop: 20 }}>
  
        <img src={logo} alt="" ref={this.setImgDomRef} />
        
      </div>
    )
  }
}
export default App

父子组件通信

组件创建方式：函数式组件（只有props,展示），class类组件（state，props）
App.js

原生的js事件，注意以下this指向（箭头函数）

import React from 'react'
import Child from './Child'
class App extends React.Component {
  constructor(props) {
    super(props)
  }
  onHandleClick(val) {
    console.log(val)
  }
  render() {
    return (
      <div>
        //子组件使用 开头大写，否则会被视为标签。
        <Child
          name="kiki"
          onHandleClick={(val) => this.onHandleClick(val)}
        ></Child>
      </div>
    )
  }
}
export default App

Child.js

使用this.props来接收父组件传过来的属性值

import React, {Component} from 'react'
export default class Child extends Component{
    constructor(props){
        super(props)
    }
    handleClick(){
        // console.log(this.props)
        this.props.onHandleClick('kiki')
    }
    render(){
        return (
            <>
                <h3>{this.props.name}</h3>
                <button onClick={()=> this.handleClick()}>触发</button>
            </>
        )
    }
}

生命周期

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

注意:

下述生命周期方法即将过时，在新代码中应该避免使用它们：

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

注意:

下述方法即将过时，在新代码中应该避免使用它们：

卸载

当组件从 DOM 中移除时会调用如下方法：

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class SubChild extends Component {
  shouldComponentUpdate(nextProps, nextState) {
      if(nextProps.count > 1000){
          return false
      }
    return true
  }
  render() {
    console.log('子组件渲染了')
    return <div>子组件的值:{this.props.count}</div>
  }
}

class NewLifeCycle extends Component {
  constructor(props) {
    super(props)
    console.log('1.初始化组件')
    this.state = {
      count: props.count,
      isUpdate: false,
    }
  }
  //   此方法是静态方法,不能访问this,替代componentWillReceiveProps
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('2.组件接受属性和状态', nextProps, prevState)
    const { isUpdate } = nextProps
    if (isUpdate !== prevState.isUpdate) {
      return {
        count: prevState.count,
      }
    }
    // 否则 对于state不进行任何操作
    return null
  }

  //   componentWillMount() {}

  componentDidMount() {
    console.log('3.组件已经挂载')
  }

  //   componentWillReceiveProps(nextProps) {}

  shouldComponentUpdate(nextProps, nextState) {
    return true
  }

  //   componentWillUpdate(nextProps, nextState) {}
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('更新之前被调用', prevState)
    return null
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('组件更新完成')
  }

  componentWillUnmount() {
    //   清空定时器
    console.log('组件将要卸载')
  }
  updateCount() {
    this.setState((prevState) => {
      return {
        count: prevState.count + 100,
        isUpdate: true
      }
    })
  }

  render() {
    console.log('组件渲染')
    return (
      <div>
        测试生命周期钩子 {this.state.count}
        <button onClick={() => this.updateCount()}>更新</button>
        <SubChild count={this.state.count}></SubChild>
      </div>
    )
  }
}

NewLifeCycle.propTypes = {}

export default NewLifeCycle

运行 

 

 

KIKI哟
关注
React 基础入门--脚手架
react_spy的博客
08-16 467
1、脚手架是什么前端脚手架，简单来说就是指通过选择几个选项快速搭建项目基础代码的工具。前端脚手架可以有效避免我们 Ctrl + C 和 Ctrl + V 相同的代码框架和基础配置。2、脚手架作用可以帮助我们快速生成项目的基础代码脚手架工具的项目模板经过了开发者的提炼和检验，一定程度上代表了某类项目的最佳实践脚手架工具支持使用自定义模板，我们可以根据不同的项目进行“定制”3、React 常用脚手架Create React App 官方脚手架Umijs 蚂蚁金服脚手架Icejs 阿里巴巴脚手架4、安装脚手
模拟 React 03 组件更新、ref、key、删除节点
皮蛋很白的博客
02-18 1158
组件更新 示例 function Heart(props) { return <div>{props.title}&hearts;</div> } class Alert extends TinyReact.Component { constructor(props) { super(props) this.state = { title: 'Default Title' } this.handleClick = this
react基础入门
妍思码匠的博客
01-12 1238
从以上概念可知，react组件就是一部分的js逻辑，封装的独立的可复用的代码片段，这样每个片段都可以进行独立的管理，很好的实现了代码的复用。react的核心是封装一个个大大小小的组件（小到一个按钮，大到一个页面）来构建复杂的UI界面，每个组件都是UI的一部分。函数式组件其实就是官网的标准案例，定义一个函数，接受任意的props参数，函数中返回jsx语法的页面UI内容。class组件不同于函数组件的是，class组件会创建对应的实例，因此。，该函数的返回值是JSX语法编写的React元素。
React基础入门
donglize521521的博客
09-24 3833
React系列二 - 核心JSX语法一 React系列二 - 核心JSX语法二 React系列三 - 阶段案例练习
React基础入门项目实战
Da_Zhuang的博客
04-05 3118
今天参加了一整天reactjs的培训，看邮件说该课程价值100美元，该课程覆盖了react的大部分基础内容，确实很不错。听说外企中使用reactjs较多，国内使用vue较多，想在外企工作的同学有必要了解该框架。写该博文主要是梳理React的基础知识点，可以对ReactJS的基础知识有大体了解。
React基础入门知识铺垫
qq_72760247的博客
11-26 527
React基础入门知识铺垫
React 入门学习
m0_62118859的博客
04-21 9347
目录 1. React 介绍 2. React 特点 （1）声明式 （2）组件化 （3）一次学习，跨平台编写 3. React 脚手架 方式 1 方式 2 4. React 基本使用 5. React 创建元素练习 1. React 介绍 了解 react 的历史背景和基本概念 React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套...
react基础入门(2)
2401_84411433的博客
04-29 950
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家。
React基础入门详解
初学者乐园的博客
05-27 957
React项目的创建 1、 运行 cnpm i react react-dom -S 安装包 2、 在项目中导入两个相关的包： // 1. 在 React 学习中，需要安装 两个包 react react-dom // 1.1 react 这个包，是专门用来创建React组件、组件生命周期等这些东西的； // 1.2 react-dom 里面主要封装了和 DOM 操作相关的包，比如，要把 组件渲...
007-OA开发基础之--React基础入门.ppt
08-29
007-OA开发基础之--React基础入门.ppt
React 基础入门 -- JSX 基础
react_spy的博客
08-30 299
文章来源：https://www.yuque.com/study3651、什么是 JSX JSX 是 JavaScript 的一种语法扩展。可以组装UI界面，同时可以和 JavaScript 语法配合使用。2、为什么使用 JSX● 使用熟悉的语法定义 HTML 元素，提供更加语义化的标签，使用 JSX 编写模板更简单快速● 更加直观：JSX 让组件更加简单、明了、直观● 抽象了 React 元素的创建过程，使得编写组件变得更加简单举例说明如下：const children1 = React.createEl
TS React 项目中使用TypeScript
小白小白从不日别的博客
09-18 1536
消息: {this.props.msg}定义复杂数据类型后，可以导出数据类型方便其他组件引入使用。state = {}render() {return (消息: {this.props.msg}姓名：{this.props.user.name}年龄：{this.props.user.age}
了解 React 应用程序中的渲染和重新渲染：它们如何工作以及如何优化它们
忧郁的蛋的专栏
09-14 1127
渲染是 react 根据状态或属性在屏幕上渲染用户界面 (ui) 的过程。当你的组件第一次渲染时，它被称为第一次渲染。
使用 React Testing Library 测试自定义 React Hooks
rita_0567的博客
09-14 1215
现在，让我们看一个自定义hook的例子以及如何使用进行测试。我们已将计数逻辑提取到名为useCounter的自定义React hook中。该hook接受一个初始计数作为可选prop，并返回一个具有当前计数值和增加函数的对象。以下是: number使用这个自定义hook，我们可以很容易地向我们React应用的任何组件添加计数功能。现在，让我们探讨如何使用进行测试。});})在这个测试中，我们使用渲染我们的，并使用result对象获取其返回值。然后，我们使用expect()
ACE之ACE_Reactor_Notify
多看多听多总结
09-14 897
ACE_Reactor_Notify作为Reactor的实现类ACE_Reactor_Impl内部通知来唤醒eventloop。
React 的 useEffect 钩子，执行一些异步操作来加载基本信息
最新发布
u010194271的博客
09-20 512
在组件加载时异步获取基本信息和电话号。在加载过程中更新状态以指示加载状态。处理获取的数据并重置表单的值。这种处理方式使得- 组件在加载数据时能够有效地管理状态和用户界面。
Vue3 Day1&Day2-Vue3优势&ref、reactive函数
2301_76534754的博客
09-14 684
如果包裹引用数据类型，底层是proxy，原理是内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数 这个函数实际就是使用了vue3的响应式原理中的proxy。reactive丢失响应性，引用数据类型的值是存在堆里面，其指针存在栈里面，通过reactive包裹进行赋值（数组，对象，解构），产生新的地址（是一个普通对象），丢失原来响应式对象的引用地址。reactive包裹引用数据类型，不需要用 xxx.value，不能对基本数据类型产生响应性，会出现警告。良好的TreeShaking。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值