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

P35

在使用webpack进行打包时, 开发react代码以展示相应的界面。
在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

内容回顾

P38 2024年10月1日07点55分

树状结构
采用分层定义模式
函数式分层 functionComponent 类
基于内部是否存在维持数据的状态区分：无状态分层 component 和有状态 component
依据分层的不同功能划分：呈现效果 component 和容器类 component
类分层包含有状态的分层 component ，而函数式分层则不具备维护数据的能力

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

Class Components
具有标识符形式（通常以大写字母开头）的组件必须继承自react.Component。
此类组件必须实现render()函数。
在ES6之前可通过create-react-class模块来创建此类组件；但官方文档建议我们采用ES6提供的class类定义方式。

1. Mount component, when using JSX written code, will be compiled into a React element by react.createElement. Thus, returning a React element.

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

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

采用function编写的方式创建的函数式组件，在项目文件App_func.jsx中实现。
通过function关键字进行定义的方式构建功能模块。
无需继承某些属性或方法，并且其核心在于返回值机制与类组件的方法具有相似性。
在函数式组件中，并不维护内部状态信息,也不会将this指向实例对象,同时整体生命周期也无需特别管理。
不涉及this.setState相关操作。
该类型的功能定位明确。
两者在功能上存在一致性。
展示性组件的主要作用是呈现数据信息。

认识生命周期：

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

周期性事件作为核心概念被引入。其中，
mount update和unmount作为关键操作步骤，
mount：组件首次进入DOM树渲染的状态。
而当程序运行到某个阶段时会触发特定时间点的操作，
这些事件处理逻辑被称为周期性事件处理逻辑。
其中，
A componentDidMount事件会在组件首次进入DOM树渲染的时候触发处理逻辑。
A componentDidUpdate事件会在组件状态发生变化后自动执行相应操作。
而A componentWillUnmount事件则会在准备从DOM树中移除组件时触发相应的处理流程。

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分

$componentWillUnmount取消订阅, componentInit发送网络请求, addSubscribe期间进行订阅, 在dom操作的时间点完成注册

涉及mounting和constructor阶段。
在更新阶段中引入新增属性后会触发 setState 和 forceUpdate 操作。
纯组件在浅层比较时。
在决定是否需要重新渲染页面时 shouldComponentUpdate 会检查条件。

getSnapShotBeforeUpdate是在React执行DOM更新之前被调用的一个回调函数用于收集DOM更新前的信息。它不仅能够捕获滚动位置这一具体信息还可以返回组件状态变化等其他相关信息例如prevProps和PrevState以及当前截面图等数据。而componentDidUpdate则是一个用于记录组件属性变化的状态管理接口它接收prevProps表示组件属性修改前的状态prevState表示修改后的状态以及snapshot表示捕捉到的当前截面图数据。

p44-09点34分

组件之间的通信：
组件之间的嵌套关系
由于所有逻辑集中在一个组件中可能会显得过于冗杂
cpns
Header.jsx
Footer.jsx
App0

组件间通信 拿到一部分的数据，拿到很多的数据，把数据传递给Banner,

该组件接受字符串数据并将其传递给父类。
此实例通过重载构造函数实现基本功能。
当进入渲染方法时，请确保已初始化状态属性。
此实例初始化状态为空对象。
在开始循环之前，请确保已将banners字段赋值给状态对象。
此实例的状态更新操作将在循环中执行。
请确保传递来的props参数包含指定类型的banners字段。
为了保证输入的有效性，请使用指定的数据类型进行约束。
建议采用严格的类型验证机制以提升开发效率。
请确保所有输入均符合预期格式要求

未必要求时, MainBanner.propTypes配置为:
{
banners: Types\ebraunches\数组类型,
允许填写：title
}

48-

props传递消息，
子传父

51-react插槽

react不需要插槽，vue和小程序做了对比
抽取一个组件，

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

p51-组件的作用域插槽

54-16点11分

尽管通过children实现的方案是可行但该方案存在一定的缺陷。使用索引值获取输入数据项容易导致错误无法准确地捕捉到输入数据项

context应用场景

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

场景中用于提供上下文的信息可以通过两种方式实现：一种是将数据传递给组件；另一种是将数据注入到组件中。这些信息会从上至下进行传递，在各个组件间实现统一的数据管理以支持统一的功能目标

哪些在组件树中被视为全局数据以及如何在组件间共享这些值。
涉及的上下文相关API接口。
配置组件的contextType为某个预先定义好的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时异步还是同步的？

57-2024年10月1日-19点04分