React 구성 요소 프로젝트(자세한 튜토리얼)

이 글은 React 컴포넌트 프로젝트 실습을 작성하는 전체 과정을 예제를 통해 공유합니다. 이에 관심이 있는 친구들은 참고할 수 있습니다.

처음 React 작성을 시작했을 때 컴포넌트를 작성하는 방법을 여러 가지 보았습니다. 100개의 튜토리얼을 작성하는 방법에는 100가지가 있습니다. React 자체는 성숙해졌지만 이를 사용하는 "올바른" 방법은 없는 것 같습니다. 그래서 저(저자)는 지난 수년간 우리 팀이 쌓아온 React 사용 경험을 여기에 요약합니다. 이 글이 초보자이시든 베테랑이시든 여러분에게 도움이 되기를 바랍니다.

시작하기 전에:

우리는 ES6 및 ES7 구문을 사용합니다. 디스플레이 구성 요소와 컨테이너 구성 요소의 차이점이 명확하지 않은 경우 이 문서를 읽고 시작하는 것이 좋습니다. 제안 사항이나 질문이 있는 경우 댓글로 메시지를 남겨주세요. 클래스 기반 컴포넌트

요즘 React 컴포넌트는 일반적으로 클래스 기반 컴포넌트를 사용하여 개발됩니다. 다음으로 같은 줄에 구성요소를 작성하겠습니다.

import React, { Component } from 'react';
import { observer } from 'mobx-react';

import ExpandableForm from './ExpandableForm';
import './styles/ProfileContainer.css';

저는 자바스크립트의 CSS를 매우 좋아합니다. 그러나 이러한 스타일 작성 방법은 아직 너무 새로운 것입니다. 그래서 우리는 각 컴포넌트에 CSS 파일을 도입합니다. 또한, 국내 도입 수입품과 글로벌 수입품은 빈 줄로 구분됩니다.

상태 초기화

import React, { Component } from 'react'
import { observer } from 'mobx-react'

import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'

export default class ProfileContainer extends Component {
 state = { expanded: false }

이전 방법을 사용하여 생성자에서 상태를 초기화할 수 있습니다. 더 많은 관련 정보는 여기에서 확인하실 수 있습니다. 그러나 우리는 더 명확한 접근 방식을 선택합니다. constructor里初始化state。更多相关可以看这里。但是我们选择更加清晰的方法。

同时，我们确保在类前面加上了export default。（译者注：虽然这个在使用了redux的时候不一定对）。

propTypes and defaultProps

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'

import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'

export default class ProfileContainer extends Component {
 state = { expanded: false }
 
 static propTypes = {
  model: object.isRequired,
  title: string
 }
 
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }

 // ...
}

propTypes和defaultProps是静态属性。尽可能在组件类的的前面定义，让其他的开发人员读代码的时候可以立刻注意到。他们可以起到文档的作用。

如果你使用了React 15.3.0或者更高的版本，那么需要另外引入prop-types包，而不是使用React.PropTypes。更多内容移步这里。

你所有的组件都应该有prop types。

方法

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'

import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'

export default class ProfileContainer extends Component {
 state = { expanded: false }
 
 static propTypes = {
  model: object.isRequired,
  title: string
 }
 
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }
 handleSubmit = (e) => {
  e.preventDefault()
  this.props.model.save()
 }
 
 handleNameChange = (e) => {
  this.props.model.changeName(e.target.value)
 }
 
 handleExpand = (e) => {
  e.preventDefault()
  this.setState({ expanded: !this.state.expanded })
 }

 // ...

}

在类组件里，当你把方法传递给子组件的时候，需要确保他们被调用的时候使用的是正确的this。一般都会在传给子组件的时候这么做：this.handleSubmit.bind(this)。

使用ES6的箭头方法就简单多了。它会自动维护正确的上下文（this）。

给setState传入一个方法

在上面的例子里有这么一行：

this.setState({ expanded: !this.state.expanded });

setState其实是异步的！React为了提高性能，会把多次调用的setState放在一起调用。所以，调用了setState之后state不一定会立刻就发生改变。

所以，调用setState的时候，你不能依赖于当前的state值。因为i根本不知道它是值会是神马。

