저는 Meteor with React를 사용하여 샘플 앱을위한 간단한 분류 플랫폼을 구축하고 있습니다. 필터링 된 검색을 수행하는 동안 간단한 문제가 발생했습니다.상위 데이터 변경시 하위 구성 요소 만 렌더링하는 방법은 무엇입니까?
DB에서 가져온 후 검색 결과를 반환하는 구성 요소가 있습니다. 양식을 보유하고 하위 구성 요소 (예 : SearchResults)에 소품을 전달하는 다른 구성 요소 (Search)가 있습니다.
다음은 코드입니다.
import React from 'react';
import SearchResults from './searchresults.jsx';
const Search = React.createClass({
getInitialState(){
return {name: undefined, brand: undefined, model: undefined, type: undefined};
},
handleSubmit(){
var name = this.refs.name.value;
var brand = this.refs.brand.value;
var model = this.refs.model.value;
var type = this.refs.type.value;
this.setState({name: name, brand: brand, model: model, type: type});
},
render(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<input type="text" ref="name" placeholder="Name"/>
<input type="text" ref="brand" placeholder="Brand"/>
<input type="text" ref="model" placeholder="Model"/>
<input type="text" ref="type" placeholder="Type"/>
<button type="submit" action="submit">Submit Form</button>
</form>
<SearchResults name={this.state.name} model={this.state.model} brand={this.state.brand} type={this.state.type} />
</div>
);
}
});
export default Search;
내가 양식을 제출로 돼있로, 검색 결과가 반환됩니다 무슨 일이 일어나고 있는지
하지만, 이름 및 기타 분야는 상위 구성 요소의 상태로 그대로 상태는 전체 구성 요소의 재 변경 부모 및 자식 구성 요소를 포함하는 하위 집합입니다. 그것이 일어날 것으로 예상되는 방식입니다.
다른 방법이 있는지 알고 싶습니다.
상위 구성 요소의 데이터 변경 내용에 내 하위 구성 요소 만 다시 렌더링하려고합니다.
동의합니다. 그것이 작동해야하는 방법입니다. 문제를 해결할 다른 방법이 있습니까? 자식 구성 요소가 부모의 데이터 변경시 다시 렌더링하기를 원합니다. –
@ nishant-arora, 자식을 다른 구성 요소로 감싸고 처리하십시오 – Yozi
하지만 조숙 한 최적화라고 생각합니다. 상태를 침묵시키려는 시도를하면 응용 프로그램을 혼란스럽게 만들 수 있습니다. 정말 응용 프로그램의 병목 현상입니까? React의 단순성은 디버깅에 유용합니다. 또한 가상 돔은 여러 렌더링을 사용해도 성능을 절약합니다. – Yozi