编写React组件项目实践分析


Posted in Javascript onMarch 04, 2018

当我刚开始写React的时候,我看过很多写组件的方法。一百篇教程就有一百种写法。虽然React本身已经成熟了,但是如何使用它似乎还没有一个“正确”的方法。所以我(作者)把我们团队这些年来总结的使用React的经验总结在这里。希望这篇文字对你有用,不管你是初学者还是老手。

开始前:

我们使用ES6、ES7语法如果你不是很清楚展示组件和容器组件的区别,建议您从阅读这篇文章开始如果您有任何的建议、疑问都清在评论里留言 基于类的组件

现在开发React组件一般都用的是基于类的组件。下面我们就来一行一样的编写我们的组件:

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

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

我很喜欢css in javascript。但是,这个写样式的方法还是太新了。所以我们在每个组件里引入css文件。而且本地引入的import和全局的import会用一个空行来分割。

初始化State

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'
 }

 // ...
}

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

如果你使用了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 ( 
   <ExpandableForm 
    onSubmit={this.handleSubmit} 
    expanded={this.state.expanded} 
    onExpand={this.handleExpand}>
    <div>
     <h1>{title}</h1>
     <input
      type="text"
      value={model.name}
      onChange={this.handleNameChange}
      placeholder="Your Name"/>
    </div>
   </ExpandableForm>
  )
 }
}

有多行的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 ( 
   <ExpandableForm 
    onSubmit={this.handleSubmit} 
    expanded={this.state.expanded} 
    onExpand={this.handleExpand}>
    // Newline props if there are more than two
    <div>
     <h1>{title}</h1>
     <input
      type="text"
      value={model.name}
      // onChange={(e) => { model.name = e.target.value }}
      // Avoid creating new closures in the render method- use methods like below
      onChange={this.handleNameChange}
      placeholder="Your Name"/>
    </div>
   </ExpandableForm>
  )
 }
}

方法组件

这类组件没有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

但是,尽量避免使用如下的例子:

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

看起来很现代,但是这个方法是未命名的。

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

匿名方法也会引起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)

条件判断

某些情况下,你会做很多的条件判断:

<div 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>
 }
</div>

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

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

<div 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>
    }
   }

   // ...
  })()
 }
</div>

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

最后

再次,希望本文对你有用。如果你有什么好的意见或者建议的话请写在下面的评论里。谢谢!

Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
Vue formData实现图片上传
Aug 20 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
Vue组件开发技巧总结
Mar 04 #Javascript
代码详解javascript模块加载器
Mar 04 #Javascript
Vue用v-for给src属性赋值的方法
Mar 03 #Javascript
vue中v-for加载本地静态图片方法
Mar 03 #Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 #Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 #Javascript
vue.js select下拉框绑定和取值方法
Mar 03 #Javascript
You might like
php 获取页面中指定内容的实现类
2014/01/23 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
python http基本验证方法
2018/12/26 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Python接口测试get请求过程详解
2020/02/28 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
人事任命书格式
2014/06/05 职场文书
会员卡清退活动总结
2014/08/27 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书