클래스 구성 요소에 비해 반응 기능 구성 요소의 장점은 다음과 같습니다. 1. 기능 구성 요소 구문이 더 짧고 단순하여 개발, 이해 및 테스트가 더 쉽습니다. 2. 기능 구성 요소는 필요하지 않기 때문에 성능 소비가 적습니다. 인스턴스를 생성하고, 렌더링 시 실행하고, 반환된 반응 요소를 가져온 후 모든 중간 요소를 직접 파괴합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
1. 클래스 구성 요소
클래스 구성 요소는 이름에서 알 수 있듯이 ES6 클래스 형식으로 작성됩니다. 이 클래스는 React.Component를 상속해야 합니다.
상위 구성 요소가 전달한 매개 변수에 액세스하려면 , this.props를 통해 액세스할 수 있습니다
렌더링 메소드는 컴포넌트에서 구현되어야 하며 다음과 같이 React 객체가 반환됩니다.
class Welcome extends React.Component { constructor(props) { super(props) } render() { return <h1>Hello,{this.props.name}</h1> }
2. 함수 컴포넌트
Function 컴포넌트는 이름은 함수를 통해 작성됩니다. 양식으로 React 구성요소를 구현하는 것은 React에서 구성요소를 정의하는 가장 간단한 방법입니다
function Welcome(props) { return <h1>Hello,{props.name}</h1>; }
함수의 첫 번째 매개변수는 props이며 상위 구성요소가 전달한 매개변수를 받는 데 사용됩니다
세 가지. 차이점
두 가지 유형의 React 구성 요소의 차이점은 크게 다음과 같은 방향으로 나뉩니다.
1. 쓰기 형식
둘 사이의 가장 확실한 차이점은 쓰기 형식입니다. 동일한 함수의 구현은 각각 클래스 컴포넌트와 함수 컴포넌트의 작성 형태에 해당될 수 있습니다.
함수 컴포넌트:
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
클래스 컴포넌트:
cass Welcome extends React.Component { constructor(props) { super(props) } render() { return <h1>Hello,{this.props.name}</h1> } }
2. Hooks가 나오기 전에 함수 컴포넌트는 상태 비저장 구성 요소이며 클래스 구성 요소에서 setState를 호출하는 것과 달리 구성 요소의 상태를 저장할 수 없습니다
상태를 관리하려면 다음과 같이 useState를 사용할 수 있습니다.const FunctionalComponent=()=> { const [count, setCount]=React.useState(0); return ( <div> <p>count: {count}</p> <button onClick= {()=> setCount(count + 1)}>Click</button> </div>); };
3. Lifecycle
이러한 수명 주기가 없기 때문입니다. 후크는 상속된 React.Component에서 나옵니다
따라서 라이프사이클을 사용하는 경우 클래스 컴포넌트만 사용할 수 있습니다그러나 함수 컴포넌트는 useEffect를 사용하여 교체 라이프사이클을 완료할 수도 있습니다.const FunctionalComponent=()=> { useEffect(()=> { console.log("Hello"); } , []); return <h1>Hello,World</h1>; };
const FunctionalComponent=()=> { React.useEffect(()=> { return ()=> { console.log("Bye"); }; } , []); return <h1>Bye,World</h1>; };
// 你的代码 function SayHi() { return <p>Hello, React</p> } // React内部 const result = SayHi(props) // <p>Hello, React</p>
5. 렌더링된 값
먼저 예를 들어보세요해당 함수 컴포넌트는 다음과 같습니다.// 你的代码 class SayHi extends React.Component { render() { return <p>Hello,React</p> } } // React内部 const instance = new SayHi(props) // SayHi {} const result = instance.render() // <p>Hello, React</p>
function ProfilePage(props) { const showMessage=()=> { alert('Followed '+ props.user); } const handleClick=()=> { setTimeout(showMessage, 3000); } return (<button onClick= { handleClick } >Follow</button>) }
두 구성 요소 모두 장점과 단점이 있습니다. 함수 구성 요소 구문이 더 짧고 단순하여 개발, 이해 및 테스트가 더 쉬운 반면 클래스 구성 요소는 이
클래스의 과도한 사용으로 인해 혼란스러울 수 있습니다. 클래스 구성 요소는 클래스 구성 요소의 인스턴스를 생성해야 하며 소멸될 수 없기 때문에 구성 요소 소비가 상대적으로 큽니다. 기능적 구성요소는 인스턴스를 생성할 필요가 없고, 렌더링 시 실행되며, 반환된 반응 요소를 가져온 후 모든 중간 구성요소가 직접 파괴되기 때문에 성능 소비가 낮습니다.
【관련 추천:Redis 비디오 튜토리얼
】위 내용은 클래스 구성 요소에 비해 반응 기능 구성 요소의 장점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!