react学习记录（三）

组件初识 概念和思想

封装和复用

封装message组件

直接通过调用方法实现类似element的消息弹窗，几秒后自动消失。
新建一个方法绑定到window全局变量上 ，（在window上新建一个方法，需要使用declare进行全局声明），方法内部新建一个容器挂载到Dom上，使用reactDom新建一个root节点，然后使用render方法进行渲染message组件。通过数组控制弹窗的位置（避免重叠），设置定时器销毁创建的容器和渲染。

使用const let会产生词法上下文块级作用域，不会出现var i循环的闭包问题。

组件通讯

父子组件通讯

1. 通过props传递属性，props是一个对象。字符串、数字、布尔值、对象、函数都可以。
2. 子组件向父组件传递参数，通过回调函数触发，在父组件定义一个函数传递给子组件。
3. 在父组件层面引入子组件时在其标签内部插入内容会自动生成props.children，类似插槽。

祖孙组件通信

兄弟组件通讯

通过发布订阅模式。

1. 浏览器自带订阅监听，使用Event新建一个对象

import React from "react"
const Test: React.FC = (props) => {
    const event = new Event('on-card') //添加到事件中心
    const clickTap = () => {
        console.log(event)
        event.params = { name: '我见过龙' }
        window.dispatchEvent(event) //派发事件
    }
    return <div>
        <button onClick={clickTap}>派发事件</button>
    </div>
}
//扩充event类型
declare global {
    interface Event {
        params: any
    }
}

export default Test

import './index.css'
export default function Test2() {
    //接受参数
    window.addEventListener('on-card', (e) => {
        console.log(e.params, '触发了')
    })

    return <div className="card"></div>
}

2. 使用mitt mitt文档 https://www.npmjs.com/package/mitt

受控组件和非受控组件

一般用于表单组件，是指表单组件比如input标签是否受react的状态值控制，使用useState去绑定表单组件，绑定的则是受控组件，非受控组件则通过useRef去绑定DOM，直接操作DOM。

对于file的组件，只能是非受控组件。对于file类型的表单控件，它是一个特殊的组件，因为它的值只能由用户通过文件选择操作来设置，而不能通过程序直接设置。这使得它在React中的处理方式与其他表单元素有所不同。

 <input type="file" ref={inputRef} onChange={handleChange} />

异步组件

可以实现在加载真正内容前给一个用户提示效果，增强用户体验。

<Suspense fallback={<div>Loading...</div>}>
  <AsyncComponent />
</Suspense>

代码分包，减少总包体积，减少首屏加载时的资源体积

配合lazy函数使用，实现代码分包，会将AsyncComponent单独打成一个包

import React, { useRef, useState, Suspense,lazy } from 'react';
const AsyncComponent = lazy(() => import('./components/Async'))
const App: React.FC = () => {

  return (
    <>
      <Suspense fallback={<div>loading</div>}>
        <AsyncComponent />
      </Suspense>
    </>
  );
}

export default App;

抓取数据时，提供一个展位符

需要使用React的use API。use 是一个 React API，它可以让你读取类似于 Promise 或 context 的资源的值。

当使用 Promise 调用 use API 时，它会与 Suspense 和 错误边界 集成。当传递给 use 的 Promise 处于 pending 时，调用 use 的组件也会 挂起。如果调用 use 的组件被包装在 Suspense 边界内，将显示后备 UI。一旦 Promise 被解决，Suspense 后备方案将被使用 use API 返回的数据替换。如果传递给 use 的 Promise 被拒绝，将显示最近错误边界的后备 UI。

HOC高阶组件

组件内部再返回一个组件，用的较少了，但是面试可能会被问到。

我的理解就是对组件再进行一层包裹，这层包裹里可以再做一些其他的操作，比如埋点，统计数据。

createPortal

react-dom的一个api，可以将任一一个组件挂载到任一一个DOM位置。

createPortal(commponent,docmnet.body)