React入门心得及使用tips

IMWeb前端团队

发布于 2019-12-04 16:55:01

4970

发布于 2019-12-04 16:55:01

本文作者：IMWeb coolriver 原文出处：IMWeb社区 未经同意，禁止转载

1 前言

React目前在前端的影响力就不多说了，不管你目前有没有入坑React，估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算，或者刚开始学习React，可以参考一下下面内容。如果你已是React达人，可以绕过（当然也很欢迎指出不足）。本文不是API文档，也不是代码搬运工，只是谈一下学习React的一些心得和Tips

（学习资料，还是推荐官方文档）

2 入坑React的原因

前端的伙伴们都知道，我们的技术氛围十分活跃，要跟进所有新的技术，保持不落伍不是一件容易的事情。所以，我们必须把有限的学习精力花在能持续产生价值的事情上面。作为参考，我本人学习和使用React的原因有以下几点：

好多人都在搞啊，Facebook在维护啊，生态好啊，总不会那么容易过时吧（从众心理）
UI组件组织很爽，在开发时会不自觉地提取组件，再次开发时组织原有组件，效率高。
数据与UI解耦，单向数据流使逻辑清晰，告别jquery时代的混乱。
React的美好蓝图：跨端（React Native）和同构（Server Rending）。后台？终端APP？We can, we up!
业务里新项目已经使用，老项目准备切到React.（最有力的原因。。）

3 转换思维

之前使用Jquery开发和组织项目的同学，如果没有接触过类似mvvm的框架的，在入门React的时，有些思维方式需要转换一下。建议看一下React官方文档：Thinking in React

3.1 模块思维 => 组件思维

先说明一下模块和组件的区别：组件是具有规范接口的模块。说明完毕。模块是拆分应用的基本手段（使用如CommonJS, AMD等模块管理方案），而组件是将模块按照某个体系（组件体系）加以规范，同一体系中的组件可很方便地复用。

在使用React开发的时候，先把应用按层级拆分成组件（不只是模块）。不论组件后续是否能复用，必须也只能做成组件。当组件存在复用的可能时，就考虑把可复用的部分抽离成单独的组件。这会使你的应用层次非常分明，并且可复用性较高。

3.2 面向过程 => 面向数据

React提供了一套很好的UI机制，操作UI的途径是操作数据。所以，在一开始设计应用时，除了按层次拆分组件，下一件要做的事就是要设计应用需要的数据。数据同样也要护照层级设计，并对应到具体组件上。原来通过Jquery选择器操作Dom的方式直接摒弃，通过操作数据的方式改改变组件行为和展示。

初始化操作 => 设置初始化数据（传递props）
默认操作 => 设置默认数据（定义defaultProps ）
改变当前组件行为/展示 => 设置当前组件状态数据（this.setState）
改变其他组件行为/展示 => 执行上层组件的回调，由上导组件修改要改变的组件的数据（props）

3.3 事件循环 => 组件生命周期循环

Jquery组织的应用中，事件响应通常是业务逻辑的集中营。里面会分发和改变应用的各种状态与展示。在React中，应用的状态和行为由数据和组件来管控。以前关注的事件循环，现在只需要关注对应组件的生命周期就行了，可以在生命周期的各个切面里执行你想要的操作。

4 Tips

4.1 使用ES6

反正都要用babel编译jsx了，不妨顺应潮流，把ES6也编译了吧。
javascript是我们的饭碗，是时候提前适应一下升级版的饭碗了。
上上github，看下React相关的项目，你也不想一脸懵逼吧？
注意浏览器兼容性，有时候你可能需要pollifill。

4.2 props和state

props对于组件自己来说是常量，是父组件赋予给自己的，不要尝试要任何地方修改它（身体发肤，受之父母，不敢毁伤，孝之始也）。
state才是组件自己的个性，只和自己组件相关的数据可以放在这里，并且自己可以修改（你有你的个性，但请不要影响他人）。
应用太复杂，数据层级深？管理不易，使用Redux吧。

4.3 生命周期：反省自己的一生

学习组件生命周期的顺序和原理。
注意不要限入无限轮回。有的生命周期（componentWillUpdate）中设置数据可能会让你的组件进入渲染的死循环。什么？还是死循环了？看看你是不是用了什么Mixin或者高阶组件，它们有可能干涉你组件的生命周期。
shouldComponentUpdate 这个生命周期比较重要，性能优化集中在这里。
componentDidMount Server端的组件生命到此为止，后续再无。