react + react - native 혼합 앱 개발

개발 전 준비
1. 설치 react 의존
프로젝트 에 의존 설치

cnpm install react react-dom --save

cnpm install babel-preset-react --dev

프로필 수정. babelrc:

{
	"presets":["evn","stage-0","react"]
}

2. jsx 설정
웹 팩. config. js 에서 js 를 jsx 로 수정 합 니까?

module:{
	rules:[
		{ test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
	]
}

여기까지 프로젝트 개발 전 준비 작업 이 끝나 면 코드 작성 을 시작 할 수 있 습 니 다.
2. 지식 설명: 함수 구성 요소 와 클래스 구성 요소
3. 함수 구성 요소 와 클래스 구성 요소 의 차이
props 의 사용 에 대해 이 두 가지 구성 요 소 는 몇 가지 차이 가 있 습 니 다.

props 속성의 차이 점 획득

props 속성 값 의 차이 점 읽 기

state 의 사용 에 대해 다음 과 같은 차이 가 있 습 니 다.

클래스 구성 요소 에는 자신의 개인 state (상태 구성 요소 라 고 함) 가 있 고 함수 구성 요소 에는 개인 state (무 상태 구성 요소 라 고 함) 가 없습니다

생명주기 에 대해 다음 과 같은 차이 가 있다.

클래스 구성 요소 에는 자신의 생명주기 함수 가 있 고 함수 구성 요소 에는 없습니다

3.1 props 의 차이 점 가 져 오기
함수 구성 요소 에서 props 를 사용 하려 면 먼저 정의 해 야 합 니 다: 매개 변수 에 props 를 기록 해 야 합 니 다.

function MyCom(props) {
	return <p>{props.name}</p>
}

클래스 구성 요소 에서 props 를 사용 하면 정의 가 필요 없 이 this 를 통 해 직접 가 져 올 수 있 습 니 다.

class MyCom extends React.Component{
	render() {
		return <p>{this.props.name}</p>
	}
}

3.2 읽 기와 쓰기 props 의 차이
props 에 대하 여 둘 다 읽 기 전용 입 니 다.
함수 구성 요소 에서 props 속성 값 은 읽 기 전용 (read only) 입 니 다. 클래스 구성 요소 에서 props 속성 값 은 읽 기 전용 (read only) 입 니 다.
4. 함수 구성 요소 와 클래스 구성 요소 의 사용 장면
하나의 구성 요소 가 개인 데이터 가 필요 하거나 서로 다른 단계 에서 서로 다른 업무 논 리 를 실행 해 야 한다 면 클래스 구성 요 소 를 사용 하 는 것 이 적당 합 니 다.
하나의 구성 요소 가 외부 에서 들 려 오 는 props 에 따라 고정된 페이지 구 조 를 렌 더 링 해 야 한다 면 함수 구성 요 소 를 사용 하 는 것 이 적당 합 니 다.