精炼问题记录--解构、promise—hooks【ref、context上下文】【React所有知识及客户代码总结】

努力会有回报呀

已于 2024-03-04 16:13:07 修改

阅读量12

点赞数

文章标签：前端 javascript 开发语言

于 2023-11-21 11:47:19 首次发布

本文链接：https://blog.csdn.net/qq_39963867/article/details/134528364

版权

精炼知识点记录-promise、解构

摘要由CSDN通过智能技术生成

const jjjj={…ol,k} //k为对象，属性和ol不同则合并,若有同名属性则合并
jjjj={ll: 977, uuu: 9090, kk: 8988, k: {…}}
const pp={…ol,kk:90} // pp={ll: 977, uuu: 9090, kk: 90}//kk为同属性，则赋值

null是一个对象，undefined是未初始化的变量，所以，可以把undefined看成一个空变量，把null看成一个空对象。

语法知识
UseState
useMemo
useEffect
useEffect（副作用）在完成某件事时附带执行的事，在useEffect中，代表构建完成才执行，因为主要是dom构建，所以称之为副作用，着重注意渲染时机，dom构建完成后。
当副作用需要随数据变化时，一定要添加上去，并且切莫将数据流的变化写在副作用中，因为这时就是主作用了，而你加入到副作用中会进入死循环。
若监听空数组，则effect只会在组件挂载和卸载时执行，在更新组件时不会再执行，若为非空数组，则数组变effect执行

useRef 是一种用于在 React 组件中创建可变状态的 hook，它会返回一个可以被修改的引用对象。当你需要在组件中使用一个可变的值，但是又不想将其暴露给外部环境时，可以使用 useRef。

useImperativeHandle 是一个 hook，它可以让你在组件中定义一个可调用的方法或属性，并允许外部组件访问它。当你需要在组件中创建一个需要被外部组件调用的方法或属性时，可以使用 useImperativeHandle。

两个 hook 的区别在于，useRef 是一个内部状态，只能被组件内部使用，而 useImperativeHandle 则是一个可以被外部组件访问的状态
forwardRef&useRef
定义&使用
一、定义了一个ref： SimpleListModalRef
1）export interface SimpleListModalRef {
reset: () => void;
}
2）暴露出来，这样在其它组件才可以用。要和forwardRef配合使用
const SimpleListModal = React.forwardRef<SimpleListModalRef, SimpleListModalProps>(
(
{
basicParams = {},
},
ref
) => {
/**
* 暴露相关操作方法
* reset ---- 重置内容
*/
useImperativeHandle(ref, () => ({
reset: () => resetData()
}));
}
二、使用ref：（在其它组件使用）
引入useRef const simpleListModalRef = useRef(null);
使用 //清空数据simpleListModalRef.current?.reset();

//渲染这个组件可以调用simpleListModalRef.current.reset()
.current 属性被初始化为传入的参数，即是SimpleListModalRef

useContext & 上下文 Context
可以将一些数据注入到Context对象中，使其下的子组件可以随时随地访问这些数据，省去了逐层传递的步骤。【上下文只会应用于上下文的子组件，所以要把一个content（内容）组件包在上下文内，当作上下文的子组件，
如 //上下文组件
//子组件

】
React.createContext(defaultValue)
创建Context对象，可传入默认值或undefined。
Context.Provider：Context对象都会返回Provider组件，其下的组件会订阅Provider中的数据。Provider接收value属性，用于将value传递给内层组件，当value发生变化时所有内层组件都会重新渲染

export const CvmContext: React.Context<
 CustomProps & {
    prefixCls: string;
  }
//创建了一个context上下文对象，默认值有prefixCls
> = createContext({ prefixCls: 'ant' });

<CvmContext.Provider value={ { prefixCls, dropdownAlign, maskClosable, networkEnv, selectorMode, showTableHelp }}>//属性值在Provider上设置
{children}
</CvmContext.Provider>
使用！！
const { prefixCls } = useContext(CvmContext); //将CvmContext里prefixCls属性值解构出来

ts要给对象赋值