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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用PDFParser解析PDF中的文字

    咪啪咪啪
  • 小程序批量删除云数据库里的数据

    一看我们就能知道这是写在云函数里的。所以我们批量删除数据库里的数据,必须是通过云函数来实现批量。

    编程小石头
  • Groovy单元测试框架spock基础功能Demo

    最近在做单元测试框架的调研和尝试,目前确定的方案框架包括是:spock,Junit,Mockito以及powermock。由于本身使用Groovy的原因,比较钟...

    八音弦
  • 源码学习系列之SpringBoot自动配置(篇二)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    用户1208223
  • Android 桌面角标二三事

    我们广大用户对于通知消息栏和桌面角标都很熟悉,Google Android 是在 8.0 以后加入的,但是对于部分国内厂商较早就有尝试,和尚今天对桌...

    阿策
  • 开发一个简单的脚手架工具

    像我们熟悉的 vue-cli,create-react-app 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们...

    小皮咖
  • 对于Spring,只会 20%,那也太菜了!

    从事 Java相关开发的朋友,应该没有不知道 Spring的,但是80%的人,只了解 Spring 20%的用法,这也就是大家常说的二八定律。

    Java技术栈
  • 使用ASP.NET Core 3.x 构建 RESTful API - 3.1 资源命名

    之前讲了RESTful API的统一资源接口这个约束,里面提到了资源是通过URI来进行识别的,每个资源都有自己的URI。URI里还涉及到资源的名称,而针对资源的...

    solenovex
  • SpringBoot系列之@Conditional注解用法简介

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    用户1208223
  • 小程序学习路线

    博主从事微信小程序开发已经快一年多了吧,算上业余时间(业余项目)、工作时间(公司项目)。不算试水期,小程序是2016年底开放公测的,当时只是听说有这么个东西,但...

    薛定喵君

扫码关注云+社区

领取腾讯云代金券