FrankKai

### React.createElement(Input, props)中的React.createElement如何理解？ #### React.createElement() ```js React.createElement( type, [props], [...children] ) ``` 根据指定类型，返回一个新的React element。 类型这个参数可以是： - 一个“标签名字符串”（例如“div”，“span”） - 一个React component 类型（一个class或者一个function） - 一个React fragment 类型 JSX写法的组件，最终也会被解析为React.createElement()的方式。如果使用JSX的方式的话，不需要显式调用React.createElement()。 #### React.createElement(Input, props) 基于antd，封装通用表单组件方法。...

### React中FC的形参的props, context, propTypes, contextTypes, defaultProps, displayName是什么？ ```js type FC = FunctionComponent; interface FunctionComponent { (props: PropsWithChildren, context?: any): ReactElement | null; propTypes?: WeakValidationMap; contextTypes?: ValidationMap; defaultProps?: Partial; displayName?: string;...

### React中的事件绑定`onClick={handleOnClick}`与`onClick={()=>handleOnClick('pop')}`区别是什么？ - 不需要传递数据：`onClick={handleOnClick}` ✅ - 需要传递数据：`onClick={()=>handleOnClick('pop')}` ✅ - 错误写法：`onClick={handleOnClick('pop')}`❌ 印象很深刻的踩坑：假设将注释代码放出来，则会提醒`Cannot read property 'mutateArray' of null`。 这是因为onClick接收的类型为`onClick?: MouseEventHandler;`，其实就是函数类型，而`onClick={handleOnClick('pop')}`中handleOnClick('pop')返回的是undefined，并不是一个事件处理器类型。  代码可以查看这个在线demo：https://codesandbox.io/s/visual-array-n3ky8

### React除了可以通过props传递数据以外，如何通过context方式传递数据? 假设组件层级较深，props需要一级一级往下传，可以说是props hell问题。 context方式封装的组件，为需要接受数据的组件，提供了一种**跨组件层级传递，按需引入上级props**的方式。 #### 组件定义context部分 ```js import * as React from 'react' // myContext.ts interface IContext { foo: string, bar?: number, baz: string } const myContext = React.createContext({...

### React的children无法slice怎么办？ 假如你想获取children位置1和2的切片，很有可能写出这样的代码。 本质上就是想操作children元素。 ```js children.slice(1,3) ``` 但是React会报错： ```js Property 'slice' does not exist on type 'ReactNode'. ``` 如何解决？ 使用React.Children.toArray()即可。 ```js React.Children.toArray(children).slice(1,3) ``` React官网原文： >Returns the children opaque data structure...

### React18引入的auto batch没有生效是什么原因？ 有可能是使用了StrictMode。 在线demo：https://codesandbox.io/s/react-18-auto-batch-blldfn?file=/src/index.js:0-268 开启StrictMode，每次触发点击事件，打印2 次，auto batch失效；关闭StrictMode，每次触发点击事件，打印1 次，auto batch生效。

### React的portal如何使用？ React的portal，提供了一种将节点挂载到其他dom节点上的能力，而不是直接挂载到当前父组件的下面。 ```js // 将props.children挂载到父节点 return ( {props.children} ); ``` ```js // 将props.children挂载到其他dom节点 return ReactDOM.createPortal( props.children, domNode ); ```

### webcomponents-sd.js, webcomponents-cs.js, custom-elements-es5-adaptor.js是什么？ web components的polyfill。 #### webcomponents-sd.js sd(Shady DOM ) polyfill #### webcomponents-ce.js ce(Custom Elements) polyfill #### custom-elements-es5-adaptor.js Custom Elements es5适配器。 >根据规范，只有 ES6 class可以传递给原生 customElements.define API。因此这是为了兼容不支持es6 class的浏览器去使用web components的polyfill。 polyfill仓库：https://github.com/webcomponents/polyfills

### ``标签的download属性 这个属性可以叫浏览器下载一个URL，而不是导航，所以用户将被提示"下载一个本地文件"。如果属性有值，在Save提示时它将有一个预填充的文件名。（如果他们愿意用户可以改变文件名）。值没有严格限制，即使是/ 和 \也会被转换成下划线。大多数的文件系统对文件名做了一些限制，浏览器将根据具体情况做出调整。 注意: 这个属性紧仅仅用于same-origin URL。 尽管HTTP(s) URL需要在同源，blob: URLs 和data: URLs允许由js生成的内容，例如一个图片编辑器web应用中创建的图片，可以被下载。 如果HTTP报文头 Content-Disposition ：提供与此属性不同的文件名，HTTP标头优先于此属性。 如果Content-Disposition：设置为inline时，Firefox优先考虑Content-Disposition，例如文件名大小写，Chrome优先考虑下载属性。 - a标签download属性，从后往前匹配第一个.作为文件格式。 若是`download='foobarbaz.bat.png'`，文件格式为.png；若是`download='foobarbaz.bat'`，文件格式为.bat。 - a标签的download属性值，若没有指明文件名，会以href中的文件格式进行匹配。 例如base64格式的`data:image/png;`，生成的文件格式为png格式。 #### 使用download属性将``下载保存为png ```html a标签的download属性可以将canvas保存为png。 * { margin:...

### ``的accept属性 >accept 如果type属性为file，这个属性将服务器接收的文件类型。若type不是file，将被忽略。 "内容类型识别器"可以包含以下内容： - 停止符号"."加大小写敏感的文件名。例如：.pdf,.txt,.jpg,.png。 - 没有任何插件的有效的MIME类型。 - audio/* 代表sound files. - video/* 代表 video files. - image/* 代表 image files. 只允许上传类型为jpg,pdf格式的文件 ``` ``` 只允许上传类型为image的文件 ``` ``` 只允许上传类型为video类型的文件...