React 에서 크로스 구성 요소 배포 상 태 를 상세 하 게 설명 하 는 세 가지 방법
하위 구성 요소 의 상 태 를 가볍게 제어 해 야 한다 면.같은 문제 에 부 딪 히 셨 을 수도 있 습 니 다.
간단 한 예 와 세 가지 복구 방법 을 통 해 그것 을 되 돌아 보 자.앞의 두 가지 방법 은 흔히 볼 수 있 는 방법 이 고,세 번 째 방법 은 그다지 일반적인 방법 이 아니다.
문제
제 뜻 을 보 여 드 리 기 위해 서 간단 한 책 CRUD(번역자 주:추가(Create),조회 읽 기(Retrieve),업데이트(Update),삭제(Delete)화면 을 사용 하 겠 습 니 다.
우 리 는 세 가지 구성 부분 이 있다.
<BookList /> 은 책 과 단추 목록 을 편집 하 는 데 사용 되 는 구성 요소 입 니 다.<BookForm /> 은 책 에 대한 변경 사항 을 저장 하기 위해 두 개의 입력 과 단 추 를 누 릅 니 다.그리고 다른 두 구성 요 소 를 포함 하 는 <BookApp />.그렇다면 우리 의 상 태 는 무엇 일 까?좋 습 니 다.<북 앱/>은 현재 편집 중인 책의 내용 을 추적 하고 식별 해 야 합 니 다.
import React, { Component } from "react";
import { render } from "react-dom";
const books = [
{
title: "The End of Eternity",
author: "Isaac Asimov"
},
//...
];
const BookList = ({ books, onEdit }) => (
<table>
<tr>
<th>Book Title</th>
<th>Actions</th>
</tr>
{books.map((book, index) => (
<tr>
<td>{book.title}</td>
<td>
<button onClick={() => onEdit(index)}>Edit</button>
</td>
</tr>
))}
</table>
);
class BookForm extends Component {
state = { ...this.props.book };
render() {
if (!this.props.book) return null;
return (
<form>
<h3>Book</h3>
<label>
Title:
<input
value={this.state.title}
onChange={e => this.setState({ title: e.target.value })}
/>
</label>
<label>
Author:
<input
value={this.state.author}
onChange={e => this.setState({ author: e.target.value })}
/>
</label>
<button onClick={() => this.props.onSave({ ...this.state })}>
Save
</button>
</form>
);
}
}
class BookApp extends Component {
state = {
books: books,
activeIndex: -1
};
render() {
const { books, activeIndex } = this.state;
const activeBook = books[activeIndex];
return (
<div>
<BookList
books={books}
onEdit={index =>
this.setState({
activeIndex: index
})}
/>
<BookForm
book={activeBook}
onSave={book =>
this.setState({
books: Object.assign([...books], { [activeIndex]: book }),
activeIndex: -1
})}
/>
</div>
);
}
}
render(<BookApp />, document.getElementById("root"));구성 요소 인 스 턴 스 를 만 들 때
우 리 는 어떻게 그것 을 복원 합 니까?
방법 1:제어 모듈
일반적인 방법 은 상 태 를 향상 시 키 고
//...
class BookForm extends Component {
render() {
if (!this.props.book) return null;
return (
<form>
<h3>Book</h3>
<label>
Title:
<input
value={this.props.book.title}
onChange={e =>
this.props.onChange({
...this.props.book,
title: e.target.value
})}
/>
</label>
<label>
Author:
<input
value={this.props.book.author}
onChange={e =>
this.props.onChange({
...this.props.book,
author: e.target.value
})}
/>
</label>
<button onClick={() => this.props.onSave()}>Save</button>
</form>
);
}
}
class BookApp extends Component {
state = {
books: books,
activeBook: null,
activeIndex: -1
};
render() {
const { books, activeBook, activeIndex } = this.state;
return (
<div>
<BookList
books={books}
onEdit={index =>
this.setState({
activeBook: { ...books[index] },
activeIndex: index
})}
/>
<BookForm
book={activeBook}
onChange={book => this.setState({ activeBook: book })}
onSave={() =>
this.setState({
books: Object.assign([...books], { [activeIndex]: activeBook }),
activeBook: null,
activeIndex: -1
})}
/>
</div>
);
}
}
//...
<BookForm /> 의 상 태 를 향상 시 키 는 것 이 옳지 않다.사용자 가'저장'을 누 르 기 전에 <BookApp /> 은 책 에 대한 변경 에 관심 이 없습니다.그러면 왜 자신의 상 태 를 유지 해 야 합 니까?방법 2:동기 state
지금 은 일 을 할 수 있 지만 저 에 게 는
//...
class BookForm extends Component {
state = { ...this.props.book };
componentWillReceiveProps(nextProps) {
const nextBook = nextProps.book;
if (this.props.book !== nextBook) {
this.setState({ ...nextBook });
}
}
render() {
if (!this.props.book) return null;
return (
<form>
<h3>Book</h3>
<label>
Title:
<input
value={this.state.title}
onChange={e => this.setState({ title: e.target.value })}
/>
</label>
<label>
Author:
<input
value={this.state.author}
onChange={e => this.setState({ author: e.target.value })}
/>
</label>
<button onClick={() => this.props.onSave({ ...this.state })}>
Save
</button>
</form>
);
}
}
//...
방법 3:키 가 제어 하 는 구성 요소
그런데 왜 우 리 는 낡은 상 태 를 회수 해 야 합 니까?사용자 가 책 을 선택 할 때마다 새로운 상 태 를 가 진 새로운 인 스 턴 스 가 의미 가 있 지 않 습 니까?
이 를 위해 서 는 React 에 게 오래된 인 스 턴 스 를 사용 하지 않 고 새로운 인 스 턴 스 를 만 드 는 것 을 알려 야 합 니 다.이것 이 바로 키 프로 프 의 용도 다.
//...
class BookApp extends Component {
state = {
books: books,
activeIndex: -1
};
render() {
const { books, activeIndex } = this.state;
const activeBook = books[activeIndex];
return (
<div>
<BookList
books={books}
onEdit={index =>
this.setState({
activeIndex: index
})}
/>
<BookForm
key={activeIndex}
book={activeBook}
onSave={book =>
this.setState({
books: Object.assign([...books], { [activeIndex]: book }),
activeIndex: -1
})}
/>
</div>
);
}
}
//...
무슨 소득 이 있 습 니까?구성 요소 인 스 턴 스 를 다시 사용 하 는 것 은 더 적은 DOM 변 이 를 의미 하 며 더 좋 은 성능 을 의미 합 니 다.따라서 React 가 구성 요소 의 새로운 인 스 턴 스 를 만 들 도록 강제 할 때,우 리 는 추가 적 인 DOM 돌변 을 위해 약간의 비용 을 받 을 것 입 니 다.그러나 이러한 상황 에 대해 서 는 이러한 비용 이 가장 적 고 키 는 변화 가 빠 르 지 않 으 며 구성 요소 가 크 지 않 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