解决方法：给setState传入一个方法，把调用前的state值作为参数传入这个方法。看看例子：

this.setState(prevState => ({ expanded: !prevState.expanded }))

感谢Austin Wood的帮助。

拆解组件

import React, { Component } from 'react'
import { observer } from 'mobx-react'

import { string, object } from 'prop-types'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'

export default class ProfileContainer extends Component {
 state = { expanded: false }
 
 static propTypes = {
  model: object.isRequired,
  title: string
 }
 
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }

 handleSubmit = (e) => {
  e.preventDefault()
  this.props.model.save()
 }
 
 handleNameChange = (e) => {
  this.props.model.changeName(e.target.value)
 }
 
 handleExpand = (e) => {
  e.preventDefault()
  this.setState(prevState => ({ expanded: !prevState.expanded }))
 }
 
 render() {
  const {
   model,
   title
  } = this.props
  return ( 
   
    

     
{title}
     
    

   
  )
 }
}

有多行的props的，每一个prop都应该单独占一行。就如上例一样。要达到这个目标最好的方法是使用一套工具：Prettier。

装饰器（Decorator）

@observer
export default class ProfileContainer extends Component {

如果你了解某些库，比如mobx，你就可以使用上例的方式来修饰类组件。装饰器就是把类组件作为一个参数传入了一个方法。

装饰器可以编写更灵活、更有可读性的组件。如果你不想用装饰器，你可以这样：

class ProfileContainer extends Component {
 // Component code
}
export default observer(ProfileContainer)

闭包

尽量避免在子组件中传入闭包，如：

<input
 type="text"
 value={model.name}
 // onChange={(e) => { model.name = e.target.value }}
 // ^ Not this. Use the below:
 onChange={this.handleChange}
 placeholder="Your Name"/>

注意：如果input是一个React组件的话，这样自动触发它的重绘，不管其他的props是否发生了改变。

一致性检验是React最消耗资源的部分。不要把额外的工作加到这里。处理上例中的问题最好的方法是传入一个类方法，这样还会更加易读，更容易调试。如：

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
// Separate local imports from dependencies
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'

// Use decorators if needed
@observer
export default class ProfileContainer extends Component {
 state = { expanded: false }
 // Initialize state here (ES7) or in a constructor method (ES6)
 
 // Declare propTypes as static properties as early as possible
 static propTypes = {
  model: object.isRequired,
  title: string
 }

 // Default props below propTypes
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }

 // Use fat arrow functions for methods to preserve context (this will thus be the component instance)
 handleSubmit = (e) => {
  e.preventDefault()
  this.props.model.save()
 }
 
 handleNameChange = (e) => {
  this.props.model.name = e.target.value
 }
 
 handleExpand = (e) => {
  e.preventDefault()
  this.setState(prevState => ({ expanded: !prevState.expanded }))
 }
 
 render() {
  // Destructure props for readability
  const {
   model,
   title
  } = this.props
  return ( 
   
    // Newline props if there are more than two
    

     
{title}
      { model.name = e.target.value }}
      // Avoid creating new closures in the render method- use methods like below
      onChange={this.handleNameChange}
      placeholder="Your Name"/>
    

   
  )
 }
}

方法组件

这类组件没有state没有props，也没有方法。它们是纯组件，包含了最少的引起变化的内容。经常使用它们。

propTypes

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool
}
// Component declaration

我们在组件的声明之前就定义了propTypes。

分解Props和defaultProps

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'

ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}

function ExpandableForm(props) {
 const formStyle = props.expanded ? {height: 'auto'} : {height: 0}
 return (
  <form style={formStyle} onSubmit={props.onSubmit}>
   {props.children}
   <button onClick={props.onExpand}>Expand</button>
  </form>
 )
}

我们的组件是一个方法。它的参数就是props。我们可以这样扩展这个组件：

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'

ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}

function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? {height: 'auto'} : {height: 0}
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}

现在我们也可以使用默认参数来扮演默认props的角色，这样有很好的可读性。如果expanded没有定义，那么我们就把它设置为false

또한 클래스 앞에 export default를 추가해야 합니다. (번역자 주: redux를 사용할 때는 정확하지 않을 수도 있지만).

propTypes 및 defaultProps

