react自学2024年10月1日19点04分

学习记录wanxiaowan

于 2024-10-01 19:04:27 发布

阅读量115

点赞数

分类专栏：前端校园招聘面试练习题目文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_43428283/article/details/142667185

版权

前端校园招聘面试练习题目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

P35

src/index.js
通过webpack打包的时候
src/index.js
去编写react代码去渲染对应的内容

const root=ReactDOm.createRoot(document.querySelector("#root"));
root.render(<h2>哈哈哈</h2>)
import ReactDOM from 'react-dom/client'
//都是在webpack在webpack当中已经打包好了
//编写组件
import App from "./App";
class App extends ReactDOM.Component {
    constrctor(){
        super()
        this.state = {

        }
    }
    render()  {
        const {message} =this.state 
        return (
            <div>
            <h2>{{message}}</h2></div>
        )
    }
}
const root=ReactDOM.createRoot(document.querySelector("#root")\)
root.render(<App/>)

class HelloWorld extends ReactiveEffect.Component {
    render() {
        return  (
            <div>
            <h2>Hello webkitURL</h2>
            </div>
        )
    }
}
import React from 'react'
export default from App

2024/10/1: 7:49

p37

内容回顾
jsx语法：
1.1
this绑定 bind
ees 6 class field
箭头函数
传递参数
event 额外的参数传递
jsx的条件渲染
if 判断，三元运算符，逻辑与，v-show实现效果
1.3jsx列表渲染
map高阶函数
filter,slice
购物车的案例
界面数据展示
交互操作-》删除操作->
第三个东西：react脚手架使用
介绍脚手架
node环境
使用create-react-app创建项目
目录结构的分析和pwa介绍
从0编写项目代码
脚手架的webpack的配置
虚拟dom diff算法，跨平台，声明式编程

P38 2024年10月1日07点55分

树结构
组件定义方式
函数组件functional component 类组件class Component
根据组件内部是否有状态需要维护：无状态组件，有状态组件
根据组件的不同职责：展示型组件presentainal component和容器型舰,
类组件有状态组件，函数式组件无状态组件
在这里插入图片描述

p39-2024年10月1日08点07分

类组件
组件的名称式大写字母开头的，类组件需要继承自react.Component
类组件必须实现render函数
es6之前通过create-reeact-class模块来定义类组件，但是母亲官网建议我们使用es6的class类定义

在这里插入图片描述
1.react元素，通过jsx编写的代码就会被编译成react.createElEMENET,所以返回的就是react元素

portals渲染不同的子节点到不通过的dom子树当中

p40-2024年10月1日 08点28分

函数式组件，使用function来编写的，App_func.jsx
使用function来定义的
不需要继承一些东西，需要返回值，和类组件的render函数返回是一致的，
函数式组件，没有内部的状态state,this关键字不能指向组件的实例，没有生命周期，
没有this.setState
函数式组件
返回值和类组件当中的render函数返回的是一致的，展示性组件就是为了展示数据的
类组件和函数式组件

认识生命周期：

p41-2024年10月1日08点42分

生命周期是一个抽象的概念，挂载更新和卸载，挂载：组件第一次在dom树当中被渲染的过程
更新过程update:组件状态被变化，重新更新渲染过程
卸载过程：unmount组件在dom树当中被移除的过程
react内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数
componentDidMount组件已经被挂载到dom上的时候就会回调
componentDidUpdate函数组件已经发送更新了的时候就会回调
componmentWill Unmount组件即将被移除的时候就会回调
在这里插入图片描述
mounting->constructuro创建组件实例

import React, { Component } from 'react'

export class App extends Component {
    constructor() {
        super()
        this.state = {
            message: "App Component"
        }
    }
  render() {
    const {message} = this.state
    return (
      <div>
        <h2>{message}</h2>
      </div>
    )
  }
}
function App (){
    //bu
}
export default App

p42-生命周期的变更

在这里插入图片描述

p43-09点16分

