React의 상태와 무국적 기능 구성 요소

React : 대화식 사용자 인터페이스를 구축하는 핵심 구성 요소

React는 대화식 사용자 인터페이스를 구축하기위한 인기있는 JavaScript 프론트 엔드 라이브러리입니다. 학습 곡선은 비교적 평평하며, 이는 최근에 많은 관심을 끌었던 이유 중 하나입니다.

학습해야 할 중요한 개념이 많이 있지만 구성 요소는 의심 할 여지없이 React의 핵심입니다. 구성 요소에 대한 깊은 이해는 React 개발 여정을 더 쉽게 할 수 있습니다.

전제 조건

이 튜토리얼은 방금 반응을 배우기 시작했고 구성 요소를 더 잘 이해해야하는 초보자를위한 것입니다. 우리는 구성 요소 기초부터 시작한 다음 구성 요소 패턴과 같은보다 도전적인 개념으로 점차적으로 다이빙 할 것입니다. 클래스 구성 요소 및 기능 구성 요소, 상태 및 무국적 구성 요소, 컨테이너 구성 요소 및 프리젠 테이션 구성 요소와 같은 다양한 구성 요소 범주를 다룹니다.

시작합시다!

구성 요소는 무엇입니까?

구성 요소는 UI의 일부를 설명하는 독립적 인 독립적 인 미니어처 엔티티입니다. 응용 프로그램의 UI는 각각 자체 코드, 구조 및 API를 사용하여 작은 구성 요소로 분할 될 수 있습니다.

예를 들어 Facebook의 웹 응용 프로그램을 보면 상호 연결된 수천 개의 기능이 있습니다. 흥미롭게도 Facebook에는 30,000 개의 구성 요소가 포함되어 있으며 숫자는 증가하고 있습니다. 구성 요소 아키텍처를 사용하면 각 구성 요소에 대해 독립적으로 생각할 수 있습니다. 각 구성 요소는 다른 구성 요소에 어떤 영향을 미치는지 걱정하지 않고 범위 내의 모든 것을 업데이트 할 수 있습니다.

Facebook의 UI를 예로 들어 보면 검색 바가 적합한 구성 요소 후보가됩니다. Facebook의 뉴스 피드는 다른 구성 요소 (또는 많은 하위 구성 요소를 포함하는 구성 요소)를 형성 할 수 있습니다. 검색 바와 관련된 모든 메소드 및 Ajax 호출은이 구성 요소 내에 있습니다.

구성 요소도 재사용 할 수 있습니다. 여러 장소에서 동일한 구성 요소를 사용해야하는 경우 구현하기 쉽습니다. JSX Syntax를 사용하면 표시가 필요한 곳에 부품을 선언 할 수 있습니다.

<code><div>
<br>    현재 수 : {count}<br><hr>
<br>    {/* 구성 요소 재사용의 예*/}<br>            updateCount = {setCount (count 1)}/><br>            updateCount = {setCount (count-1)}/><br>
</div>
<br></code>

소품과 상태

구성 요소에는 데이터가 작동해야합니다. 소품 또는 상태 로 구성 요소와 데이터를 두 가지 방식으로 결합 할 수 있습니다. 소품과 상태 구성 요소가 렌더링되고 작동하는 방법을 결정합니다. 소품부터 시작합시다.

소품을 이해합니다

구성 요소가 일반적인 JavaScript 함수 인 경우 소품은 함수 입력입니다. 이 비유에 따르면, 구성 요소는 입력을 취하고 (소품이라고 함), 처리를 처리 한 다음 일부 JSX 코드를 렌더링합니다.

소품의 데이터는 구성 요소에 액세스 할 수 있지만 React의 철학은 소품이 불변적이고 하향식이어야한다는 것입니다. 이는 상위 구성 요소가 원하는 데이터를 자식 구성 요소에 소품으로 전달할 수 있지만 하위 구성 요소는 소품을 수정할 수 없음을 의미합니다. 따라서 아래와 같은 소품을 편집하려고하면 "읽기 전용에 값을 할당 할 수 없음"오류가 나타납니다. useState() 후크는 다음과 같이 사용됩니다.

 <code>const [count,setCount] = useState(0);<br></code>

