react组件设计原则_可靠React组件设计的7个准则之终篇

本篇文章重点阐述可测试和富有意义。因水平有限，文中部分翻译可能不够准确，如果你有更好的想法，欢迎在评论区指出。

尽管 组合、复用 和 纯组件 三个准则阅读量不高，不过本着有始有终的原则，当然我个人始终还是觉得此篇文章非常优质，还是坚持翻译完了。本篇是最后 可靠React组件设计 的最后一篇，希望对你的组件设计有所帮助。

———————————————我是一条分割线————————————————

如果你还没有阅读过前几个原则:

可测试和经过测试

经过测试的组件验证了其在给定输入的情况下，输出是否符合预期。

可测试组件易于测试。

如何确保组件按预期工作？你可以不以为然地说：“我通过手动验证其正确性”。

如果你计划手动验证每个组件的修改，那么迟早，你会跳过这个繁琐的环节，进而导致你的组件迟早会出现缺陷。

这就是为什么自动化组件验证很重要：进行单元测试。单元测试确保每次进行修改时，组件都能正常工作。

单元测试不仅涉及早期错误检测。 另一个重要方面是能够验证组件架构是否合理。

我发现以下几点特别重要：

一个不可测试或难以测试的组件很可能设计得很糟糕。

组件很难测试往往是因为它有很多 props、依赖项、需要原型和访问全局变量，而这些都是设计糟糕的标志。

当组件的架构设计很脆弱时，就会变得难以测试，而当组件难以测试的时候，你大概念会跳过编写单元测试的过程，最终的结果就是：组件未测试。

总之，需要应用程序未经测试的原因都是因为设计不当，即使你想测试这样的应用，你也做不到。

案例学习：可测试意味着良好的设计

我们来测试一下 封装章节的两个版本的 组件。

import assert from 'assert';

import { shallow } from 'enzyme';

class Controls extends Component {

render() {

return (

this.updateNumber(+1)}>

Increase

this.updateNumber(-1)}>

Decrease

);

}

updateNumber(toAdd) {

this.props.parent.setState(prevState => ({

number: prevState.number + toAdd

}));

}

}

class Temp extends Component {

constructor(props) {

super(props);