https://www.redux.org.cn/docs/introduction/CoreConcepts.html
useCallback()与usememo()
hooks
webpack分包,按需加载策略
防抖与节流在hook中的应用
React事件处理中this使用解决办法:箭头函数+class fields语法
context的使用场景?useContext?
react合成事件与原生事件?
setState是同步还是异步的?(指的是获取到state的时候,this指向时是同步还是异步的?)
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> ) }