React

基于 Class 的组件最佳实践（Class Based Components）

基于 Class 的组件是状态化的，包含有自身方法、生命周期函数、组件内状态等。最佳实践包括但不限于以下一些内容：

1）引入 CSS 依赖 （Importing CSS）

我很喜欢 CSS in JavaScript 这一理念。在 React 中，我们可以为每一个 React 组件引入相应的 CSS 文件，这一“梦想”成为了现实。在下面的代码示例，我把 CSS 文件的引入与其他依赖隔行分开，以示区别：

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

当然，这并不是真正意义上的 CSS in JS，具体实现其实社区上有很多方案。

2）设定初始状态（Initializing State）

在编写组件过程中，一定要注意初始状态的设定。利用 ES6 模块化的知识，我们确保该组件暴露都是 “export default” 形式，方便其他模块（组件）的调用和团队协作。

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

3）设定 propTypes 和 defaultProps

propTypes 和 defaultProps 都是组件的静态属性。在组件的代码中，这两个属性的设定位置越高越好。因为这样方便其他阅读代码者或者开发者自己 review，一眼就能看到这些信息。这些信息就如同组件文档一样，对于理解或熟悉当前组件非常重要。

同样，原则上，你编写的组件都需要有 propTypes 属性。如同以下代码：

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

Functional Components 是指没有状态、没有方法，纯组件。我们应该最大限度地编写和使用这一类组件。这类组件作为函数，其参数就是 props, 我们可以合理设定初始状态和赋值。

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

4）组件方法（Methods）

在编写组件方法时，尤其是你将一个方法作为 props 传递给子组件时，需要确保 this 的正确指向。我们通常使用 bind 或者 ES6 箭头函数来达到此目的。

export default class ProfileContainer extends Component {
    state = { expanded: false }
    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 })
    }

5）setState 接受一个函数作为参数（Passing setState a Function）

在上面的代码示例中，我们使用了：

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

这里，关于 setState hook 函数，其实有一个非常“有意思”的问题。React 在设计时，为了性能上的优化，采用了 Batch 思想，会收集“一波” state 的变化，统一进行处理。就像浏览器绘制文档的实现一样。所以 setState 之后，state 也许不会马上就发生变化，这是一个异步的过程。

这说明，我们要谨慎地在 setState 中使用当前的 state，因为当前的state 也许并不可靠。
为了规避这个问题，我们可以这样做：

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

我们给 setState 方法传递一个函数，函数参数为上一刻 state，便保证setState 能够立刻执行。

6）合理利用解构（Destructuring Props）

这个其实没有太多可说的，仔细观察代码吧：我们使用了解构赋值。除此之外，如果一个组件有很多的 props 的话，每个 props 应该都另起一行，这样书写上和阅读性上都有更好的体验。

export default class ProfileContainer extends Component {
    state = { expanded: false }
    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>
        )
    }
}

7）使用修饰器（Decorators）

这一条是对使用 mobx 的开发者来说的。如果你不懂 mobx，可以大体扫一眼。
我们强调使用 ES next decorate 来修饰我们的组件，如同：

@observer
export default class ProfileContainer extends Component {  }

使用修饰器更加灵活且可读性更高。即便你不使用修饰器，也需要如此暴露你的组件：

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

8）闭包（Closures）

一定要尽量避免以下用法：

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

不要：

onChange = {(e) => { model.name = e.target.value }}

而是：

onChange = {this.handleChange}

原因其实很简单，每次父组件 render 的时候，都会新建一个新的函数并传递给 input。
如果 input 是一个 React 组件，这会粗暴地直接导致这个组件的 re-render，需要知道，Reconciliation 可是 React 成本最高的部分。

另外，我们推荐的方法，会使得阅读、调试和更改更加方便。

9）JSX中的条件判别（Conditionals in JSX）

真正写过 React 项目的同学一定会明白，JSX 中可能会存在大量的条件判别，以达到根据不同的情况渲染不同组件形态的效果。
就像下图这样：

返例

这样的结果是不理想的。我们丢失了代码的可读性，也使得代码组织显得混乱异常。多层次的嵌套也是应该避免的。

针对于此，有很对类库来解决 JSX-Control Statements 此类问题，但是与其引入第三方类库的依赖，还不如我们先自己尝试探索解决问题。

此时，是不是有点怀念if...else？
我们可以使用大括号内包含立即执行函数IIFE，来达到使用 if...else 的目的：

解决思路

当然，大量使用立即执行函数会造成性能上的损失。所以，考虑代码可读性上的权衡，还是有必要好好斟酌的。
我更加建议的做法是分解此组件，因为这个组件的逻辑已经过于复杂而臃肿了。