React의 상태는 구성 요소의 동작 및 렌더링을 제어하는 데이터 또는 속성을 말합니다. 이들은 변이 가능하며 시간이 지남에 따라 변경 될 수 있으므로 리 렌즈가 사용자 인터페이스를 업데이트하도록 트리거합니다. 상태는 대화식 및 동적 웹 응용 프로그램을 만드는 데 중요합니다.
클래스 구성 요소의 상태 관리 :
클래스 구성 요소에서 상태는 this.state 객체를 사용하여 관리됩니다. 생성자의 상태를 초기화하고 this.setState() 사용하여 업데이트 할 수 있습니다. 예는 다음과 같습니다.
<code class="javascript">class ExampleComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } incrementCount = () => { this.setState({ count: this.state.count 1 }); }; render() { return ( <div> <p>Count: {this.state.count}</p> <button onclick="{this.incrementCount}">Increment</button> </div> ); } }</code>기능 구성 요소의 상태 관리 :
기능 구성 요소에서 상태는 React 16.8에 도입 된 useState 후크를 사용하여 관리됩니다. useState 후크를 사용하면 기능 구성 요소에 상태를 추가 할 수 있습니다. 사용 방법은 다음과 같습니다.
<code class="javascript">import React, { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); const incrementCount = () => { setCount(count 1); }; return ( <div> <p>Count: {count}</p> <button onclick="{incrementCount}">Increment</button> </div> ); }</code> 이 예에서 useState 첫 번째 요소가 현재 상태 값 인 배열을 반환하고 두 번째 요소는 업데이트하는 함수입니다.
상태 업데이트 :
this.setState() 사용하여 상태를 업데이트합니다. 객체 나 기능을 인수로 취할 수 있습니다. 객체를 사용할 때 반응은 객체를 현재 상태와 병합합니다. 함수를 사용하면 최신 상태에서 작업 할 수있게되며, 이는 비동기 상태 업데이트에 중요합니다.useState 가 반환 한 함수를 사용하여 상태를 업데이트합니다. 이 기능은 새로운 상태 값을 인수로 받아들이고 상태를 업데이트합니다.setstate와 usestate의 차이점 :
구문 및 사용 :
setState 는 클래스 인스턴스의 메소드이며 이벤트 핸들러에서 사용하는 경우 바인딩해야합니다.useState 배열 파괴로 사용할 수있는 배열을 반환하여보다 간결하고 간단하게 만듭니다.비동기 성질 :
setState 와 useState 에 의해 리턴 된 함수는 비동기입니다. 그러나 setState 상태가 업데이트 된 후 실행할 콜백 기능을 수락 할 수 있지만 useState 이 내장 메커니즘을 제공하지 않습니다. 일반적으로 기능 구성 요소의 상태 변경 후 useEffect 사용하여 부작용을 처리합니다.병합 상태 :
setState 새 상태를 기존 상태와 병합하여 중첩 된 객체 또는 어레이를 업데이트하는 데 도움이됩니다.useState setter 함수는 전체 상태 값을 대체합니다. setCount(prevCount => prevCount 1) 와 같은 기능 업데이트 양식을 사용하여 기능 구성 요소의 상태를 수동으로 병합해야합니다.복잡한 상태 관리를위한 모범 사례 :
.map() , .filter() 및 스프레드 연산자와 같은 메소드를 사용하여 새로운 상태 객체를 만듭니다.수명주기 방법 대 사용률 :
componentDidMount , componentDidUpdate 및 componentWillUnmount 포함됩니다. 데이터 가져 오기, 구독 설정 및 청소와 같은 부작용을 관리하는 데 사용됩니다.useEffect 기능 구성 요소의 모든 수명주기 방법과 동등한 역할을합니다. 모든 렌더링 후, 첫 번째 렌더 후 또는 특정 종속성이 변경된시기에 실행될 수 있습니다. ComponentWillUnmount와 같은 동작을 처리하기 위해 정리 기능을 반환 할 수 있습니다.useeffect의 예 :
<code class="javascript">import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; // Cleanup function return () => { document.title = 'React App'; }; }, [count]); return ( <div> <p>Count: {count}</p> <button onclick="{()"> setCount(count 1)}>Increment</button> </div> ); }</code>재 렌더링에 대한 국가 관리의 영향 :
false 반환하여 불필요한 재 렌즈를 방지하기 위해 shouldComponentUpdate 사용하여 불필요한 재 렌즈를 방지 할 수 있습니다. 기능성 구성 요소에서 React.memo 유사한 목적을 제공하여 소품이 변경되지 않은 경우 리 렌즈를 방지합니다.최적화 기술 :
React.PureComponent 사용하십시오. 그것은 얕은 소품과 상태 비교로 shouldComponentUpdate 구현합니다.React.memo 로 마무리하십시오.useCallback 사용하여 콜백 함수와 useMemo 메모하여 계산 된 값을 메모하여 불필요한 재 계산을 방지합니다.key 소품을 사용하여 응답 한 항목이 변경되었거나 추가되었거나 제거되었는지 식별하십시오.React.lazy and Suspense 사용하십시오.react-window 또는 react-virtualized 와 같은 가상화 라이브러리를 사용하여 눈에 보이는 항목 만 렌더링하십시오.메모 및 USECALLBACK을 통한 최적화의 예 :
<code class="javascript">import React, { useState, useCallback } from 'react'; const ChildComponent = React.memo(function ChildComponent({ onClick }) { console.log('ChildComponent rendered'); return <button onclick="{onClick}">Click me</button>; }); function ParentComponent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount(count 1); }, [count]); return ( <div> <p>Count: {count}</p> <childcomponent onclick="{handleClick}"></childcomponent> </div> ); }</code> 이 예에서는 ChildComponent React.memo 및 useCallback 덕분에 onClick 변경되는 경우에만 다시 렌더링됩니다.
위 내용은 React의 상태는 무엇입니까? 클래스 및 기능 구성 요소에서 상태를 어떻게 관리합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
