通过实例,学习编写 React 组件的“最佳实践”

avatar
。 @。

现在前端程序员都知道,React 是组件化的。当我开始学习 React 的时候,我记得当时已经存在了很多不同编写组件的方式了。如今,React
社区已经愈发成熟,但是对于组件正确编写姿势却没有一个相对完备的指导。

这篇文章仅从作者的观点出发,来谈一谈我们究竟应该如何来写高质量的 React 组件。

在开始前,需要说明以下几个问题:

  • 这篇文章以及代码实例,都采用了 ES6 或者 ES7 的写法;
  • 对于一些基本概念不再进行科普。适合有 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,具体实现其实社区上有很多方案。我的 Github 上 fork 了一份各种 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 })
    }

当然,这并不是唯一做法。实现方式多种多样,我专门有一片文章来对比 React 中对于组件 this 的绑定,可以点击此处参考。

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 能够立刻执行。

关于 React setState 的设计, Eric Elliott 也曾经这么喷过:setState() Gate,并由此展开了多方“撕逼”。作为围观群众,我们在吃瓜的同时,一定会在大神论道当中收获很多思想,建议阅读。

如果你对 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 的目的:

解决思路
解决思路

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

总结

其实所谓 React “最佳实践”,想必每个团队都有自己的一套“心得”,哪里有一个统一套? 本文指出的几种方法未必对任何读者都适用。针对不同的代码风格,开发习惯,拥有自己团队一套“最佳实践”是很有必要的。从另一方面,也说明了 React 技术栈本身的灵活于强大。

另外,这篇文章并不是我原创,而是翻译了Our Best Practices for Writing React Components一文,并在此基础上进行了较大幅度扩展。

如果您对React生态有兴趣,同样推荐我的其他几篇文章:

Happy Coding!

PS:
作者Github仓库知乎问答链接
欢迎各种形式交流。