别的文章讲，当将一个方法A作为prop传递给子组件的时候，假如不用useCallback，每次A都是新的，子组件接受新的方法A会重新渲染，这样导致了不必要的重复渲染。 在其他情况下，似乎没什么用处，比如下面这个情况 import { useCallback, useState } from "react" const Counter = ()=> { const [count, setCount] = useState(0) // 每次都会执行，这种情况下 useCallback ...
import { useState } from "react" const Counter = ()=> { const [count, setCount] = useState(0) console.log(111); const handleCount = ()=> { // react 状态更新是异步的，这么写不保证拿到最新值 // 当前页面这么写测试没问题，可能是按钮点击的速度不够快 // setCount(count + 1) // ...
https://codepen.io/eddieeddieeddiejones/pen/pvzjoar?editors=1111 import React, { useEffect, useState } from "react"; function BlogView({id}) { // 打开页面，执行两次 // blogContent 为 null 执行一次，请求有内容执行一次 // 其实不用管执行了几次，函数组件，state 和 props 相同，那么组件输出相同。也...
https://codepen.io/eddieeddieeddiejones/pen/MYgaWYp state 和 props 变化，导致组件函数重新执行，重新渲染页面。 import { useCallback, useEffect, useState } from "react" function getSize() { const width = window.innerWidth if (width > 1000) { return 'large' } el...
react hooks 组件 state 变化，导致组件方法执行，函数内部保存组件状态。状态变化导致函数重新执行，页面重新渲染。渲染结果只依赖组件状态。 import React from "react"; class ConstComp extends React.PureComponent { // 执行一次 render() { console.log("abc"); return "Hello"; } } function CountLabel({ coun...
背景 做一个视频聊天工具，需要用浏览器打开摄像头和麦克风。chrome 要求打开摄像头和麦克风，需要开启https支持。 下载 mkcert # 第一步，安装 mkcert brew install mkcert # 第二步，将 mkcert 添加到本地根CA mkcert -install # 第三步，生成签名和证书 # 当前目录下会多出两个文件，可以在项目根目录下运行 mkcert localhost 第四步 添加vite配置文件，没有这个文件的话自己创建 import { defi...