그런 다음 setCount() 사용하여 현재 카운트를 얻을 수 있습니다.

클래스 구성 요소

클래스 구성 요소는 기능 구성 요소보다 더 복잡 할 수 있지만 어떤 사람들은이 스타일을 선호합니다.

상위 클래스에서 상속 된 컨텐츠를 전달하기 위해 super() 확장하여 클래스 구성 요소를 만들 수 있습니다.

구성 요소를 정의 할 때 생성자는 선택 사항입니다. 위의 경우, 구성 요소는 상태가 없으며 생성자는 유용한 작업을 수행하지 않는 것 같습니다. 소품.

모범 사례는 모든 클래스 구성 요소에 생성자를 사용하는 것이 좋습니다.

또한 생성자를 사용하는 경우 super() 을 호출해야합니다. 그렇지 않으면 "생성자에서 Super () Call Missing"오류가 발생합니다.

마지막 요점은 후크 또는 this.setState() 사용하여 상태를 업데이트하는 경우 count 및 count 변수를 사용하는 것입니다. useState() 후크는 새 값으로 상태를 업데이트 할 수있는 두 번째 함수를 반환합니다.

 <code>// 这有效<br><br>// 钩子<br>const [count,setCount] = useState(0);<br> setCount(count value);<br><br> // 类组件<br>handleCount(value) {<br>    this.setState({count: this.state.count value});<br> }<br></code>

그런 다음 setCount() 객체를 입력으로 사용합니다. 이전 count 의 이전 값을 1 씩 증가시켜 예상대로 작동합니다. 그러나 문제가 있습니다. 카운트를 100으로 증가시킬 수있는 여러 setState() 가 있으면 1로 업데이트 한 다음 이전에 추가 된 100을 삭제하십시오. setState() 가 비동기식이고 여러 prevState 이전 상태에 대한 참조이며 최신 상태로 보장됩니다. React.memo 후크에 사용됩니다. 이 모든 것이 새로운 반응을 보일 때 약간 혼란 스러울 수 있습니다. 동일한 소품과 상태가 제공 될 때 동일한 결과가 반환되면 구성 요소를 순수한 구성 요소라고합니다. 무국적 구성 요소는 순수한 구성 요소의 훌륭한 예입니다. 입력이 주어지면 렌더링 할 내용을 알고 있기 때문입니다.

 <code>const HelloWorld = ({name}) => (<br></code> {`hi $ {name}`}<br> );<br>

구성 요소가 순수한 경우 PureComponent 로 최적화 할 수 있습니다. 이러한 방법은 React 구성 요소의 업데이트 동작을 변경합니다. 기본적으로 반응 구성 요소는 상태 또는 소품이 변경 될 때 항상 업데이트됩니다. 그러나 memo 사용하는 경우 React는 소품 및 상태에 대한 얕은 비교를 수행하므로 객체의 모든 키/값 쌍을 재귀 적으로 비교하는 대신 객체의 직접 내용을 비교합니다. 따라서 객체 참조 만 비교되며, 이는 상태 나 소품이 수정 된 경우 예상대로 작동하지 않을 수 있습니다.

 <code>// 类组件<br>class MyComponent extends React.PureComponent { // 使用它代替React.Component<br> // ...<br> }<br><br> // 钩子<br>const MyComponent = React.memo(function MyComponent(props) { // 将组件函数包装在React.memo 中<br> // ...<br> });<br></code>

React.memo 는 성능을 최적화하는 데 사용되며 성능 문제가 없으면 사용을 고려해야 할 이유가 없습니다.

마지막 생각

기능 구성 요소와 후크는 일반적으로 클래스 구성 요소보다 훨씬 간단하므로 특수 선호도가 없다면 기능 구성 요소가 최선의 선택입니다.

이 튜토리얼에는 반응의 구성 요소 기반 아키텍처 및 다양한 구성 요소 패턴에 대한 높은 수준의 개요가 있습니다.

이 기사는 업데이트되었으며 Jacob Jackson의 기여도가 포함되어 있습니다. Jacob은 웹 개발자, 기술 작가, 프리랜서 및 오픈 소스 기고자입니다.

위 내용은 React의 상태와 무국적 기능 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!