React Hooks : 시작하고 직접 구축하는 방법
- Joseph Gordon-Levitt원래의
- 2025-02-10 10:48:09976검색
반응 후크는 기능 구성 요소의 반응 기능을 "고리"할 수있는 특수 함수입니다. 예를 들어, usestate hook를 사용하면 상태를 추가 할 수있는 반면 useeffect를 사용하면 부작용을 수행 할 수 있습니다. 이전에는 부작용이 수명주기 방법을 사용하여 구현되었습니다. 후크를 사용하면 더 이상 필요하지 않습니다.
.
React Hooks는 2018 년 10 월에 개최 된 React 회의에서 처음 발표되었으며 공식적으로 React 16.8에서 제공되었습니다. 이 기능은 여전히 개발 중입니다. 여전히 고리로 마이그레이션되는 여러 React 클래스 기능이 여전히 있습니다. 좋은 소식은 지금 사용할 수 있다는 것입니다. 원하는 경우에도 React 클래스 구성 요소를 사용할 수 있지만이 입문 안내서를 읽은 후에는 원할 것 같지 않습니다.
.
이것은 MyApp 폴더를 만듭니다. 이 폴더로 변경하고 그렇게 개발 서버를 시작하십시오.
기본 브라우저가 열리고 새로운 React 앱이 표시됩니다. 이 튜토리얼의 목적으로 SRC/App.js에 위치한 앱 구성 요소에서 작업 할 수 있습니다.
.
usestate hook
이제 몇 가지 코드를 살펴 보겠습니다. Usestate 후크는 아마도 React와 함께 배송하는 가장 일반적인 후크 일 것입니다. 이름에서 알 수 있듯이 함수 구성 요소에서 상태를 사용할 수 있습니다.
npx create-react-app myapp
.
npx create-react-app myapp
이 코드는 상태에서 보유 된 내용에 따라 문서 제목을 설정합니다. 그러나 양식을 통해 상태 값을 변경하려고 할 때 아무 일도 일어나지 않습니다. 이 문제를 해결하려면 다른 수명주기 방법을 추가해야합니다.
<span>cd myapp </span><span>npm start </span>
정리 코드 추가
<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span> <span>constructor(props) {
</span> <span>super(props);
</span> <span>this.state = {
</span> <span>name: "Agata"
</span> <span>};
</span> <span>this.handleNameChange = this.handleNameChange.bind(this);
</span> <span>}
</span>
<span>handleNameChange(e) {
</span> <span>this.setState({
</span> <span>name: e.target.value
</span> <span>});
</span> <span>}
</span>
<span>render() {
</span> <span>return (
</span> <span><section>
</span> <span><form autoComplete="off">
</span> <span><section>
</span> <span><label htmlFor="name">Name</label>
</span> <span><input
</span> type<span>="text"
</span> name<span>="name"
</span> id<span>="name"
</span> value<span>={this.state.name}
</span> onChange<span>={this.handleNameChange}
</span> <span>/>
</span> <span></section>
</span> <span></form>
</span> <span><p>Hello {this.state.name}</p>
</span> <span></section>
</span> <span>);
</span> <span>}
</span><span>}
</span>
놀랍게도이 코드 의이 후크 버전은 똑같은 일을합니다. 더 깨끗하고 컴팩트합니다. 코드를 고유 한 사용률 선언에 넣는 장점은 코드가 분리되어 있기 때문에 쉽게 테스트 할 수 있다는 것입니다.
.
사용자 정의 후크 를 만들 것입니다.
다음으로 구성 요소 에서이 코드를 대체해야합니다.
<:>
npx create-react-app myapp
코드를 천천히 살펴보고 우리가 만든 모든 변경 사항을 식별하십시오. 꽤 깔끔합니까? 우리의 구성 요소는 훨씬 더 작습니다. <pre class="brush:php;toolbar:false"><span>cd myapp
</span><span>npm start
</span></pre>
<pos>이 튜토리얼의 목적 상, 우리는 고리를 사용하는 구성 요소와 동일한 파일 내에서 기능으로 선언했습니다. 그러나 일반적인 React 프로젝트에는 별도의 파일에 각각의 후크가있는 후크 폴더가 있어야 할 곳이 어디에서나 가져올 수 있습니다. <p>.
<go> 우리는 useforminput, usedocumentitle 및 usewindowresolution 후크를 코드의 주요 논리와 완전히 독립적이기 때문에 외부 NPM 모듈에 포장하는 것까지 갈 수도 있습니다. 우리는 프로젝트의 다른 부분이나 미래의 다른 프로젝트에서 이러한 커스텀 훅을 쉽게 재사용 할 수 있습니다.
<here> 참조의 경우 다음은 다음은 다음과 같습니다
</here></go></p>
<comp> 후크의 구성 요소는 클래스 구성 요소 버전과 똑같이 렌더링하고 동작해야합니다.
<p> </p>
<the> 후크 버전을 클래스 구성 요소 버전과 비교하면 후크 기능이 구성 요소 코드가 30%이상 줄어 듭니다. 재사용 가능한 기능을 NPM 라이브러리로 내보내어 코드를 더 줄일 수도 있습니다.
<look> 다음에 코드에서 다른 사람들의 고리를 어떻게 사용할 수 있는지 살펴 보겠습니다.
<data> 타사 후크를 사용한 데이터 가져 오기
<at> Axios 및 React Hooks를 사용하여 REST JSON API에서 데이터를 가져올 수있는 방법을 살펴 보겠습니다. 집에서 팔로우하는 경우 Axios 라이브러리를 설치해야합니다.
<onent> 구성 요소를 다음과 같이 보이게 변경하십시오
<pre class="brush:php;toolbar:false"><span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span> <span>constructor(props) {
</span> <span>super(props);
</span> <span>this.state = {
</span> <span>name: "Agata"
</span> <span>};
</span> <span>this.handleNameChange = this.handleNameChange.bind(this);
</span> <span>}
</span>
<span>handleNameChange(e) {
</span> <span>this.setState({
</span> <span>name: e.target.value
</span> <span>});
</span> <span>}
</span>
<span>render() {
</span> <span>return (
</span> <span><section>
</span> <span><form autoComplete="off">
</span> <span><section>
</span> <span><label htmlFor="name">Name</label>
</span> <span><input
</span> type<span>="text"
</span> name<span>="name"
</span> id<span>="name"
</span> value<span>={this.state.name}
</span> onChange<span>={this.handleNameChange}
</span> <span>/>
</span> <span></section>
</span> <span></form>
</span> <span><p>Hello {this.state.name}</p>
</span> <span></section>
</span> <span>);
</span> <span>}
</span><span>}
</span></pre>
<the> 우리는 다음 출력을 기대해야합니다
<p> </p>
<to> 더 이상 usestate 및 useffect hooks를 사용할 필요가없는 방식으로 자신의 사용자 정의 후크를 구축하여 위의 코드를 리팩터 할 수 있습니다. 운 좋게도 많은 개발자들이 이미이 퀘스트를 이행하고 프로젝트에 설치할 수있는 패키지로 작업을 게시했습니다. 우리는 Simone Busoli의 Axios-Hooks를 사용할 것입니다. Simone Busoli는 가장 인기있는 것입니다.
<the> 명령을 사용하여 패키지를 설치할 수 있습니다<pre class="brush:php;toolbar:false">npx create-react-app myapp
</pre>
아래에서 axios-hooks를 사용하여 위의 코드를 리팩토링했습니다
<p>
<we> 우리는 코드에서 usestate 및 useffect 훅을 제거했을뿐만 아니라 우리의 추가 뇌전없이 세 가지 새로운 능력을 얻었습니다.
</we></p>
<ing> 로딩 상태를 표시하려면 <span>cd myapp
</span><span>npm start
</span>
<messages messages> 오류 메시지를 표시하려면
<data> 버튼 클릭에서 데이터를 리치하려면
<p>
<is> 여기서 교훈은 바퀴를 재창조하지 않는 것입니다. 구글은 당신의 친구입니다. JavaScript 세계에서 누군가가 이미 당신이 다루려고하는 문제를 해결했을 가능성이 높습니다. </is></p>
<ul> 데모
아래는 우리가 지금까지 달성 한 내용의 라이브 데모입니다.
<li> </li>
<hook> 공식 반응 후크 <li>
<basic> 이것은 일상적인 반응 프로젝트에서 만날 수있는 기본 반응 후크입니다.
</basic>
</li>
<:> usestate : 지역 상태 관리
<: :> useeffect : 수명주기 함수 를 대체합니다
<te te> usecontext : React Context API (소품 드릴링 문제 해결)에서 쉽게 작업 할 수 있습니다.
<li>
<additional> 우리는 프로젝트 요구 사항에 따라 사용해야 할 추가 공식 반응 후크가 있습니다.
</additional>
</li>
<er> usereducer : 복잡한 상태 로직 관리를위한 고급 버전의 usestate. Redux와 매우 유사합니다. </er></te></:></:></hook>
</ul>
<back> usecallback : 캐시 가능한 값을 반환하는 함수를 반환합니다. 입력이 변경되지 않았을 때 불필요한 재 렌즈를 방지하려는 경우 성능 최적화에 유용합니다. <p>
<o> usememo : 메모 화 된 함수에서 값을 반환합니다. Vue에 익숙한 경우 컴퓨팅과 유사합니다
<: :> useref : 구성 요소의 수명 동안 지속되는 돌연변이 가능한 ref 객체를 반환합니다.
<ative> useImperativeHandle : ref. 를 사용할 때 상위 구성 요소에 노출 된 인스턴스 값을 사용자 정의합니다.
<out> uselayouteffect : useeffect와 유사하지만 모든 DOM 돌연변이 후에 동기식으로 발사됩니다.
<ug> usedebugvalue : React Developer Tools에서 사용자 정의 후크에 대한 레이블을 표시합니다.
</ug></out></ative></:></o></p>
<all> 당신은 공식 반응 문서 에서이 고리에 대한 모든 것을 읽을 수 있습니다. <h2>
</h2> 요약
<community> React 커뮤니티는 새로운 React 후크 기능에 긍정적으로 응답했습니다. Awesome-React-Hooks라는 오픈 소스 저장소가 이미 있으며이 저장소에 수백 개의 사용자 정의 반응 후크가 제출되었습니다. 다음은 로컬 스토리지에 값을 저장하기위한 고리 중 하나의 빠른 예입니다.<pre class="brush:php;toolbar:false">npx create-react-app myapp
</pre>
<to> 이와 같은 NPM 또는 원사로 로컬 스토리지 후크를 설치해야합니다.
<p>
예쁜 깔끔한?
<of> 반응 후크의 도입은 큰 스플래시를 만들었습니다. 그것의 파도는 React 커뮤니티를 넘어 JavaScript 세계로 옮겨졌습니다. 후크는 전체 JavaScript 생태계에 혜택을 줄 수있는 새로운 개념이기 때문입니다. 실제로 Vue.js 팀은 최근 Composition API라는 비슷한 것을 발표했습니다.
<talk> 반응 후크와 컨텍스트 API가 주 경영 왕좌에서 Redux를 전복시키는 것에 대한 이야기도 있습니다. 분명히, 후크는 코딩을 훨씬 간단하게 만들었고 새로운 코드를 작성하는 방식이 변경되었습니다. 당신이 나와 같은 경우, 모든 React 구성 요소 클래스를 다시 작성하고 기능 구성 요소 후크로 대체하려는 강한 충동이있을 것입니다.
<this> 이것은 실제로 필요하지 않다는 점에 유의하십시오. React 팀은 React 클래스 구성 요소를 사용하지 않을 계획이 없습니다. 또한 모든 반응 클래스 수명주기 방법이 아직 후크로 가능하지는 않습니다. React 구성 요소 클래스를 조금 더 고수해야 할 수도 있습니다. </this></talk></of></p>
<conf> 기본 반응 후크에 대한 새로운 지식에 대해 충분히 자신감을 느끼면 도전을 남기고 싶습니다. Refactor이 카운트 다운 타이머 클래스를 React 후크를 사용하여 가능한 한 깨끗하고 컴팩트하게 만듭니다.
행복한 코딩, 그리고 당신이 어떻게 켜져 있는지 알려주세요! <pre class="brush:php;toolbar:false"><span>cd myapp
</span><span>npm start
</span></pre>
반응 후크의 FAQ <on>
<p> 반응 후크는 무엇입니까? <s> 반응 후크는 기능 구성 요소에서 반응 상태 및 수명주기 기능을 "연결"할 수있는 기능입니다. 클래스 구성 요소를 작성하지 않고 상태 및 기타 반응 기능을 가능하게하기 위해 React 16.8에 도입되었습니다. </s></p> 왜 React 후크가 도입 되었습니까? <s> 반응 후크가 기능 구성 요소에서 상태로 된 논리의 재사용을 단순화하여 구성 요소 상태 및 부작용을보다 쉽게 관리 할 수 있도록 도입되었습니다. </s><p> React의 기능 구성 요소에서 상태를 어떻게 사용합니까? 후크? <the> usestate 후크를 사용하여 기능 구성 요소에 상태를 추가 할 수 있습니다. 현재 상태 값과 기능을 업데이트 할 함수를 가진 배열을 반환합니다. </the></p> 사용에 사용 된 후크는 무엇입니까? <ect> useeffect 후크를 사용하면 데이터 가져 오기, DOM 조작 등과 같은 기능 구성 요소에서 부작용을 수행하고 이러한 효과를 올바르게 처리 할 수 있습니다. 단일 구성 요소에서 usestate 및 useffect 후크? 예, 단일 기능 구성 요소 내에서 여러 usestate 및 usefect hooks 인스턴스를 사용하여 다른 상태와 효과를 관리 할 수 있습니다. <p> USECONTEXT 후크는 무엇입니까? <on> usecontext 후크는 기능 구성 요소에서 컨텍스트에 액세스하는 데 사용됩니다. 컨텍스트 소비자 구성 요소를 렌더링하지 않고 컨텍스트 값을 소비 할 수 있습니다. 사용자 편집 후크는 무엇을 사용하고 언제 사용해야합니까? <uc> usereducer hook는보다 복잡한 상태 관리를위한 Usestate의 대안입니다. 예측 가능한 방식으로 상태 전환을 관리해야 할 때 유용합니다. <h3> </h3> React에서 사용자 정의 후크를 어떻게 생성합니까? <custom> 내장 후크 또는 기타 사용자 정의 후크를 사용하는 기능을 정의하여 사용자 정의 후크를 만들 수 있습니다. 이러한 사용자 정의 후크는 구성 요소에서 상태의 논리를 캡슐화하고 공유 할 수 있습니다. <p> </p> React에서 후크를 사용하는 규칙은 무엇입니까? <for> 핵심 규칙에는 후크를 사용하는 주요 규칙에는 기능 구성 요소에서만 사용하고 최상위 레벨의 후크를 사용하고 (내부 루프 나 조건부가 아님) 구성 요소의 순서가 다시 렌즈에서 일관성을 유지하는 것이 포함됩니다. > <h3> React Hooks의 성능 고려 사항이 있습니까? <ly> 올바르게 사용하면 React Hooks는 불필요한 재 렌즈를 줄임으로써 성능을 향상시킬 수 있습니다. 그러나 필요한 경우 성능을 최적화하기 위해 USEMEMO 및 USECALLBACK 후크를 사용해야합니다.</ly>
</h3></for></custom></uc></on></p></ect></on></conf></to></community></all></back></data></messages></ing></the></to></the></onent></at></data></look></the></comp></pos>위 내용은 React Hooks : 시작하고 직접 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!