编写react组件最佳实践

我最开端进修react的时刻，看到过各类各样编写组件的方法，不合教程中提出的办法往往有很大年夜不合。当时虽说react这个框架已经十分成熟，然则似乎还没有一种公认精确的应用办法。以前几年中，我们团队编写了很多react组件，我们对实现办法进行了赓续的优化，直到知足。

本文介绍了我们在实践中的最佳实践方法，欲望能对无论是初学者照样有经验的开辟者来说都有必定的赞助。

函数组件(Functional Components)

在我们开端之前，有几点须要解释：

我们是用es6和es7语法
如不雅你不懂得展示组件和容器组件的差别，可以先浏览这篇文┞仿
如不雅你有任何建议、问题或者反馈，可以给我们留言

Class based components 有本身的state和办法。我们会尽可能谨慎的应用这些组件，然则他们有本身的应用处景。

接下来我们就一行一行来编写组件。

导入CSS

import React, { Component } from 'react' 
 
import { observer } from 'mobx-react' 
 
import ExpandableForm from './ExpandableForm' 
 
import './styles/ProfileContainer.css'

我很爱好CSS in JS，然则它今朝照样一种新的思惟，成熟的解决筹划还未产生。我们在每个组件中都导入了它的css文件。

我们还用一个空行来区分本身的依附。

译者注：即第4、5行和第1、2行中心会零丁加行空行。

初始化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，不过我们更爱好这种简洁的方法。我们还会确保默认导出组件的class。

propTypes 和 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, 	
			 1/9    1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　Java反射机制应用实践
            
            引言反射基本p.s: 本文须要读者对反射机制的API有必定程度的懂得，如不雅之前没有接触过的话，建议先看一下官方文档的Quick Start。在应用反射机制之前，起首我们先来看一下若何获取一个对>>>详细阅读


本文标题：编写react组件最佳实践
地址：http://www.17bianji.com/lsqh/35286.html
 1/2    1