React 코드 사양

저자: 진학자 링크:https://zhuanlan.zhihu.com/p/21458464출처: 저작권은 작가의 소유임을 알 수 있다.상업 전재는 작가에게 연락하여 권한을 부여받고, 비상업 전재는 출처를 밝혀 주십시오.
컨텐츠 디렉토리:

관련

기초규범

구성 요소 구조

명명규범

jsx 쓰기 규범

eslint-plugin-react

코드의 디자인에 있어 모든 팀은 일정한 코드 규범과 모델을 가지고 있을 수 있다. 좋은 코드 규범은 코드의 가독성을 향상시키고 협업 소통에 편리하며 좋은 모델은 상부 디자인에서 불필요한 버그가 발생하지 않도록 할 수 있다.이 섹션에서는 커뮤니티를 참조하여 React의 규범과 우수한 디자인 모델을 제공할 것입니다.
기초 규범

Es6 통합

구성 요소 파일 이름은 큰 낙타 봉으로 명명

구성 요소 구조의 전체 규칙: **stateless(Function)**는 **Es6 Class*보다 React보다 우선합니다.createClass;쓰기 규칙: 구성 요소 내부 방법의 정의 순서를 규범화합니다
Es6 class 정의 사양:

static방법

constructor

getChildContext

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

clickHandlers+eventHandlers는 onClickSubmit() 또는 onChangeDescription()

Getter methods for render, 예를 들어 GetSelectReason() 또는 GetFooterContent()

render methods예를 들어renderNavigation() 또는renderProfilePicture()

render

Es6 Class가 정의한 구성 요소의 경우

const defaultProps = {
   name: 'Guest'
};
const propTypes = { 
  name: React.PropTypes.string
};
class Person extends React.Component { 
  
  //      
  constructor (props) { 
    super(props);
     //    state 
    this.state = { smiling: false }; 
    //    eventHandler 
    this.handleClick = this.handleClick.bind(this); 
  } 

  //        
  componentWillMount () {}, 
  componentDidMount () {}, 
  componentWillUnmount () {}, 

  // getters and setters 
  get attr() {} 
  // handlers 
  handleClick() {}, 
  // render 
  renderChild() {}, 
  render () {},
}
/** 
  *       
  */
Person.defaultProps = defaultProps;

/** 
  *        propTypes 
  * @type {Object} 
  */
Person.propTypes = propTypes;

명명 규칙

구성 요소 이름: 낙타 봉

속성명칭: 작은 낙타봉

이벤트 처리 함수:handleSomething

사용자 정의 이벤트 속성 이름:onSomething={this.handleSomething}

key: 수조 index를 사용할 수 없고 유일한 id를 구성하거나 사용할 수 없음

구성 요소 방법 이름: 밑줄로 시작하는 이름을 사용하지 마십시오

jsx 쓰기 규범

자폐합

// bad


// good

속성 정렬

// bad

// good

// if props fit in one line then keep it on the same line

반환

// bad
render() {
  return 
     
      
    ;
}

// good
render() { 
  return ( 
     
       
     
  );
}

// good, when single line
render() { 
  const body = hello; 
  return {body};
}

eslint-plugin-react 규범은 eslint-plugin-react 플러그인을 사용하여 강제로 실시할 수 있으며, 규칙과 설정은 볼 수 있습니다.https://github.com/yannickcr/eslint-plugin-react
더 많은react 코드 규범 참고 가능https://github.com/airbnb/javascript/tree/master/react

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

React 코드 사양

좋은 웹페이지 즐겨찾기