다른 유형의 React 구성 요소 (기능적, 클래스)는 무엇입니까?

다른 유형의 React 구성 요소 (기능적, 클래스)는 무엇입니까?

React 구성 요소는 React Application의 빌딩 블록이며 기능 구성 요소 및 클래스 구성 요소의 두 가지 주요 유형으로 분류 할 수 있습니다.

1. 기능 구성 요소 :

   • 처음에 구성 요소를 작성하는 간단한 방법으로 도입 된 기능 구성 요소는 본질적으로 JavaScript 기능입니다.
   • 그들은 소품을 논쟁으로 받아들이고 UI를 설명하기 위해 반응 요소를 반응합니다.
   • 후크가 도입되면 (React 16.8에서 시작) 기능 구성 요소는 상태 및 부작용을 처리하는 능력을 얻어 클래스 구성 요소만큼 강력합니다.

   • 기능 구성 요소의 기본 예는 다음과 같습니다.

      <code class="javascript">function Welcome(props) { return <h1>Hello, {props.name}</h1>; }</code>

2. 클래스 구성 요소 :

   • 클래스 구성 요소는 React.Component 확장하는 ES6 클래스입니다.
   • 그들은 더 복잡한 구문을 가지고 있으며 소품, 상태 및 수명주기 방법에 액세스하기 위해 this 사용해야합니다.
   • 클래스 구성 요소에는 구성 요소의 수명주기를 관리하는 데 사용되는 componentDidMount , componentDidUpdate 및 componentWillUnmount 와 같은 수명주기 방법이 있습니다.

   • 클래스 구성 요소의 기본 예는 다음과 같습니다.

      <code class="javascript">class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }</code>

React의 기능 구성 요소 대 클래스 구성 요소를 언제 사용해야합니까?

기능적 및 클래스 구성 요소 사이의 선택은 주로 사용중인 React 버전과 구성 요소의 특정 요구에 따라 다릅니다.

1. 다음과 같은 경우 기능 구성 요소를 사용하십시오.

   • 당신은 더 간단하고 간결한 구문을 원합니다. 기능 구성 요소는 읽고 쓰기 쉽습니다.
   • REACT 16.8 이상을 사용하고 있으며 상태 관리 및 부작용을위한 후크를 활용할 수 있습니다. useState , useEffect , useContext 등과 같은 후크는 기능적 구성 요소를보다 강력하고 다재다능하게 만듭니다.
   • 클래스 구성 요소에서 오류가 발생할 수있는 this 수명주기 방법을 다루지 않으려 고합니다.
   • 더 테스트 가능하고 리팩터가 더 쉽게 구성 할 수있는 구성 요소를 만들려고합니다.

2. 다음과 같은 경우 클래스 구성 요소를 사용합니다.

   • 고리를 지원하지 않는 이전 버전의 React (REACT 16.8 이전)로 작업하고 있습니다.
   • getDerivedStateFromProps 또는 getSnapshotBeforeUpdate 와 같은 후크로 쉽게 복제 할 수없는 특정 수명주기 방법을 사용해야합니다.
   • 클래스 구성 요소를 사용하여 작성된 기존 코드베이스를 유지하고 있으며 기능 구성 요소로 리팩토링하는 것은 현재 우선 순위 나 실용성이 아닙니다.

현대의 반응 개발에서, 후크를 갖는 기능적 구성 요소는 일반적으로 단순성과 이전에 클래스 구성 요소에 배타적 인 모든 기능을 처리 할 수있는 능력으로 인해 선호됩니다.

기능적 구성 요소와 클래스 구성 요소 간의 상태 관리의 주요 차이점은 무엇입니까?

React의 상태 관리는 후크의 도입으로 크게 발전하여 기능 및 클래스 구성 요소에서 상태가 어떻게 처리되는지에 영향을 미쳤습니다.

1. 수업 구성 요소 상태 :

   • 클래스 구성 요소는 생성자에서 초기화 된 state 객체를 통해 상태를 관리합니다.
   • State는 this.state 및 this.setState() 사용하여 액세스하고 업데이트됩니다.
   • this.setState() 비동기식이며 상태가 업데이트 된 후 실행할 콜백 함수를 수락 할 수 있습니다.

   • 예:

      <code class="javascript">class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count 1 }); } render() { return ( <div> <p>Count: {this.state.count}</p> <button onclick="{this.increment}">Increment</button> </div> ); } }</code>

