react ts

react一些 记录

工作也有也有大半年了，一些知识点想着做些记录，顺便学学我这糟糕的MD 编辑器的使用

单向数据流：

什么叫单向数据流： 父 》 子 props 改变 引起子组件 重新render 子组件不能改变props 不能影响到父组件 及其依赖组件重新render，否则就乱套。

ReactElement 和 ReactNode

写ts 报错的时候 每次直接返回一个DOM 结构 或者 一个组件 不报错了 就完事，并未搞明白 区别。

interface ReactElement<
  P = any,
  T extends string | JSXElementConstructor<any> =
    | string
    | JSXElementConstructor<any>
> {
  type: T
  props: P
  key: Key | null
}

interface： 接口又是啥呢 简单说 就是一个约束
泛型：可以类型不固定 一个函数 要是直接写死 参数 string 那调用只能传string

function test(str:string):string{return str} //只能传 ，返回str 类型 
function test2<T>(arg:T):T{return arg} 
//调用方决定类型 test2<number>(2)  test2<string>('..')
//也可以简写 test2(2) test2('..') 这样可以自动推导 也是可以的
function test3<T>(arg:T[]):T{return arg[0]}
//规定泛型T 入参 数组类型 返回的泛型T中一个元素
//调用：
test3<number>([3])  test3(['1'])  test3([1]) 
//这样就规定了传入一个数字类型数组 必须返回数字类型  传字符数组 必须返回字符类型

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

看的出来ReactNode 范围是包括ReactElement 的 （还有一个JSXElement 继承 ReactElement 并且没有扩展)
所以 结论： ReactNode > RecatElement = 约等于 JSXElement

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。