前端面试基础——react

redux教程

https://www.redux.org.cn/docs/introduction/CoreConcepts.html

useCallback()与usememo()

hooks

webpack分包,按需加载策略

防抖与节流在hook中的应用

React事件处理中this使用解决办法:箭头函数+class fields语法

context的使用场景?useContext?

react合成事件与原生事件?

setState是同步还是异步的?(指的是获取到state的时候,this指向时是同步还是异步的?)


constructor与super

class ColorPoint extends Point {}

// 等同于 class ColorPoint extends Point { constructor(...args) { super(...args); }}

// 可见没有写constructor,在执行过程中会自动补上


生命周期



react + hook + ts 父组件调用子组件

参考:https://blog.csdn.net/weixin_44883642/article/details/106849843

父组件:

export default function BaseStep(props) {// 这里的props很关键,千万不要忘记加 const fromRef = useRef(null); <BasicConfig ref={fromRef}></BasicConfig>; fromRef.current.myName(); // 直接调用子组件的myName方法}

子组件

const BasicConfig = (props, fromRef) => { // 这里的props和fromRef 千万不要忘记加啊 useImperativeHandle(fromRef, () => ({ myName, })); const myName = (value) => { // 子组件方法}; return ( <div ref={fromRef}></div> ); } export default forwardRef(BasicConfig);// 不要忘记forwardRef引用 然后在导出

import React, { useRef, forwardRef, useImperativeHandle } from 'react' const Child = forwardRef((props, ref) => { const inputRef = useRef(); // 作用: 减少父组件获取子组件的DOM元素属性,只暴露给父组件需要用到的DOM方法 // 参数1: 父组件传递的ref属性 // 参数2: 返回一个对象,父组件通过ref.current调用对象中方法 useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus() }, })) return <input type="text" ref={inputRef} /> }) export default function Parent() { // useImperativeHandle 主要作用:用于减少父组件中通过forwardRef + useRef 获取子组件DOM元素暴露的属性过多 // 为什么使用: 因为使用forwardRef + useRef 获取子函数式组件DOM时,获取到的dom属性暴露的太多了 // 解决: 使用uesImperativeHandle解决,在子函数式组件中定义父组件需要进行DOM操作,减少获取DOM暴露的属性过多 const childRef = useRef() return ( <div> <button onClick={() => childRef.current.focus()}>聚焦</button> <Child ref={childRef} /> </div> ) }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容