gpt4 book ai didi

reactjs - 如何避免使用useRef重新渲染 react ?

转载 作者:行者123 更新时间:2023-12-03 17:01:47 25 4
gpt4 key购买 nike

我正在创建一个组件来拍照并上传到服务器。当我在输入框中输入内容时,setTitle 被触发并且组件被重新渲染。发生这种情况时,视频变黑了。如何避免视频被渲染?

function Camera() {
console.log("Render camera");
const [title, setTitle] = useState("");
let videoRef = useRef(null);
let canvasRef = useRef();

// This is a custom hook for get the camera input
const mediaStream = useUserMedia({
audio: false,
video: { width: 300, height: 300 }
});

if (mediaStream && videoRef.current && !videoRef.current.srcObject) {
videoRef.current.srcObject = mediaStream;
}

// Stop the video stream when component is unmount
useEffect(() => {
return () => {
if (mediaStream) {
mediaStream.getTracks()[0].stop();
}
};
}, [mediaStream]);

const handlePostTitle = e => {
e.preventDefault();
setTitle(e.target.value);
};

const onCapture = async blob => {
console.log("Upload to server");
};

return (
<form>
<div>
<video ref={videoRef} autoPlay muted />
<canvas ref={canvasRef} width={300} height={300} />
</div>
<div>
<input
type="text"
name="title"
value={title}
onChange={handlePostTitle}
placeholder="Title"
/>
</div>
<button
type="submit"
onClick={() => {
if (canvasRef) {
const context = canvasRef.current.getContext("2d");
// This is for rotate the photo
context.translate(300, 0);
context.scale(-1, 1);

context.drawImage(videoRef.current, 0, 0, 300, 300);
canvasRef.current.toBlob(blob => onCapture(blob), "image/jpeg", 1);
context.clearRect(0, 0, 300, 300);
}
}}
>
Take photo
</button>
</form>
);
}

完整代码可在 https://codesandbox.io/s/react-camera-component-with-hooks-s6pmb 获得

最佳答案

试试这个代码,
代码沙盒链接 - https://codesandbox.io/s/react-camera-component-with-hooks-n9ey9

import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import { useUserMedia } from "./hooks/use-user-media";

function Camera() {
console.log("Render camera");
let videoRef = useRef(null);
let canvasRef = useRef();

const mediaStream = useUserMedia({
audio: false,
video: { width: 300, height: 300 }
});

if (mediaStream && videoRef.current && !videoRef.current.srcObject) {
videoRef.current.srcObject = mediaStream;
}

// Stop the video stream when component is unmount
useEffect(() => {
return () => {
if (mediaStream) {
mediaStream.getTracks()[0].stop();
}
};
}, [mediaStream]);

const onCapture = async blob => {
console.log("Upload to server");
};

let titleRef = useRef();

const OnSubmit = () => {
console.log("title", titleRef.current.value);
};

return (
<form>
<div>
<video ref={videoRef} autoPlay muted />
<canvas ref={canvasRef} width={300} height={300} />
</div>
<div>
<input type="text" name="title" placeholder="Title" ref={titleRef} />
</div>
<button
type="submit"
onClick={() => {
OnSubmit();
if (canvasRef) {
const context = canvasRef.current.getContext("2d");
// This is for rotate the photo
context.translate(300, 0);
context.scale(-1, 1);

context.drawImage(videoRef.current, 0, 0, 300, 300);
canvasRef.current.toBlob(blob => onCapture(blob), "image/jpeg", 1);
context.clearRect(0, 0, 300, 300);
}
}}
>
Take photo
</button>
</form>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Camera />, rootElement);

关于reactjs - 如何避免使用useRef重新渲染 react ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59792820/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com