专栏首页IMWeb前端团队React入门心得及使用tips

React入门心得及使用tips

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,很可能就要用到它

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React入门心得及使用tips

    React目前在前端的影响力就不多说了,不管你目前有没有入坑React,估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算,或者刚开始学习Re...

    IMWeb前端团队
  • Lego组件平台开发(一)

    然后,在任何产品的上线过程中,谁都不愿意重复早轮子,都希望能通过一些规范和标准统一起来,后续就完全按照这个标准执行,并能否把历史上实现过的沉淀出来的直接使用,不...

    IMWeb前端团队
  • React + Redux 组件化方案

    React + Redux 组件化方案 在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。 Why React 理想中的组件化,第一步应该...

    IMWeb前端团队
  • React入门心得及使用tips

    React目前在前端的影响力就不多说了,不管你目前有没有入坑React,估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算,或者刚开始学习Re...

    IMWeb前端团队
  • React 新手笔记

    团队的技术栈是 React saga + tcff(内部开源的框架,类似 dva)+ tea(内部开源的 UI 框架)

    kmokidd
  • 【腾讯轻舟Raft】后台组件的治理思路

    | 导语 腾讯轻舟平台(RAFT,Rapid Application Framework of Tencent)是一个致力于组件治理,为创新型应用提供“端云一...

    腾讯大讲堂
  • beeshell:开源的 React Native 组件库

    beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下...

    美团技术团队
  • 如何搭建一个完美的组件库?

    如何做一个组件库?本篇文章不会讲一个小的组件如何设计,而是会整体讲一个“逼近完美”的组件库是怎么设计的。

    lucifer210
  • 「vue基础」手把手教你编写 Vue 组件(下)

    如果你以前使用过React,那么你已经熟悉了组件相关的生命周期的概念。所谓的组件生命周期,就如同人一般从出生到消亡一样,有几个关键的阶段,在这几个关键的阶段,我...

    前端达人
  • 说一句最好的Flutter开源项目也不过分

    老孟导读:首先声明此项目不是我完成的,是大神`张风捷特烈`呕心沥血之作,对初学者有极大对帮助,当然我获得了大神`张风捷特烈`的授权,所以我不是盗版哦。

    老孟Flutter

扫码关注云+社区

领取腾讯云代金券