组件初识 概念和思想
封装和复用
封装message组件
直接通过调用方法实现类似element的消息弹窗，几秒后自动消失。
新建一个方法绑定到window全局变量上 ，（在window上新建一个方法，需要使用declare进行全局声明），方法内部新建一个容器挂载到Dom上，使用reactDom新建一个root节点，然后使用render方法进行渲染message组件。通过数组控制弹窗的位置（避免重叠），设置定时器销毁创建的容器和渲染。
使用const let会产生词法上下文块级作用域，不会出现var i循环的闭包问题。
组件通讯
父子组件通讯
- 通过props传递属性，props是一个对象。字符串、数字、布尔值、对象、函数都可以。
- 子组件向父组件传递参数，通过回调函数触发，在父组件定义一个函数传递给子组件。
- 在父组件层面引入子组件时在其标签内部插入内容会自动生成props.children，类似插槽。
祖孙组件通信
兄弟组件通讯
通过发布订阅模式。
- 浏览器自带订阅监听，使用Event新建一个对象
javascript
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
javascript
import './index.css'
export default function Test2() {
//接受参数
window.addEventListener('on-card', (e) => {
console.log(e.params, '触发了')
})
return <div className="card"></div>
}- 使用mitt mitt文档 https://www.npmjs.com/package/mitt
受控组件和非受控组件
一般用于表单组件，是指表单组件比如input标签是否受react的状态值控制，使用useState去绑定表单组件，绑定的则是受控组件，非受控组件则通过useRef去绑定DOM，直接操作DOM。
对于file的组件，只能是非受控组件。对于file类型的表单控件，它是一个特殊的组件，因为它的值只能由用户通过文件选择操作来设置，而不能通过程序直接设置。这使得它在React中的处理方式与其他表单元素有所不同。
javascript
<input type="file" ref={inputRef} onChange={handleChange} />异步组件
可以实现在加载真正内容前给一个用户提示效果，增强用户体验。
javascript
<Suspense fallback={<div>Loading...</div>}>
<AsyncComponent />
</Suspense>代码分包，减少总包体积，减少首屏加载时的资源体积
配合lazy函数使用，实现代码分包，会将AsyncComponent单独打成一个包
javascript
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位置。
javascript
createPortal(commponent,docmnet.body)