我们编写 React 组件的最佳实践

刚接触 的时候，在一个又一个的教程上面看到很多种编写组件的方法，尽管那时候 框架已经相当成熟，但是并没有一个固定的规则去规范我们去写代码。

在过去的一年里，我们在不断的完善我们的做法，直到满意为止。

本文会列出我们自己在使用的最佳实践，不管你是刚入门的新手还是很有经验的开发者，我们都希望本文对你有所帮助。

开始之前，先列几条：

我们使用ES6/ES7

如果你无法区分页面组件和容器组件，推荐阅读 这篇文章

如果有更好的意见或建议，请在评论区告诉我，谢谢

基于 Class 的组件

基于 Class 的组件是有状态的，不管它包不包含函数，我们都会尽量少用。但是它也有它的用处。

现在来一行一行的编写我们的组件：

导入 CSS

我喜欢 ，但是这个概念还比较新，现在也并没有成熟的解决方案，所以我们在每个组件里面去引用 CSS

初始化 State

当然你也可以选择在构造函数里面去初始化，但是我们觉得这种方式更加清晰。

当然也会保证 Class 是默认导出的。

propTypes 和 defaultProps

propTypes 和 defaultProps 是静态属性，尽可能的把它们写在组件的最上方，以便其他开发者阅读。

如果使用 或更高的版本，使用 prop-types 代替

所有的组件都必须声明 propTypes

函数

使用基于 Class 的组件时，当你传递函数给子组件的时候，要确保他们有正确的 ，通常用这种形式实现

但是如果你使用箭头函数，就不需要

为 setState 传递函数

上面的例子中我们是这么做的：

这里有个 setState 的小知识 —— 它是异步的，为了保证性能， 会分批修改 state，所以 state 不会在调用 setState 之后立即改变

这意味着你不能依赖当前的状态，因为你不知道当前的状态是什么状态

这里有个解决方案 —— 传递函数给 setState， 会把上一个状态 传递给你

解构 Props

像上面的例子一样，每个 prop 都独占一行

装饰器(Decorators)

如果你使用了类似 mobx 的库，你可以这样去装饰你的 Class 组件

修改函数式组件使用 decorators 很灵活并且可读

如果你不想使用装饰器，可以这么做：

闭包

避免像下面注释的地方一样传递新的闭包给子组件：

这种方式的好处是每次render，不会重新创建一个函数，没有额外的性能损失。

这里是完整的组件：

函数式组件

这些组件没有状态和函数，他们很纯，非常容易阅读，尽量多的使用他们。

propTypes

这里我们把 propTypes 写在最前面，他会被组件立即可见，这要归功于JavaScript的

解构 Props 和 defaultProps

我们的组件是一个函数，我们获取他的 props 就是在获取函数的参数值，我们可以直接用 的解构：

我们也可以使用默认参数值去设置 ，就像上面的

避免使用下面的 ES6 语法：

看起来很先（逼）进（格），但这个函数是匿名的。

如果你的Babel设置正确，这个匿名函数不会成为一个问题 —— 但是如果不是的话，任何错误都会显示在 中，这对于调试来说是非常糟糕的。

Wrapping

函数式组件中不能使用 ，你只需把它作为参数传递给过去

这里是完整的组件：

JSX 中的条件判断

你可能会有很复杂的条件判断语句，但是你要避免下面的写法：

嵌套的三元表达式不是一个好的方法，太难阅读了

有一些库可以解决这个问题(jsx-control-statements)，但是我们没有引入其他的库，我们是这么解决的：

我们使用了 立即执行函数 把条件语句写在里面，虽然这样可能会导致性能下降，但是在大多数情况下，它带来的负面影响还是小于糟糕的可读性。

当然如果组件分的足够细，你可能不会用到这么复杂的条件判断。

此外，如果你只在一个表达式里面去渲染组件，避免这么做：

你可以使用短路语法：

总结

这篇文章对你有帮助吗？请在评论区给出你的意见和建议，感谢阅读！

文章来源：https://blog.catwen.cn/2018/01/18/best-practices-for-writing-react-components/

广告内容

关注我们