ImperativeHandle, useLayoutEffect 및 useDebugValue를 사용하는 경우
는 왜 과 같은 것들이 있는지 할 수 없다.useImperativeHandle,useLayoutEffect , , , , 입니다.useDebugValue후크가 필요합니다.사용할 수 있는 예를 제시해 주세요만, 문서의 예는 제시하지 말아 주세요.
이 답변의 선두에 이러한 훅은 거의 사용되지 않습니다.99%의 경우, 이것들은 필요 없습니다.이것들은, 극히 드문 코너 케이스의 시나리오만을 대상으로 하고 있습니다.
useImperativeHandle
으로 '아예'를 사용하는 useRef.ref을 사용하다dom dom dom 、 DOM 、 DOM dom dom dom dom dom dom 。
useImperativeHandle매우 비슷하지만 다음 두 가지 작업을 수행할 수 있습니다.
- 반환되는 값을 제어할 수 있습니다.인스턴스 요소를 반환하는 대신 반환 값을 명시적으로 지정합니다(아래 스니펫 참조).
- 함수를 들어, 네이티브 함수)를할 수 .
blur,focus의 기능을 있기 을 할수 .이 요.
부모에게 네이티브속성을 공개하지 않거나 네이티브함수의 동작을 변경하는 등 위의 몇 가지 이유가 있을 수 있습니다.러러가가가가이이이이이요요요요요요요요 。 ★★★★★★★★★★★★★★.useImperativeHandle거의 사용되지 않습니다.
useImperativeHandle는 부모 시 컴포넌트에 노출되는 .ref
예
예에서는, 「」로부터 얻을 수 값입니다.ref됩니다.blur의 우 our our our 에서 선언한 것이다.useImperativeHandle. 다른 속성은 포함되지 않습니다(이것을 나타내기 위해 값을 기록합니다).기능 자체도 통상 예상과는 다르게 동작하도록 "맞춤"되어 있습니다.자, 세팅됩니다.document.title입력이 흐릿해집니다.blur출됩니니다다
const MyInput = React.forwardRef((props, ref) => {
const [val, setVal] = React.useState('');
const inputRef = React.useRef();
React.useImperativeHandle(ref, () => ({
blur: () => {
document.title = val;
inputRef.current.blur();
}
}));
return (
<input
ref={inputRef}
val={val}
onChange={e => setVal(e.target.value)}
{...props}
/>
);
});
const App = () => {
const ref = React.useRef(null);
const onBlur = () => {
console.log(ref.current); // Only contains one property!
ref.current.blur();
};
return <MyInput ref={ref} onBlur={onBlur} />;
};
ReactDOM.render(<App />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>useLayoutEffect
는 정도 useEffect()React가 DOM에 업데이트를 커밋한 후에 실행된다는 점이 다릅니다.업데이트 후 요소 간 거리를 계산하거나 기타 업데이트 후 계산/부작용을 수행해야 하는 드문 경우입니다.
서명은 다음과 같습니다.
useEffect,, 든 dom DOM 변후 모, 。이를 통해 DOM에서 레이아웃을 읽고 동기적으로 재렌더합니다.「 」내의 되고 .useLayoutEffect브라우저가 페인트를 칠하기 전에 동기식으로 플러시됩니다.
예
수 요소를 해 보겠습니다.div. 에 beneath beneath beneath그 beneath. 하면 .getBoundingClientRect()부모의 키와 상위 속성을 계산한 후 자녀의 상위 속성에 적용합니다.
여기서 사용하는 것이 좋습니다.useLayoutEffectuseEffect이치노
★★★★★★★★★★★★★★★★ useEffect (하는 행동을 : (점프하는 행동을 나타냄)
const Message = ({boxRef, children}) => {
const msgRef = React.useRef(null);
React.useEffect(() => {
const rect = boxRef.current.getBoundingClientRect();
msgRef.current.style.top = `${rect.height + rect.top}px`;
}, []);
return <span ref={msgRef} className="msg">{children}</span>;
};
const App = () => {
const [show, setShow] = React.useState(false);
const boxRef = React.useRef(null);
return (
<div>
<div ref={boxRef} className="box" onClick={() => setShow(prev => !prev)}>Click me</div>
{show && <Message boxRef={boxRef}>Foo bar baz</Message>}
</div>
);
};
ReactDOM.render(<App />, document.getElementById("app"));.box {
position: absolute;
width: 100px;
height: 100px;
background: green;
color: white;
}
.msg {
position: relative;
border: 1px solid red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>★★★★★★★★★★★★★★★★ useLayoutEffect:
const Message = ({boxRef, children}) => {
const msgRef = React.useRef(null);
React.useLayoutEffect(() => {
const rect = boxRef.current.getBoundingClientRect();
msgRef.current.style.top = `${rect.height + rect.top}px`;
}, []);
return <span ref={msgRef} className="msg">{children}</span>;
};
const App = () => {
const [show, setShow] = React.useState(false);
const boxRef = React.useRef(null);
return (
<div>
<div ref={boxRef} className="box" onClick={() => setShow(prev => !prev)}>Click me</div>
{show && <Message boxRef={boxRef}>Foo bar baz</Message>}
</div>
);
};
ReactDOM.render(<App />, document.getElementById("app"));.box {
position: absolute;
width: 100px;
height: 100px;
background: green;
color: white;
}
.msg {
position: relative;
border: 1px solid red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>useDebugValue
경우에 따라서는 특정 값이나 속성을 디버깅해야 할 수도 있지만, 디버깅을 하려면 많은 비용이 드는 작업이 필요할 수 있으며, 이로 인해 성능에 영향을 줄 수 있습니다.
useDebugValueReact DevTools가 열려 있고 관련 후크가 검사될 때만 호출되므로 성능에 영향을 주지 않습니다.
useDebugValueReact DevTools에서 사용자 지정 후크에 대한 레이블을 표시하는 데 사용할 수 있습니다.
개인적으로 이 갈고리를 써본 적은 없지만요.아마 댓글에 있는 누군가가 좋은 예시로 통찰력을 줄 수 있을 것이다.
useImperativeHandle
useImperativeHandle참조에 노출될 속성을 결정할 수 있습니다.컴포넌트가 , '버튼 컴포넌트'를 공개하려고 버튼 컴포넌트는someExposedProperty'이것'은 다음과 같습니다.
[index.tsx]
import React, { useRef } from "react";
import { render } from "react-dom";
import Button from "./Button";
import "./styles.css";
function App() {
const buttonRef = useRef(null);
const handleClick = () => {
console.log(Object.keys(buttonRef.current)); // ['someExposedProperty']
console.log("click in index.tsx");
buttonRef.current.someExposedProperty();
};
return (
<div>
<Button onClick={handleClick} ref={buttonRef} />
</div>
);
}
const rootElement = document.getElementById("root");
render(<App />, rootElement);
[Button.tsx]
import React, { useRef, useImperativeHandle, forwardRef } from "react";
function Button(props, ref) {
const buttonRef = useRef();
useImperativeHandle(ref, () => ({
someExposedProperty: () => {
console.log(`we're inside the exposed property function!`);
}
}));
return (
<button ref={buttonRef} {...props}>
Button
</button>
);
}
export default forwardRef(Button);
useLayoutEffect
는 '아까보다'랑 요.useEffect단, 모든 DOM 변환이 완료된 후에만 기동됩니다.이 기사는 켄트 C에서 온 것이다.Dodds는 이 두 가지에 대해 누구 못지않게 그 차이를 설명합니다.
의 시간 99%의 시간]
useEffect]는 싶은 라고 하다.
나는 이것을 잘 설명하는 예를 본 적이 없고, 나도 아무것도 만들 수 있을지 모르겠다. '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아useLayoutEffect 때useEffect을 사용하다
useDebugValue
의사 선생님들이 이걸 설명하는데 아주 좋은 예시를 보여주시는 것 같아요.사용자 지정 후크가 있고 React DevTools 내에서 후크에 레이블을 붙이려면 다음과 같이 하십시오.
이 문제에 대해 구체적으로 문제가 있다면 코멘트를 하거나 다른 질문을 하는 것이 좋을 것입니다.왜냐하면 적어도 우리가 좀 더 구체적인 문제에 도달할 때까지 여기 사람들이 어떤 것을 넣어도 그냥 문서를 반복하는 것 같기 때문입니다.
useImperativeHandle훅이 제 활용 사례에 큰 도움이 되었습니다.
타사 라이브러리 구성 요소를 사용하는 그리드 구성 요소를 만들었습니다.라이브러리 자체에는 요소의 인스턴스에 액세스하여 사용할 수 있는 기능이 내장된 빅 데이터 계층이 있습니다.
그러나 내 그리드 구성요소에서는 그리드 상에서 작업을 수행하는 방법으로 확장하려고 합니다.또한 그리드 구성요소 외부에서 이러한 방법을 실행할 수 있기를 원합니다.
이것은, 내부에서의 방법을 추가하는 것으로 간단하게 실현할 수 있습니다.useImperativeHandle훅이 되면 부모가 노출되어 사용할 수 있게 됩니다.
그리드 구성요소는 다음과 같습니다.
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import ThirdPartyGrid from 'some-library';
export default forwardRef((props, forwardedRef) => {
const gridRef = useRef(null);
useImperativeHandle(forwardedRef,
() => ({
storeExpandedRecords () {
// Some code
},
restoreExpandedRecords () {
// Some code
},
}));
return (
<div ref={forwardedRef}>
<ThirdPartyGrid
ref={gridRef}
{...props.config}
/>
</div>
);
});
그 후, 부모로부터, 다음의 방법을 실행할 수 있습니다.
import React, { useRef, useEffect } from 'react';
export default function Parent () {
const gridRef = useRef(null);
const storeRecords = () => {
gridRef.current.storeExpandedRecords();
};
useEffect(() => {
storeRecords();
}, []);
return <GridWrapper ref={gridRef} config={{ something: true }} />
};
Imperative Handle 사용
보통 후크에서는 기능 컴포넌트를 forwardRef 예제에 삽입하여 기능 기반 컴포넌트 메서드와 속성을 다른 컴포넌트에 노출시킵니다.
const Sidebar=forwardRef((props,ref)=>{
const [visibility,setVisibility]=useState(null)
const opensideBar=()=>{
setVisibility(!visibility)
}
useImperativeHandle(ref,()=>({
opensideBar:()=>{
set()
}
}))
return(
<Fragment>
<button onClick={opensideBar}>SHOW_SIDEBAR</button>
{visibility==true?(
<aside className="sidebar">
<ul className="list-group ">
<li className=" list-group-item">HOME</li>
<li className=" list-group-item">ABOUT</li>
<li className=" list-group-item">SERVICES</li>
<li className=" list-group-item">CONTACT</li>
<li className=" list-group-item">GALLERY</li>
</ul>
</aside>
):null}
</Fragment>
)
}
//using sidebar component
class Main extends Component{
myRef=createRef();
render(){
return(
<Fragment>
<button onClick={()=>{
///hear we calling sidebar component
this.myRef?.current?.opensideBar()
}}>
Show Sidebar
</button>
<Sidebar ref={this.myRef}/>
</Fragment>
)
}
}
이 질문에 대한 답은 이미 있는 것 같습니다.그래서 저는 useImperativeHandle, useEffect, useLayoutEffect에 대한 제 기사를 공유하고 싶습니다.
useImperativeHandlehook에 대한 예제 기반 기사를 작성했습니다.여기서 확인하실 수 있습니다: 예시로 ImperativeHandle 사용
useEffect hook과 useLayoutEffect hook의 차이를 자세히 설명하는 React의 효과에 대한 기사도 작성했습니다.리액트 효과 초보자 가이드
언급URL : https://stackoverflow.com/questions/57005663/when-to-use-useimperativehandle-uselayouteffect-and-usedebugvalue
'programing' 카테고리의 다른 글
| 웹 팩: html 템플릿에서 이미지 로드 (0) | 2023.04.04 |
|---|---|
| Oracle의 to_char에서 형식이 아닌 문자를 이스케이프하는 가장 좋은 방법은 무엇입니까? (0) | 2023.04.04 |
| 오라클 sid 및 데이터베이스 이름 확인 중 (0) | 2023.04.04 |
| Jackson은 json에 백슬래시를 추가합니다. (0) | 2023.04.04 |
| 요청 간에 Django 메시지가 반복될 수 있습니다(즉, 삭제되지 않음). (0) | 2023.04.04 |