const ExpandableForm = ({ onExpand, expanded, children }) => {

propTypes 및 defaultProps는 정적 속성입니다. 다른 개발자가 코드를 읽을 때 즉시 알 수 있도록 구성 요소 클래스에서 가능한 한 일찍 정의하십시오. 문서 역할을 할 수 있습니다. 🎜🎜React 15.3.0 이상을 사용하는 경우 React.PropTypes를 사용하는 대신 prop-types 패키지를 별도로 도입해야 합니다. 더 많은 콘텐츠가 여기로 이동합니다. 🎜🎜모든 구성 요소에는 소품 유형이 있어야 합니다. 🎜🎜Methods🎜

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'

ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}

function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? {height: 'auto'} : {height: 0}
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}
export default observer(ExpandableForm)

🎜클래스 구성 요소에서 하위 구성 요소에 메서드를 전달할 때 올바른 this를 사용하여 해당 구성 요소가 호출되는지 확인해야 합니다. 이는 일반적으로 하위 구성 요소인 this.handleSubmit.bind(this)에 전달할 때 수행됩니다. 🎜🎜ES6의 화살표 방식을 사용하는 것이 훨씬 간단합니다. 올바른 컨텍스트(this)를 자동으로 유지합니다. 🎜🎜setState에 메소드를 전달🎜🎜위의 예에는 다음 줄이 있습니다. 🎜

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
// Separate local imports from dependencies
import './styles/Form.css'

// Declare propTypes here, before the component (taking advantage of JS function hoisting)
// You want these to be as visible as possible
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}

// Destructure props like so, and use default arguments as a way of setting defaultProps
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? { height: 'auto' } : { height: 0 }
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}

// Wrap the component instead of decorating it
export default observer(ExpandableForm)

🎜setState는 실제로 비동기입니다! 성능을 향상시키기 위해 React는 여러 setState 호출을 함께 호출합니다. 따라서 setState를 호출한 직후에는 상태가 변경되지 않을 수 있습니다. 🎜🎜따라서 setState를 호출할 때 현재 상태 값에 의존할 수 없습니다. 그 가치를 전혀 모르기 때문이다. 🎜🎜해결 방법: setState에 메서드를 전달하고 이 메서드에 매개 변수로 호출하기 전에 상태 값을 전달합니다. 예를 살펴보세요. 🎜

<p id="lb-footer">
 {props.downloadMode && currentImage && !currentImage.video && currentImage.blogText
 ? !currentImage.submitted && !currentImage.posted
 ? <p>Please contact us for content usage</p>
  : currentImage && currentImage.selected
   ? <button onClick={props.onSelectImage} className="btn btn-selected">Deselect</button>
   : currentImage && currentImage.submitted
    ? <button className="btn btn-submitted" disabled>Submitted</button>
    : currentImage && currentImage.posted
     ? <button className="btn btn-posted" disabled>Posted</button>
     : <button onClick={props.onSelectImage} className="btn btn-unselected">Select post</button>
 }
</p>

🎜도움을 주신 Austin Wood에게 감사드립니다. 🎜🎜컴포넌트 분해🎜

<p id="lb-footer">
 {
  (() => {
   if(downloadMode && !videoSrc) {
    if(isApproved && isPosted) {
     return <p>Right click image and select "Save Image As.." to download</p>
    } else {
     return <p>Please contact us for content usage</p>
    }
   }

   // ...
  })()
 }
</p>

