프론트엔드 프레임워크 React_javascript 기술에 대한 심층 토론

요약:

최근 회사에서 앱에 중첩된 애플리케이션을 만들 예정이고, 뷰 개발을 위해 Facebook의 반응을 활용하는 것을 고려하고 있어서 조사를 좀 했습니다. 다음은 개발 중에 겪은 함정입니다. 도움이 되기를 바랍니다.

프로젝트 주소: https://github.com/baixuexiyang/react
문제:https://github.com/baixuexiyang/react/issues

스타앤포크에 오신 것을 환영합니다!

리액트의 장점:

•언제든지 애플리케이션이 어떤 모습이어야 하는지 표현하기만 하면 기본 데이터가 변경되면 React가 모든 사용자 인터페이스 업데이트를 자동으로 처리합니다.

•데이터 변경 후 React는 "새로고침" 버튼을 클릭하는 것과 개념적으로 유사하지만 변경된 부분만 업데이트됩니다.

•React는 재사용 가능한 구성 요소를 구축하고, 코드 재사용, 테스트 및 문제 분리를 더 쉽게 만드는 것입니다.

참고:

1. 로드된 구성 요소의 첫 글자를 대문자로 표시합니다. 예:
2. 각 구성 요소의 가장 바깥쪽 렌더링 레이어에는 래핑 요소가 있어야 합니다.

3.this.props는 수정이 불가능하지만, this.state는 수정이 가능합니다

4. 페이지 oclick 이벤트가 iOS의 Safari에서 작동하지 않습니다. onClick={this.detail.bind(this, item)}은 jQuery의 바인딩 이벤트와 같은 다른 방법을 사용해야 합니다

5.문자열을 html로 변환, 위험하게SetInnerHTML={{__html: ''}}

6.getInitialState: 구성 요소가 마운트되기 전에 한 번 호출됩니다. 반환 값은 this.state의 초기 값으로 사용됩니다.

getDefaultProps: 구성 요소 클래스가 생성될 때 한 번 호출되고 반환 값이 캐시됩니다. 상위 구성 요소가 props에 키를 지정하지 않으면 여기에 반환된 객체의 해당 속성이 this.props에 병합됩니다(속성을 검색하는 데 사용).

이 메소드는 인스턴스가 생성되기 전에 호출되므로 this.props에 의존할 수 없습니다. 또한 getDefaultProps()에서 반환된 복잡한 개체는 인스턴스별로 복사본을 갖는 대신 인스턴스 간에 공유됩니다.

구성 요소 수명 주기:

구성요소WillMount：

서버와 클라이언트 모두 초기 렌더링 실행 직전에 한 번만 호출됩니다.

컴포넌트DidMount:

초기 렌더링 실행 직후 한 번 호출되며, 클라이언트측에서만 유효합니다(서버측에서는 호출되지 않습니다).

컴포넌트WillReceiveProps:

구성요소가 새 소품을 수신하면 호출됩니다. 이 메서드는 초기 렌더링 중에는 호출되지 않습니다.

shouldComponentUpdate：

렌더링 전 새로운 props나 상태를 받은 후 호출됩니다. 이 메서드는 렌더링을 초기화할 때나 forceUpdate 메서드를 사용할 때 호출되지 않습니다.

새 prop과 상태로 인해 구성 요소가 업데이트되지 않는다고 판단되면 여기에 false를 반환해야 합니다.

구성요소WillUpdate：

새로운 props나 state를 받기 직전에 호출됩니다. 이 메서드는 초기 렌더링 중에는 호출되지 않습니다.

구성요소DidUpdate:

구성요소의 업데이트가 DOM에 동기화된 후 즉시 호출됩니다. 렌더링을 초기화할 때는 이 메서드가 호출되지 않습니다.

컴포넌트WillUnmount：

DOM에서 구성 요소가 제거되면 즉시 호출됩니다.

요약:

React를 이용해 개발을 하면 모든 html이 js 파일로 작성되기 때문에 개발이 그다지 원활하지 않습니다. 크롬 플러그인 추천: React Developer Tools

React에 대한 몇 가지 오해가 있습니다. 여기에 요약해 보겠습니다.

React는 기껏해야 MVC의 V(View)라고 볼 수 있습니다. 심지어 React도 MVC 개발 모델을 완전히 인식하지 못합니다. React의 서버측 렌더링 기능은 핵심 시작점이 아니라 금상첨화로 간주될 수 있습니다. 실제로 공식 React 웹사이트에서는 서버측 애플리케이션에 대해 거의 언급하지 않습니다.

어떤 사람들은 React를 Web Component와 비교하지만 두 가지가 완전히 경쟁적이지는 않습니다. React를 사용하여 실제 Web Component를 개발할 수 있습니다.

React는 새로운 템플릿 언어가 아닙니다. JSX는 단지 표현일 뿐입니다.

위 내용은 프론트엔드 프레임워크 React에 대한 모든 지식입니다. 마음에 드셨으면 좋겠습니다.