浅谈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 文件
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
热门推荐
012024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理02Coze实战第13讲:飞书多维表格读取+豆包生图模型,轻松批量生成短剧封面03Coze扣子平台完整体验和实践(附国内和国际版对比)04Word粘贴时出现“运行时错误53,文件未找到:MathPage.WLL“的解决方案05手机电脑之间快速传输图片视频文件,不压缩画质、不限制大小的方法!06扣子(coze)实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南08Coze平台 创建AI智能体的详细步骤指南09DeepSeek各版本说明与优缺点分析10MIUI显示/隐藏5G开关的方法,信号弱时开启手机Wifi通话方法