>웹 프론트엔드 >JS 튜토리얼 >최고 효과 후크

최고 효과 후크

Susan Sarandon
Susan Sarandon원래의
2024-09-26 07:31:42573검색

Top eact Hooks

React Hooks란 무엇인가요?
Hooks는 기능적 구성 요소에 상태 및 부작용을 관리하는 기능을 제공합니다. 이는 React v16.8에서 처음 소개되었으며 그 이후로 다른 후크가 추가되었습니다. 오늘은 제가 가장 많이 사용하는 후크 TOP 3에 대해 이야기해보겠습니다.

**

  1. useState 후크 ** 구성 요소 내부에 상태 변수를 추가할 수 있습니다.

const [age, setAge] = useState(18)

위는 이 후크를 정의하는 방법에 대한 간단한 예입니다.
useState 후크는 정의된 변수(age)의 초기 상태로 매개변수(18)를 사용하고 두 값의 배열을 제공합니다.

  1. 현재 상태를 반환하는(age)
  2. (setAge)는 다음과 같은 setter 함수입니다. 상태를 업데이트할 수 있습니다.

다음은 setter 기능의 작동 방식입니다.

함수 incrementAge(){
setAge(a => a + 1)
}

이 함수가 호출될 때마다 setter 함수는 마지막 상태를 기반으로 상태를 업데이트합니다.

2. useEffect 후크
이를 통해 구성 요소를 DOM, 네트워크 등 외부 시스템과 동기화할 수 있습니다.

useEffect(() => {
const 연결 = createConnection(serverUrl, roomId);
연결.연결();
반환() => {
연결.연결 해제();
};
}, [serverUrl, roomId]);

useEffect 후크는 함수종속성 배열이라는 2개의 매개변수를 사용합니다. 함수는 함수 뒤에 오는 종속성 배열의 변수가 값이나 상태를 변경할 때만 실행됩니다. 종속성 배열이 비어 있으면 구성 요소가 렌더링될 때마다 함수가 실행됩니다.

이것은 React의 다른 많은 후크 중 두 가지일 뿐이며 가장 일반적이고 다양한 상황에서 가장 유용합니다.

위 내용은 최고 효과 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.