이 글은 주로 React의 es6 애플리케이션 코드 분석을 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 도움이 필요한 친구들이 참고하여 es6 in React를 더 잘 이해하고 익히는 데 도움이 되기를 바랍니다.
React이든 React-native이든 Facebook에서는 공식적으로 ES6 구문 사용을 권장합니다. 프로젝트에서 사용하지 않은 경우 갑자기 ES6를 배울 시간이 없다면 문제가 발생할 수 있습니다. , 몇 가지 일반적인 사항에 주의하세요. 당분간 작성 방법은 충분하므로 개발에 큰 편리함을 가져다 줄 것입니다. ES6의 매우 간단한 구문을 경험하게 될 것입니다. React에서 es6의 적용을 소개하겠습니다.
import React,{Component} from 'react'; class RepeatArrayextends Component{ constructor() { super(); } render(){ const names = ['Alice', 'Emily', 'Kate']; return ( <p> { names.map((name) =>{return <p>Hello, {name}!</p>;} ) } </p> ); } } export default RepeatArray;
2. ol과 li 구현
import React,{Component} from 'react'; class RepeatLiextends Component{ render(){ return ( <ol> { this.props.children.map((child)=>{return <li>{child}</li>}) } </ol> ); } } class RepeatArray extends Component{ constructor() { super(); } render(){ return ( <p> <RepeatLi> <span>hello</span> <span>world</span> </RepeatLi> </p> ); } } export default RepeatArray;
3. 서버에서 데이터 가져오기
import React,{Component} from 'react'; class UserGistextends Component{ constructor(){ super(); this.state={ username:'', lastGistUrl:'' } } componentWillMount(){ $.get(this.props.source, function(result){ var lastGist = result[0]; //if (this.isMounted()) { this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); //} }.bind(this)); } render(){ return( <p> {this.state.username} .. <a href={this.state.lastGistUrl} >here</a> </p> ); } } class RepeatArrayextends Component{ constructor() { super(); } render(){ return ( <p> <UserGist source="https://api.github.com/users/octocat/gists" /> </p> ); } } export default RepeatArray;
4. STATE 초기화
class Videoextends React.Component{ constructor(props){ super(props); this.state = { loopsRemaining: this.props.maxLoops, }; } }
5 . 분해 스프레드 연산자
를 사용하면 일련의 속성을 하위 구성 요소에 전달하는 것이 더 편리합니다. 다음 예는 className을 제외한 모든 속성을 p 태그에 전달합니다
class AutoloadingPostsGridextends React.Component{ render() { var { className, ...others, // contains all properties of this.props except for className } = this.props; return ( <p className={className}> <PostsGrid {...others} /> <button onClick={this.handleLoadMoreClick}>Load more</button> </p> ); } }
반응 개발을 사용할 때 가장 일반적인 문제는 상위 구성 요소가 하위 구성 요소에 많은 속성을 전달하려고 할 때 문제가 된다는 것입니다
class MyComponentextends React.Component{ //假设MyComponent已经有了name和age属性 render(){ return ( <SubComponent name={this.props.name} age={this.props.age}/> ) } }
확산 연산자를 사용하면 다음을 만들 수 있습니다. 매우 간단합니다
class MyComponentextends React.Component{ //假设MyComponent已经有了name和age属性 render(){ return ( <SubComponent {...this.props}/> ) } }
위 방법은 상위 구성 요소의 모든 속성을 전달하는 것입니다. 일부 속성을 전달할 필요가 없으면 어떻게 되나요? 그것도 아주 간단해요
class MyComponentextends React.Component{ //假设MyComponent有很多属性,而name属性不需要传递给子组件 var {name,...MyProps}=this.props; render(){ return ( <SubComponent {...Myprops}/> ) } }
위 방법에서 가장 일반적으로 사용되는 시나리오는 상위 컴포넌트의 클래스 속성을 특정 요소의 클래스로 별도로 추출해야 하고, 다른 속성은 하위 컴포넌트에 전달해야 한다는 것입니다
6. 구성요소 만들기
import React,{Component} from "react"; class MyComponentextends Component{ //组件内部代码 }
7. 상태 /Props/PropTypes
es6을 사용하면 정적 속성으로 props와 propTypes를 클래스 외부에서 초기화할 수 있습니다.
class MyComponentextends React.Component{} MyComponent.defaultProps={ name:"SunnyChuan", age:22 }; MyComponent.propTypes={ name:React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired };
es7은 클래스에서 직접 변수 표현식을 사용할 수 있도록 지원합니다
class MyComponentextends React.Component{ static defaultProps={ name:"SunnyChuan", age:22 } static propTypes={ name:React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired } }
상태는 다릅니다. 처음 두 개부터 정적이 아닙니다
class MyComponentextends React.Component{ static defaultProps={ name:"SunnyChuan", age:22 } state={ isMarried:false } static propTypes={ name:React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired } }
7. 일반 컨테이너를 빌드할 때 확장 속성이 매우 유용합니다
function App1(){ return <GreetingfirstName="Ben"lastName="Hector"/>; } function App2() { const props = {firstName: 'Ben', lastName: 'Hector'}; return <Greeting {...props} />; }
8. 대신 es6 계산 속성을 사용하세요
this.setState({ [name]:value }) //代替 var partialState = {}; partialState[name] = value; this.setState(partialState);
관련 권장 사항:
설명 React 구성 요소에서 Echarts를 사용하는 올바른 자세
예제 React가 상위 구성 요소를 통해 클래스 이름을 하위 구성 요소에 전달하는 방법에 대한 자세한 설명
위 내용은 React에서 es6을 적용한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!