React.js学习知识小结(一)
学习React也有半个月了吧,这里对所学的基础知识做个简单的总结。自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子。然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上发现了一本很好的书React.js小书,自己断断续续也学了几天,上面也几个实战的小项目,可以跟着练练手。
话不多说,就直接来总结吧!
- JSX
- 组件
- 区分props和state
- 生命周期函数
- 事件系统
- 高阶组件
- React.js的context
- 函数式编程
- 使用PropTypes检查类型
- ref属性和React.js中的DOM操作
JSX
JSX其实是一个表达式,但是经过编译之后,JSX表达式会成为常规的JavaScript对象,可以在JSX中嵌入任何的JavaScript表达式,方法是放在花括号里面,还可以将JavaScript表达式嵌入到HTML的属性当中,还有HTML属性也是使用驼峰式命名的方法。
注意:这里JSX防止注射攻击,React DOM会在渲染之前将嵌入在JSX中的任何值进行转义,在呈现之前,全部转换成字符串。
这里引出两个个关于面试的问题?
- 怎么将一个类似HTML的JSX结构转换成一个JavaScript对象
- 为什么不直接通过JSX到达DOM元素呢,而是要通过JSX-JavaScript对象-DOM元素-插入页面。
针对第一个问题,需要先了解JSX的原理问题,其实JSX就是JavaScript对象,其实每个DOM元素的结构都可以用JavaScript对象来表示,一个DOM元素包含的信息其实只有三个:标签名、属性、子元素。
{
tag: 'div',
attrs: { className: 'box', id: 'content'},
children: [
{ tag: 'div', arrts: { className: 'title' }, children: ['Hello'] },
{ tag: 'button', attrs: null, children: ['Click'] }
]
}
我也只是想到一个笨的方法思路,既然想将一个类似HTML的结构的JSX转换成一个JavaScript对象,自然而然需要一个中间者,而这个中间者可以是一个函数,通过传入参数,然后返回一个JavaScript对象,这个参数可以通过传统的DOM操作来获取这个JavaScript对象所需要的tag,attrs,children。
针对第二个问题,有两个原因:
第一个:当我们拿到一个表示UI结构和信息的对象的时候,不一定会把元素渲染到浏览器的普通页面上,这个是通过react-dom实现的,也有可能将这样的对象渲染到canvas,渲染成一个APP.
第二个:当数据要变化的时候,需要更新组件的时候,可以用比较快的算法来操作JavaScript对象,而不用直接操作页面上的DOM,这样就可以减少浏览器重排,极大的优化性能。
组件
说到组件问题,就有几个小点需要提出来
- 怎么划分组件
-有状态组件和无状态组件 - 组件的组合和继承
-组合组件相当于构建了一个组件树 - 编写组件时需注意的规范
1.组件的私有方法都是以_开头,所有事件监听的方法都用handle开头,把事件监听方法传给组件的时候,属性名用on开头
2.组件内容的编写顺序:
(1)static开头的类属性,如defaultProps,propTypes
(2)构造函数,constructor
(3)getter和setter
(4)组件的生命周期
(5)_开头的私有方法
(6)事件监听的方法
(7)render开头的方法,有时候render方法里面的内容会分开到不同函数里面进行,这些函数都以render开头
(8)render方法
区分props和state
React元素可以是DOM标签,也可以是用户自定义组件,在涉及到组件渲染的时候,就需要用到自定义组件,当React元素遇到的是用户自定义组件,它会将JSX属性当作单个属性传递给该组件,这个对象称之为props。
对于state,要实时更新UI是通过某个组件内部的方法,从而实现封装的效果。状态和属性十分相似,但是状态是私有的,完全受控于当前组件,用ES6的类的语法定义组件,有一些特性,局部状态就是如此。
使用类class定义组件,就可以使用类的一些特性:局部状态和生命周期钩子。而且不能直接更新状态,而是使用setState()方法,而且初始化this.state的方法只能是构造函数里面。
组件可以选择将状态作为属性传递给其子组件,这个通常被称为自顶向下或单向数据流。可以在有状态的组件中使用无状态组件,也可以在无状态组件中使用有状态组件。
尽量少的使用state,尽量多的使用props。
生命周期函数
组件的生命周期可以分成3个状态:
Mounting:已插入真实DOM,
updating:正在被重新渲染,
Unmounting:已移出真实DOM.
上面的三种状态又存在两种:will和did,所以总共来说有6种方法。
1.Mounting状态下的方法调用顺序:
->getDefaultProps():对于每个组件类来讲,这个方法只会调用一次,该组件类的所有后续应用,getDefaultProps将不会再被调用,其返回的对象可以用于设置默认的props值
->getInitialState():在组件实例化之前被调用一次,返回初识的state值,有状态组件应该实现此函数。对于组件的每个实例来说,这个方法的调用有且只有一次,用来初识话每个实例的state,在这个方法里面可以访问组件的props,每一个React组件都有自己的state,与props的区别在于state只位于组件的内部,而props在所有实例中共享。
->componentWillMount():在组件挂载之前调用一次
->render()
->componentDidMount():在组件挂载之后调用一次
2.每次修改state,都会重新渲染组件,会依次调用下列方法
shouldComponenrtUpdate()
componentWillUpdate()
render()
componentDidUpdate()
3.Updating状态下的顺序
父组件render()
->componentWillReceiveProps:组件的props属性可以通过父组件来更改,此时这个方法将被调用。可以在这个方法里更新state,以触发render重新渲染组件。
->shouldComponentUpdate():可以返回flase阻止组件的重新渲染,从而提高性能
->componentWillUpdate()
->render()
->componentDidUpdate():除了首次render之后调用componentDidMount,其他render结束之后都调用这个方法
4.Unmounting
每当React使用完一个组件,这个组件必须从DOM中卸载后被销毁,此时
componentWillUnmount会被执行,完成所有的清理和销毁工作。在componentDidMount中添加的任务都需要在该方法中撤销,如创建的定时器或时间监听器。
事件系统
在React.js中不需要手动调用浏览器原生的addEventListener进行事件监听,它帮我们封装好了一系列的on事件,而且不需要考虑不同浏览器的兼容性。这些事件的属性都要用驼峰命名法。这些on事件监听只能用在普通的HTML标签上,而不能用在组件标签上。
和普通浏览器一样,事件监听函数会自动传入一个event对象,这个对象和普通的浏览器event对象所包含的方法和属性都基本一致,不同的是React.js这个event对象不是浏览器提供的,而是它自己内部构建的。React.js将浏览器原生的event对象进行了封装,不用考虑浏览器兼容问题。
Function.prototype.bind,调用f.bind(someObject)会创建一个和f有着相同函数体和作用域的函数,但是这个新函数中,this将永远被绑定在bind的第一个参数,无论这个函数是如何被调用的。React.js的事件监听方法需要手动bind到当前实例,这种模式在React.js中是非常常用的
事件分个简单的小类:
- 剪贴板事件
- 键盘事件
- 鼠标事件
- 触摸事件
- 焦点事件
- 表单事件
- UI事件
React.js学习知识小结(一)的更多相关文章
- React.js学习
React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...
- React.js学习小结
最近一段时间都在学习React.js,感觉还不错,现在把自己的一些学习笔记记录一下,留着以后学习查看. 0.React全家桶(技术栈) 1.React主体 2.WebPack:grunt.gulp自动 ...
- react.js学习之路二
看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 ...
- react.js学习之路四
针对学习react.js中,我感觉最大的疑惑点就是bind(this)的绑定和指向问题了,我被这个问题弄的头昏,有时候调用组件的时候,直接显示undefined,不存在这个组件,当时的心情是崩溃的,整 ...
- react.js学习之路三
学习react.js,知识点整理: 1.props和state: props是相对于父级来说,固定的不会改变的内容.一般会先定义一个变量,则在父级中进行引用, var user = "liu ...
- react.js学习之路一
今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说 ...
- React JS 基础知识17条
1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...
- React.js 学习笔记
React.js React.js 是时下最流行的前端 JavaScript 框架之一. 创建工程 # 安装 CLI $ npm install -g create-react-app # 创建新的应 ...
- React.js学习笔记(一):组件协同与mixin
组件协同: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
随机推荐
- java解析XML之DOM解析和SAX解析(包含CDATA的问题)
Dom解析功能强大,可增删改查,操作时会将XML文档读到内存,因此适用于小文档: SAX解析是从头到尾逐行逐个元素解析,修改较为不便,但适用于只读的大文档:SAX采用事件驱动的方式解析XML.如同在电 ...
- Linux 入门记录:三、Linux 文件基本操作管理
一.复制文件.目录 使用 cp 命令复制文件或目录: $ cp 源文件(夹)目标文件(夹) 常用参数: -r 递归复制整个目录树 -v 显示复制过程的详细信息 二.移动.重命名文件或目录 通过 mv ...
- 在 kernel 下打出 有帶參數的log。 怪異現象與解決方式。
code battery_log(BAT_LOG_CRTI, "youchihwang abc10010 xxxaaa8-2\r\n"); battery_log(BAT_LOG_ ...
- mysql 数据库修改名字
通过information_schema信息修改rename database的目的 mysql 没有rename database 命令,只能变相修改表到目标库里的表来实现: 拼接reanme ta ...
- 破解 myeclipse 2014 professional,步骤很重要
网易 博客 GACHA-动漫萌妹汇集地 LOFTER-最美图片社交 印像派-我的照片书 这些小语种最有前途,免费学 注册登录 加关注 日志 Windows下解决PostgreSQL8 ...
- [hadoop][会装]zookeeper安装
1.简介 分布式场景下的各个进程间的协调运作离不开zookeeper, zookeeper已经是大数据领域提供分布式协调服务的事实标准. 本文只介绍zookeeper的安装方法. 2. 节点规划如下: ...
- 在 Visual Studio 中使用正则表达式
Visual Studio 使用 .NET framework 正则表达式查找和替换文本. 在 Visual Studio 2010 和早期版本中,Visual Studio 在“查找和替换”窗口中使 ...
- windows系统安装mysql压缩zip版
1.下载 打开官网:https://www.mysql.com 进入DOWNLOADS--->Community--->MySQL Community Server,选择系统对应的版本点击 ...
- HDFS初识
参看原文 [Hadoop]HDFS的运行原理 参看原文 还不懂HDFS的工作原理?快来扫扫盲 简介 HDFS(Hadoop Distributed File System) Hadoop分布式文件系统 ...
- golang-指针,函数,map
指针 普通类型变量存的就是值,也叫值类型.指针类型存的是地址,即指针的值是一个变量的地址.一个指针只是值所保存的位置,不是所有的值都有地址,但是所有的变量都有.使用指针可以在无需知道变量名字的情况下, ...