浅谈React

forwardRef和useImperativeHandle的联动使用

复制代码
import React, { useImperativeHandle, useRef } from "react"
import { forwardRef } from "react"

const CustomInput = forwardRef((props, ref) => {
    const inputRef = useRef<HTMLInputElement>(null)

    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current?.focus()
        }
    }))
    return <div>
        <input ref={inputRef} />
    </div>
})

export default CustomInput

巧用children

  • 一般用法

    父组件:

    import React from "react"
    import Child from './Child'

    const CustomInput = () => {
    return <Child>

    hello 靓仔

    </Child>
    }

    export default CustomInput

    子组件:

    import React from "react"

    const Child = ({
    children
    }) => {
    return

    {children}

    }

    export default Child

  • 函数用法

    父组件:

    import React from "react"
    import Child from './Child'

    const CustomInput = () => {
    return <Child>
    {(arr)=>


    {arr.map((v,idx)=>{
    return
    {v}

    })}
    }
    </Child>
    }

    export default CustomInput

    子组件:

    import React from "react"

    const Child = ({
    children
    }) => {
    const arr = [1,2,4,5]
    return

    {children(arr)}

    }

    export default Child

useEffect

  • 没有依赖,类似于componentDidMount和componentDidUpdate

    import React, { useEffect, useState } from "react"

    const Detail = () => {
    const [count, setCount] = useState(1)
    const [num,setNum] = useState(2)
    useEffect(()=>{
    console.log(count,'count',num,'num')
    })
    return


    <div onClick={() => setCount(count + 1)}>add count

    <div onClick={() => setNum(num + 1)}>add num

count: {count}

num: {num}


}

export default Detail

  • 依赖是个空数组,相当于componentDidMount

    import React, { useEffect, useState } from "react"

    const Detail = () => {
    const [count, setCount] = useState(1)
    const [num,setNum] = useState(2)
    useEffect(()=>{
    console.log(count,'count',num,'num')
    },[])
    return


    <div onClick={() => setCount(count + 1)}>add count

    <div onClick={() => setNum(num + 1)}>add num

count: {count}

num: {num}


}

export default Detail

  • 有依赖,componentDidMount和对应依赖的componentDidUpdate

    import React, { useEffect, useState } from "react"

    const Detail = () => {
    const [count, setCount] = useState(1)
    const [num,setNum] = useState(2)
    useEffect(()=>{
    console.log(count,'count',num,'num')
    },[num])
    return


    <div onClick={() => setCount(count + 1)}>add count

    <div onClick={() => setNum(num + 1)}>add num

count: {count}

num: {num}


}

export default Detail

useEffect和useLayoutEffect

useEffect在渲染后执行,而useLayouEffect是在渲染之前执行

最典型的例子就是实现一个tooltip组件,在性能比较差的情况下,useEffect会先渲染初始状态再更新,而useLayoutEffect会阻塞UI的更新即不会出现组件闪烁的情况~

阻塞代码:

复制代码
let now = performance.now();
while (performance.now() - now < 100) {
}

useEffect在性能差的情况下会出现以下效果

useContext

依赖注入

复制代码
父级:
export const ThemeContext = createContext({});
const App = ()=>{

return  <ThemeContext.Provider value={{name:"real hot"}}>
        ......
    </ThemeContext.Provider>
}

 子级:
  const context = useContext(ThemeContext)
  console.log(context)

useState的变动

在react管辖下(react17.x.x)

  • 函数形式

状态能够更改多次,只渲染一次

复制代码
const handleCount= ()=>{
  setCount(count=>count+1)
  setCount(count=>count+1)
}
  • 对象形式

多次更改状态会被合并成一次更改,即一次生效其他无效,只渲染一次

复制代码
const handleCount= ()=>{
  setCount(count+1)
  setCount(count+1)
}

在异步任务/原生事件下(react17.x.x)

复制代码
const handleCount= ()=>{
setTimeout(()=>{
  setCount(count=>count+1)
  setCount(count=>count+1)
})
}

版本的演变(React18)

react18之后在异步操作或者react事件中都是批量更新,即多个状态更新合成一次渲染,若需要多次渲染可使用flushsync

复制代码
const handleCount= ()=>{
  flushSync(()=>{
    setCount(count=>count+1)
  })
  flushSync(()=>{
    setCount(count=>count+1)
  })

}

探索生命周期函数

父子组件生命周期执行顺序

挂载:

更新:

卸载:

错误处理

生命周期方法:

getDerivedStateFromError

componentDidCatch

缺点(没办法捕获):

  • 异步操作

  • 事件处理函数报错

  • 错误边界自己报错

    class ErrorBoundary extends React.Component {
    constructor(props) {
    super(props);
    this.state = { hasError: false };
    }

    复制代码
    static getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
    
    componentDidCatch(error, errorInfo) {
      // You can also log the error to an error reporting service
      logErrorToMyService(error, errorInfo);
    }
    
    render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return <h1>Something went wrong.</h1>;
      }
    
      return this.props.children; 
    }

    }

实现一个简单的Message

复制代码
import ReactDOM from 'react-dom';
import { Modal } from 'antd';
const ToastFn = () => {
let parent = null;
return {
open: function ({ el, container = document.body }) {
// this.destroy();
parent = document.createElement('div');
document.body.appendChild(parent);
ReactDOM.render(<Modal open onCancel={this.destroy}>{el}</Modal>, parent)
},
destroy: function () {
ReactDOM.unmountComponentAtNode(parent);
},
};
};
const Toast = ToastFn();
export default Toast;
上一篇:软件开发C#(Sharp)总结(续)
下一篇:【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第十九章 Linux 工具之make 工具和 makefile 文件
相关推荐
致博软件F2BPM5 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年7 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
热门推荐
01【无标题】02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践(附国内和国际版对比)04Java类变量(静态变量)05KGG转MP3工具|非KGM文件|解密音频06扣子(coze)实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07深度神经网络训练过程与常见概念08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10RestTemplate原理分析