coolriver

2016-07-30 13:05

React入门心得及使用tips

本文作者: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端的组件生命到此为止,后续再无。

4.4 好用的工具

  • classnames 让你免去拼接类名的烦恼
  • immutablejs 和Redux搭配效果不错,前提是你接受它的写法(必须通过get方法取属性值)
  • redux-thunk 如果你要用Redux,很可能就要用到它
2条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。