选择系列：在技术开发的过程中，我们会面临各种各样的选择。我们应该如何在不同的情况下选择合适的技术呢？本系列文章旨在解决问题。在React开发的过程中，我们经常会遇到一些选择。下面我会挑选一些我个人认为比较重要的选择来一一分析。但请记住，以下只是建议，可能还有一些方面没有考虑到。还是要根据实际情况选择最合适的，不要跟风。选择一：搭建开发环境在开始React开发之前，你或者你的团队首先要考虑选择什么样的开发环境，先愉快的呈现大众的选择图。对于一般场景，推荐使用create-react-app，可以满足你大部分的开发需求。如果默认配置不能满足您的需求，请运行npmruneject根据需要修改您的配置（提示：此过程不可回滚）。其他选择Gatsby适用于开发静态网站。Next.js适用于前后端同构方案。如果以上都不能满足你的需求，亲，自己动手，丰衣足食吧。选择二：类型JavaScript是一种弱类型语言，你可以忽略类型检查，也可能需要引入类型检查。下图是大众的选择，你会怎么选？如果你懒得折腾，那么prop-types就可以满足你的类型验证，避免大部分类型问题。如果你喜欢折腾和追求完美，有两种选择：TypeScriptJavaScript的超集，最终可以编译成干净整洁的原生JavaScript代码。Flow为Javascript添加静态类型检查，以提高开发人员效率和代码质量。选择3：ES5(createClass)VSES6(class)如果你的开发环境使用ES5语法，那你只能用createCalss了，推荐官方文章《非ES6环境下如何使用React》如果你的开发环境使用ES6语法，强烈推荐使用class，比较好用，Facebook也推荐使用Class，示例代码如下：classSayHelloextendsReact.Component{constructor(props){super(props);this.state={message:'Hello!'};}render(){return(
Say:{this.state.message}
);}}决策4：类VS纯函数如果不需要使用生命周期，尽量使用无状态纯函数尽可能（无状态功能组件：react-v0.14版本添加）。无状态纯函数简单示例：//statelesspurefunction组件，使用ES5varAquarium=function(props){varfish=getFish(props.species);return
{fish};};//statelessPurefunction组件，使用ES2015(ES6)箭头函数：varAquarium=(props)=>{varfish=getFish(props.species);return
{fish};};//或者使用对象解构，默认return，简单：varAquarium=({species})=>(
{getFish(species)});//然后使用：
根据单一职责原则，你的组件应该只有一个职责，内部逻辑尽可能扁平。如果逻辑复杂，那你就得问问自己这个组件是否还需要分解。使用纯函数会让你时刻考虑组件的设计是否合理。总之，纯函数可以帮助您更好地设计组件。底层原子组件应尽可能使用纯函数。对于可重用或更复杂的逻辑，可以考虑提取高价逻辑组件。这并不意味着到处都应该使用纯函数。如果你的组件确实需要状态和生命周期相关的操作，那么使用类。附上同一作者不同观点的两篇文章（英文）：9ReasonstoUseStatelessFunctionalComponentsReactStatelessFunctionalComponents:NineWinsYouMightHaveOverlooked7ReasonsnottoUseStatelessPureFunctionalComponents7ReasonstoOutlawReact’sFunctionalComponents决策5：状态接下来您需要考虑的是如何管理您的状态数据。业界已经有很多解决方案。大众的选择是，如果是简单的WEB应用，React提供的setState()可能完全满足你。只要够用，不要强行加入其他State管理框架。如果是大型WEB应用，个人推荐使用Redux。Redux是JavaScript应用程序的可预测状态管理容器。它可以帮助您编写行为一致、在不同环境（Web客户端、服务器、移动应用程序等）中运行并且易于测试的应用程序。顺便提一下Flux这个框架，Redux借鉴的核心思想之一。如果你有兴趣，可以研究一下。Bobx，一个简单的、可扩展的状态管理库。我还没有使用它，所以我不会详细介绍。选择6：绑定（Binding）一张图就可以搞定，就不多解释了。使用箭头函数绑定的示例代码如下：classSayHelloextendsReact.Component{constructor(props){super(props);this.state={message:'Hello!'};}//使用箭头函数bandinghandleClick=()=>{alert(this.state.message);}render(){return(
Sayhello);}}在构造函数中使用绑定示例代码如下：classSayHelloextendsReact。Component{constructor(props){super(props);this.state={message:'Hello!'};//使用构造函数bandingthis.handleClick=this.handleClick.bind(this);}handleClick(){alert(this．'一一列举。我们选择React开发人员常用的几个选项。大众的选择根据大众的Choose如下图，好像（由于上图人数不详，样本不够，只能说好像）CSS-in-JS是吃掉CSS模块的份额。CoryHouse选择用SASS写代码，用BEM命名就够了，而且他还专注于styled-components。我倾向于逻辑和独立的结构和风格。现阶段我还是用SASS，命名用BEM。最近在讨论比较适合自己的CSS组织和命名方式。以后会有专门的文章(《CSS架构解决方案系列》)，本文就不深入研究了。这里简要列出了如何更好地组织样式的解决方案：OOCSS、SMACSS、BEM、ITCSS、ECSS、SUITCSS、AtomicDesign、Atomic。欢迎补充！选择8：重用逻辑接下来你要面对的是如何重用你的逻辑，编程界的一句名言“不要重复自己”。默默的看大众的选择图React本来是用Mixins的，但是使用mixins会导致一些bug，被认为是有害的（MixinsConsideredHarmful）。高阶组件，不懂的可以阅读以下文章：Facebook官方文档英文高阶组件中文阅读深入理解React高阶组件高阶组件是现在最流行的解决方案，但是你仍然需要了解renderprops，它比高级组件更容易阅读和创建。其实我对renderprops还没有深入的理解和实践过，所以不能给出建议，看你自己的选择了。我现在在用高级组件，不排除以后用renderprops。软件行业永恒不变的主题是“变”。也许会有更合理的解决方案？选择9：目录结构你喜欢所有的组件吗？分享一个文件夹，如下src/|-App.js|-RewarmView.js|-RewarmSearchInput.js|-RewarmImage.js|-RewarmLoading.js|-RewarmError.js|-giphyLoadData.js或者每个组件都有自己的文件夹，基本结构如下src/|-App.js|-RewarmSearch/|-index.js|-View.js|-SearchInput.js|-Image.js|-Loading.js|-Error.js|-loadData.js收起文件夹，是不是看起来很整洁？src/|-App.js|-RewarmSearch/每个组件都在自己的文件夹中。更多细节请阅读WritingScalableReactAppswiththeComponentFolderPatternThe100%correctwaytostructureaReactapp(orwhytherenosuchthingIpersonallyrecommendthateachcomponenthasitsownfolder,whataboutyou?最后，虽然我有6年的前端开发经验，但文章难免有疏漏之处，也可能与你的想法相反，欢迎大家提出建议或发表不同看法。参考?（本篇链接需要翻墙）