2. 기능 구성 요소의 상태 :

   • 기능 구성 요소는 useState 후크를 사용하여 상태를 관리합니다.
   • useState 상태 변수를 반환하고 업데이트 할 함수를 반환합니다.
   • 상태에 대한 업데이트는 동기식이며 즉시 업데이트 된 상태를 사용할 수 있습니다.

   • 예:

      <code class="javascript">function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count 1); } return ( <div> <p>Count: {count}</p> <button onclick="{increment}">Increment</button> </div> ); }</code>

주요 차이점은 다음과 같습니다.

• 구문 : 클래스 구성 요소는 this.state 및 this.setState() 사용하고 기능 구성 요소는 useState 와 같은 후크를 사용합니다.
• 비동기 업데이트 : this.setState() 클래스 구성 요소의 비동기 적이지만 useState 의 업데이트는 동기입니다.
• 수명주기 관리 : 클래스 구성 요소는 부작용을 처리하기 위해 수명주기 방법을 사용하는 반면 기능 구성 요소는 동일한 목적으로 useEffect 사용합니다.

클래스 구성 요소에 비해 후크를 사용하여 기능 구성 요소의 성능을 최적화하려면 어떻게해야합니까?

REACT 구성 요소의 성능을 최적화하는 것은 효율적인 응용 프로그램을 구축하는 데 중요합니다. 후크가있는 기능적 구성 요소는 이와 관련하여 클래스 구성 요소에 비해 몇 가지 장점을 제공합니다.

1. useMemo 및 useCallback 과의 회고록 :

   • 기능 구성 요소에서는 useMemo 사용하여 비싼 계산 및 useCallback 메모 화하여 기능을 메모 화 할 수 있습니다. 이것은 값의 재 계산 또는 기능의 재생을 방지함으로써 불필요한 재 렌즈를 방지합니다.

   • useMemo 의 예 :

      <code class="javascript">function MyComponent({ prop }) { const expensiveResult = useMemo(() => computeExpensiveValue(prop), [prop]); return <div>{expensiveResult}</div>; }</code>

   • 클래스 구성 요소에서 동일한 수준의 최적화를 달성하려면 수동 React.memo shouldComponentUpdate 봐야합니다.

2. React.memo 사용하여 불필요한 재 렌더를 피하십시오 :

   • React.memo 기능 구성 요소를 추억화하는 데 사용하여 소품이 변경되지 않은 경우 불필요한 재 렌즈를 방지 할 수 있습니다.

   • 예:

      <code class="javascript">const MyComponent = React.memo(function MyComponent(props) { // Component implementation });</code>

   • 클래스 구성 요소는 PureComponent 또는 shouldComponentUpdate 구현하여 유사한 결과를 달성 할 수 있지만 이러한 방법은 React.memo 보다 유연하지 않습니다.

3. useState 및 useReducer 로 상태 업데이트 최적화 :

   • 기능 구성 요소에서 useCallback 과 함께 useState 및 useReducer 사용하여 콜백이 불필요한 재 렌즈를 유발하지 않도록 할 수 있습니다.

   • useReducer 의 예 :

      <code class="javascript">const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return (  Count: {state.count} <button onclick="{()"> dispatch({ type: 'increment' })}> </button> > ); }</code>

   • 클래스 구성 요소에서 상태 업데이트는 일반적으로 this.setState() 로 관리되며 성능 튜닝 측면에서 덜 효율적일 수 있습니다.

4. useEffect 사용한 수명주기 최적화 :

   • 기능 구성 요소의 useEffect 사용하면 정리 및 종속성 기반 업데이트를 포함한 부작용을 세밀하게 제어 할 수 있습니다.
   • 이는 여러 수명주기 방법을 관리하면 복잡 해져서 잠재적 성능 문제로 이어질 수있는 클래스 구성 요소의 수명주기 방법보다 더 효율적일 수 있습니다.

   • 예:

      <code class="javascript">function MyComponent() { useEffect(() => { // Side effect code here return () => { // Cleanup code here }; }, [/* dependencies */]); // Component implementation }</code>

요약하면, 후크가있는 기능적 구성 요소는 클래스 구성 요소에 비해 성능을 최적화하는보다 유연하고 효율적인 방법을 제공합니다. useMemo , useCallback 및 useEffect 와 같은 후크를 활용하여 개발자는 덜 보일러 플레이트 코드로 더 나은 성능을 달성 할 수 있습니다.

위 내용은 다른 유형의 React 구성 요소 (기능적, 클래스)는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!