从第一次接触React到现在已经过去了将近10个月的时间,当初对于前端知识的薄弱性让我很生硬地才接受了React的一些思想和方法,最近因为找实习的时候学长推荐我先看看redux,我觉得官方文档给我的灌输太难接受了,所以还是翻出了当初入门的教程,这篇教程是博主翻译Microsoft的印度裔前端工程师kirupa的博客,内容由浅入深,加上了这位小哥的个人理解之后使React非常通熟易懂,并且我惊喜得发现其中有一些高级教程适合现阶段看,下面是这次学习中的知识点整理
React简介
多页应用的问题
- 原页面完全杯销毁
- 体验非常不好,速度很慢
- 无法保存用户数据
单页应用(SPA)
- 用户和应用程序交互时只需要改变部分页面
- 体验更佳流畅,视觉元素可以更好过渡
单页应用的问题
- 大部分时间会花在保持数据与 UI 同步上
- DOM 操作很慢很慢
- 处理 HTML 模板会很痛苦
React孕育而生
- 自动化的 UI 状态管理:只需关注UI所处的最终状态
- 虚拟DOM 操作:React 通过比较虚拟 DOM 和真实 DOM 之间的差别,查明哪个改变很重要,然后在一个称为 Reconciliation 的过程中作出最少量的 DOM 改变,以确保一切保持最新。
- 多组件:用来创建真正可组合 UI 的 API
- JSX语法:完全在 JavaScript 中定义 UI
- 只关心View:只是 MVC 架构中的 V
创建第一个React应用
JSX被转译成 HTML 和 JS 的两种方法
围绕 Node 以及一些构建工具(比如 Webpack)来设置开发环境。在这种环境中,每次执行构建时,所有 JSX 被自动转换为 JS,放在磁盘上,让我们可以像标准 JavaScript 文件一样引用。
让浏览器在运行时自动将 JSX 转换为 JavaScript。我们直接像 JavaScript 一样用 JSX,浏览器负责剩下的转换。——需要引入babel
深层组件的数据传递
拓展运算符{…props}
1 | var Display = React.createClass({ |
处理事件
SyntheticEvent
e
组件的生命周期
生命周期方法:
- componentWillMount
- componentDidMount
- componentWillUnmount
- componentWillUpdate
- componentDidUpdate
- shouldComponentUpdate
- componentWillReceiveProps
另外还有三个非周期方法:
- getInitialState
- getDefaultProps
- render
生命周期分为四种变化
- 初始渲染阶段
- 更新阶段
- 处理prop 改变
- 卸载阶段
React Router
Link是React Router的组件,它与a相似,但提供更多的功能
在 Link 实例上设置一个 activeClassName 的属性
在React中访问真实 DOM 节点‘
在 React 中使用的是虚拟DOM节点,如果要操作真实的DOM节点,就需要使用refs,refs的使用推荐使用尖头函数的方式1
ref={(el) => this._input = el}
Redux
redux解决问题的方法: