当前位置: 首页> 汽车> 报价 > 浅谈React

浅谈React

时间:2025/7/10 14:35:46来源:https://blog.csdn.net/hometowna/article/details/139533379 浏览次数: 0次

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><div>hello 靓仔</div></Child>
}export default CustomInput子组件:import React from "react"const Child = ({children
}) => {return <div>{children}</div>
}export default Child
  • 函数用法
父组件:import React from "react"
import Child from './Child'const CustomInput = () => {return <Child>{(arr)=><div>{arr.map((v,idx)=>{return <div key={idx}>{v}</div>})}</div>}</Child>
}export default CustomInput子组件:import React from "react"const Child = ({children
}) => {const arr = [1,2,4,5]return <div>{children(arr)}</div>
}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><div onClick={() => setCount(count + 1)}>add count</div><div onClick={() => setNum(num + 1)}>add num</div><div>count: {count}</div><div>num: {num}</div></div>
}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><div onClick={() => setCount(count + 1)}>add count</div><div onClick={() => setNum(num + 1)}>add num</div><div>count: {count}</div><div>num: {num}</div></div>
}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><div onClick={() => setCount(count + 1)}>add count</div><div onClick={() => setNum(num + 1)}>add num</div><div>count: {count}</div><div>num: {num}</div></div>
}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 servicelogErrorToMyService(error, errorInfo);}render() {if (this.state.hasError) {// You can render any custom fallback UIreturn <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;
关键字:浅谈React

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: