react组件开发规范总结
开发react也有⼀段时间了，⼀开始的随⼿写，⽣命周期乱⽤，⽆状态组件的不熟悉。现在逐渐规范⼀下，从⽹上各个地⽅copy过来，整理出⼀份⽂档。可能不全，后续还得多提炼总结和完善。
⼀、组件内⽅法书写，先写⽣命周期函数（按执⾏顺序写），再写⾃定义函数。
import React,{ Component } from'react';
class Demo extends Component {
constructor(props,context) {
super(props,context)
this.state = {
//定义state
}
react面试题ref概念
}
componentWillMount () {
}
componentDidMount () {
}
componentWillReceiveProps (nextProps) {
}
shouldComponentUpdate (nextProps,nextState) {
}
componentWillUpdate (nextProps,nextState) {
}
componentDidUpdate (prevProps,prevState) {
}
componentWillUnmount () {
}
yourMethoed1(){
}
yourMethoed2(){
}
render () {
return (
<div></div>
)
}
}
export default Demo;
⼆、事件this绑定放到constrcutor构造函数中
import React,{ Component } from'react';
class Demo extends Component {
constructor(props,context) {
super(props,context)
this.state = {
//定义state
}
this.handlerMethod = this.handlerMethod.bind(this)
}
render () {
return (
<div></div>
)
}
}
export default Demo;
// 不推荐写法：
<div onClick={this.handlerMethod.bind(this)}>do some actions</div>
三、组件⼀定要有prop传⼊类型校验，即要写PropTypes
注意：prop-types是第三⽅的npm包。react16版本后，⾃⼰不再维护PropTypes。因此要引⽤第三⽅的。
import React，{Component} from'react';
import PropTypes from'prop-types';
class App extends Component{
render（）{
return  <div>{this.props.name}</div>
}
}
App. propTypes = {
name: PropTypes.string
}
四、异步获取数据请求放到componentDidMount中
五、尽量不要在钩⼦函数外使⽤setState⽅法，以及setTimeout中，不要在componentWillUpdate/componentDidUpdate/render中执⾏setState, 可能异致死循环。
六、访问真实dom⽅式：refs
<AudioCompoent  ref={(ref) => { Ref = ref; }}/>
// 不推荐
<AudioCompoent  ref="myRef"/>
七、render⽅法内尽量少申明变量
⼋、数据遍历组件的时候要有key属性，但是不要⽤数组下标作为key
render() {
return (
<ul>
{this.state.sort.map((item, index) => {
return <li key={item.name}>
{item.name} <input type=“text”/>// 假定name是唯⼀的
</li> })}
</ul> );
}
九、简单展⽰类型，不涉及到state的组件，⽤function 函数声明式的⽆状态组件。
import React, {PropTypes} from'react'
import {connect} from'react-redux'
const dataType = {
onExpand: PropTypes.func.isRequired,
isOpen: PropTypes.bool
}
const List = ({ onExpand, expanded = false, childred }) =>
<form style={ expanded ? { height: 'auto' } : { height: 0 } }>
{children}
<button onClick={onExpand}>Expand</button>
</form>;
List.propTypes = dataType export default connect(List)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。