🎜 props 줄이 여러 개 있는 경우 각 props는 별도의 줄을 차지해야 합니다. 위의 예와 같습니다. 이 목표를 달성하는 가장 좋은 방법은 Prettier 도구 세트를 사용하는 것입니다. 🎜🎜데코레이터 🎜rrreee🎜mobx와 같은 일부 라이브러리를 알고 있다면 위의 예를 사용하여 클래스 구성 요소를 장식할 수 있습니다. 데코레이터는 클래스 구성 요소를 매개 변수로 전달하는 메서드입니다. 🎜🎜데코레이터를 사용하면 더 유연하고 읽기 쉬운 구성 요소를 작성할 수 있습니다. 데코레이터를 사용하고 싶지 않다면 다음과 같이 할 수 있습니다: 🎜rrreee🎜
클로저🎜🎜다음과 같이 하위 구성 요소에 클로저를 전달하지 않도록 하세요. 🎜rrreee🎜참고: input이 React 구성 요소인 경우 다른 props가 변경되었는지 여부에 관계없이 자동으로 다시 그리기가 트리거됩니다. 🎜🎜일관성 검사는 React에서 리소스를 가장 많이 소모하는 부분입니다. 여기에 추가 작업을 추가하지 마십시오. 위 예제의 문제를 처리하는 가장 좋은 방법은 더 읽기 쉽고 디버그하기 쉬운 클래스 메서드를 전달하는 것입니다. 예: 🎜rrreee🎜메서드 구성 요소 🎜🎜이 유형의 구성 요소에는 상태, 소품 및 메서드가 없습니다. 최소한의 변경 사항을 포함하는 순수한 구성 요소입니다. 자주 사용하십시오. 🎜🎜propTypes🎜rrreee🎜컴포넌트 선언 전에 propTypes를 정의합니다. 🎜🎜Decompose Props and defaultProps🎜rrreee🎜우리 컴포넌트는 메소드입니다. 해당 매개변수는 props입니다. 이 구성 요소를 다음과 같이 확장할 수 있습니다. 🎜rrreee🎜이제 기본 매개 변수를 사용하여 가독성이 좋은 기본 소품 역할을 수행할 수도 있습니다. expanded가 정의되지 않은 경우 false로 설정합니다. 🎜🎜그러나 다음과 같은 예는 사용하지 마십시오. 🎜rrreee🎜는 현대적으로 보이지만 메소드 이름은 없습니다. 🎜

如果你的Babel配置正确，未命名的方法并不会是什么大问题。但是，如果Babel有问题的话，那么这个组件里的任何错误都显示为发生在 a8093152e673feb7aba1828c43532094里的，这调试起来就非常麻烦了。

匿名方法也会引起Jest其他的问题。由于会引起各种难以理解的问题，而且也没有什么实际的好处。我们推荐使用function，少使用const。

装饰方法组件

由于方法组件没法使用装饰器，只能把它作为参数传入别的方法里。

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'

ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}

function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? {height: 'auto'} : {height: 0}
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}
export default observer(ExpandableForm)

只能这样处理：export default observer(ExpandableForm)。

这就是组件的全部代码：

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
// Separate local imports from dependencies
import './styles/Form.css'

// Declare propTypes here, before the component (taking advantage of JS function hoisting)
// You want these to be as visible as possible
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}

// Destructure props like so, and use default arguments as a way of setting defaultProps
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? { height: 'auto' } : { height: 0 }
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}

// Wrap the component instead of decorating it
export default observer(ExpandableForm)

条件判断

某些情况下，你会做很多的条件判断：

<p id="lb-footer">
 {props.downloadMode && currentImage && !currentImage.video && currentImage.blogText
 ? !currentImage.submitted && !currentImage.posted
 ? <p>Please contact us for content usage</p>
  : currentImage && currentImage.selected
   ? <button onClick={props.onSelectImage} className="btn btn-selected">Deselect</button>
   : currentImage && currentImage.submitted
    ? <button className="btn btn-submitted" disabled>Submitted</button>
    : currentImage && currentImage.posted
     ? <button className="btn btn-posted" disabled>Posted</button>
     : <button onClick={props.onSelectImage} className="btn btn-unselected">Select post</button>
 }
</p>

这么多层的条件判断可不是什么好现象。

有第三方库JSX-Control Statements可以解决这个问题。但是与其增加一个依赖，还不如这样来解决：

<p id="lb-footer">
 {
  (() => {
   if(downloadMode && !videoSrc) {
    if(isApproved && isPosted) {
     return <p>Right click image and select "Save Image As.." to download</p>
    } else {
     return <p>Please contact us for content usage</p>
    }
   }

   // ...
  })()
 }
</p>

使用大括号包起来的IIFE，然后把你的if表达式都放进去。返回你要返回的组件。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue 父组件调用子组件方法及事件

vue.js element-ui tree树形控件改iview的方法

javascript实现文件拖拽事件

위 내용은 React 구성 요소 프로젝트(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!