React-class component와function component의 차이

1560 단어 React
1、function component:
function aa(props) {
	return 

this is {props.name}

}

2、class component:
class bb extends React.Component {
	render() {
		const { name } = this.props;
		return  

this is {name}

} }

functioncomponent와classcomponent의 차이?
  • 문법이 다른functionalcomponent 문법은 더욱 간단하고props 매개 변수를 입력하여react 세션을 되돌려줍니다.클래스 구성 요소는 React를 계승해야 합니다.Component, 그리고render 방법을 만들어서render에서react 세션을 되돌려줍니다
  • state 상태functioncomponent는 일반적인 함수이기 때문에this를 사용할 수 없습니다.state , setState().이것도 무상태 구성 요소라고 불리는 이유다.그래서 구성 요소가 상태에 필요할 때classcomponent를 사용해야 합니다.
  • 라이프사이클 훅스 생명주기functioncomponent는 생명주기가 없습니다. 모든 생명주기 갈고리 함수는 React에서 나오기 때문입니다.Component. 그래서 하나의 구성 요소가 생명주기 갈고리를 필요로 할 때 우리도classcomponent가 필요합니다..

  • 왜 function component를 사용해야 합니까?functioncomponent와classcomponent에 비해 그렇게 많은 기능이 부족한데 왜 functioncomponet을 사용해야 합니까?
  • function 구성 요소는 읽기와 테스트를 작성하기 쉽다
  • 코드량이 더 적고 손이 쉽다
  • 상태가 없기 때문에 용기와 표현의 분리를 더욱 잘 실현할 수 있고 표현층의 논리만 책임질 수 있으며 복잡한 논리로 인해 상태를 바꾸는 번거로움을 고려할 필요가 없고 코드 복용에 유리하다
  • react팀은 사용을 제창한다

  • class component를 왜 사용합니까?functioncomponent는 좋은 점이 많지만 때때로classcomponent는 대체할 수 없습니다.
  • 용기 구성 요소를 실현해야 할 때, 내부 상태를 바꾸어 구성 요소의 변화를 실현해야 할 때
  • 생명주기 갈고리 함수로 일부 기능을 실현해야 할 때
  • 우리가 성능을 향상시켜야 할 때 성능은 매우 중요한 문제이다. 어떤 때는 구성 요소의 렌더링 횟수를 줄여야 한다. 우리는 구성 요소 내부에서shouldComponentUpdate 방법으로 판단하거나 React를 계승해야 한다.PureComponent 클래스 (자동 호출 shouldComponent Update) 는 state와 props의 얕은 비교를 실현하여 구성 요소가 다시 렌더링되었는지 판단합니다..
  • 좋은 웹페이지 즐겨찾기