componentDidMount发送网络请求，添加订阅,componentWillUnmount取消订阅，时间哦在那个先，依赖于dom的操作在这里插入图片描述
不常用的生命周期：
mounting:constructor:
updating:new props,setState,forceUpdate()-.》getDeirvedStateFromProps->shoucldComponentUpdates
不常用的生命周期：
PureCoponent浅层比较的
shouldComponentUpdate()更新之前会询问需不需要重新渲染页面，如果返回的是false,就会被认为不需要重新渲染页面
在这里插入图片描述

getSnapShotBeforeUpdate在react更新dom之前回调的一个函数可以获取dom更新前的一些信息，
getSnapShotBeforeUpdate在react更新dom之前的回调函数，可以获取dom更新前的一些信息比如说滚动位置，componmentDidUpdate:prevProps,PrevState,snapshot
componentDidUpdate(prevProps,prevState,snapshot);

p44-09点34分

组件的通信：
组件的嵌套
组件之间存在嵌套关系，所有的逻辑放在一个组件当中会变得非常的臃肿
cpns
Header.jsx
Footer.jsx
App0

组件间通信拿到一部分的数据，拿到很多的数据，把数据传递给Banner,![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9ba6be25939c48408764692afed43fed.png) MainBanner banners="aaaa" 字符串数据={banners}/> class MainBanner extends Comonen { constructor(props){ super(props); this.state = {} }} render(){ this.state this.props const {banners}=this.props }}} # 45-10点06分 this.state = { bbanners: ["新歌过去","新MV“，“xingge1dan”】； }} componentDidMount(){\ # 47-10点26分参数propTypes expoort default { props: { banners: {types:Array }}} 保证别人传来的是对应数组的，两个东西title,banners参数propTypes的类型进行限制的 flow或者typescript直接就可以进行类型验证, prop-types库进行参数的验证的

在这里插入图片描述
不是必传的情况下，MainBanner.propTypes ={
banners:PropTypes.array,
title

48-

props传递消息，
子传父

51-react插槽

react不需要插槽，vue和小程序做了对比
抽取一个组件，在这里插入图片描述

有可能是数组有可能是元素的

p51-组件的作用域插槽

在这里插入图片描述

54-16点11分

通过children实现的方案虽然可行但是有一个弊端，通过索引值获取传入的元素很容易出错，不能精准的获取传入的元素
在这里插入图片描述

context应用场景

一层层的传递：
非父子组件的通信
context

context应用场景
provide提供数据，inject注入数据的
context
props从上到下进行传递，一些数据需要在多个组件当中进行共享，App当中定义这些信息

在这里插入图片描述
共享哪些对于一个组件树而言是全局的数据，在组件之间共享此类值的方式
Context相关的API
第三步操作：设置组件的contextTtpe为某一个Context
HomeInfo.contextType=ThemeContext

当组件当中需要duogeContext
当使用value的组件时一个函数式组件的时候

57-react组件化开发

组件化开发的概念
分而治之的思想
1.1组件化的概念
组件化开发分而治之的思想
react组件化的划分
类组件和函数式组件
有状态组件和无状态组件
展示性组件和容器行组件
类组件和函数式组件
constructor
render
comoponementDiMount
componentDidUpdate
componentWillUnmount
组件父子传递
父传子:props
子传父:props=>函数，回调函数
1.6父子通信的案例的联系
1.7插槽的使用
类型的验证propTypes
1.5.3类型验证propTypes/defualtProps
defaultProps
1.7.1children
1.7.2props属性传递
1.7.3作用域的插槽，对应的函数的回调
1.8context作用域
1.8.1spread prtops/attributes
有时候需要给组件设置多个属性，
如果你事先知道组件需要的全部的props属性，jsx很容易这样写的
因为react不能帮你检查属性类型，这样基是你的属性类型有错误，也不能得到清晰的错误提示，context的基本使用
1.创建context
2.Context.Provider提供value
3.类组件contextType=Context
类组件this.context
Context额外的补充
。1函数式组件使用context
Context.Comsumer
value=>{}
多个Context共享数据
类组件Context.Consumer
3/defualtValue
如果使用Context,该组件不是Context.Provider的共享组件
使用DefaultValue
Context0
EeventBus0
react的setState时异步还是同步的？