聊聊React！开始搞组件这事儿，真的头大得很呐。别慌，这个帖子里我会分享一些我自己的理解和实战经验，遇到啥问题，学到哪些新东西，都会跟大家唠唠。记得好好看看，说不定对你也有用。要是你有啥好主意或者建议，就快分享给我~
基于类的组件的使用
编程的话，咱们还是多用类组件！每回导入新东西别忘留空格标边界，看起来整洁点儿。弄完组件记得在构造函数设定状态，这样代码看得明白些。别忘了类头上那个exportdefault，这说明组件可以导出使用~
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import ExpandableForm from './ExpandableForm';
import './styles/ProfileContainer.css';
使用prop-types进行类型检查
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 }
用到了React15.3.0或以上的话，记得把以前的React.PropTypes换成新的prop-types哟。这个新玩意好用又简单，而且可以帮忙确保我们在组件里面传递参数不会出错。讲到给孩子们(子组件)传递东西，这可得小心，特别是看看“我”(this)指向对不对。通常情况下，使用bind方法就好。
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'
}
// ...
}
处理setState的异步特性
React，它偷偷摸摸把你的好几次State变动合在一起搞成一次了，效率那叫一个高！不过得注意State变了可不是马上就能用上的哟。所以，咱怎么才能拿到最新鲜的State？别担心，超级简单！你只需把之前的State值封装起来变成个函数当参数传给setState就得了。
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 })
}
// ...
}
使用装饰器优化组件
你听说过MobX这个玩意儿吗？用这家伙给类组件装修下，控制和观察起来方便多了但得留个心眼！要是input本身就出自React组件之手，可能会意外地自动刷新喔。
this.setState({ expanded: !this.state.expanded });
处理一致性检验的问题
用React做唯一性的检查真挺费时的。别慌，咱加点函数就搞定了！这样代码更清爽，也好修。像这类小部件，基本上没啥状态、属性或者方法。
使用默认参数作为默认props
this.setState(prevState => ({ expanded: !prevState.expanded }))
用React写代码，别忘了给参数赋个默认值，这样看起来舒服些！Babel弄好后，连那些没名字的函数也能用啦～不过要是Babel搞砸了，那可得费点劲儿。
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}
)
}
}
方法组件的局限性
@observer
export default class ProfileContainer extends Component {
虽然咱们不能直接装修，但这个小东西还能当个传声筒，把数值告诉别人。就算灵活性差了点也没事儿，关键是要设计巧妙点儿，照样可以做出既好用又好保养的零件哈~
实战案例分析
做项目的时候，我觉得用组件有点儿费劲，要提速，传数据得流畅，还要方便维护。搞定这几个难题以后，我对React也就更熟了点儿。
class ProfileContainer extends Component {
// Component code
}
export default observer(ProfileContainer)
总结与展望
{ model.name = e.target.value }}
// ^ Not this. Use the below:
onChange={this.handleChange}
placeholder="Your Name"/>
React组件真的好理解多了，实战演练看得让人大开眼界。React越来越厉害，组件也简单好用了不少。希望我的分享能对大家有所帮助，使你们用React得心应手。最后，有没有谁用React组件遇到了什么麻烦事？快来评论区分享下经验。别忘了给我点赞让更多小伙伴看到~
评论0