《react精髓》读书笔记
概述
前几天找react的技术书籍看,找到《react精粹》和《深入浅出React和Redux》。由于《react精粹》是外国人写的,再加上译者奇舞团我也比较喜欢,所以就读这本书了。不过老实说,书有些过时了,但是里面的基础思想和方法讲的很有意思,正是我所需要的。所以我把它们记录下来,供以后开发时参考,相信对其它人也有用。
PS:第一章就不要看了,太老了!!!
关注点分离
我们之所以要用html,css和js这三种不同的技术来编写web应用程序,是因为想分离出三个不同的关注点:
- 内容(html)
- 样式(css)
- 逻辑(js)
web页面和单页应用
web页面和单页应用在于单页应用会在加载完文档对象模型(DOM)之后使用web浏览器提供的Javascript DOM API 来操纵DOM以创建额外的元素。
然而,通过javascript操纵DOM有2个问题:
- 编程风格很重要,不同的编程风格会导致代码库变得难以维护。
- DOM的更改是很慢的。
那么,在什么情况下我们会操纵DOM呢?
- 用户事件:用户按下键盘、点击鼠标、滚动屏幕、缩放页面尺寸等。
- 服务端事件:应用程序从服务器接收到数据或错误等。
一些内置函数
React.createElement有一个children参数,描述了这个元素应当含有的子元素(如果子元素存在的话)。
react有一些内置的函数来创建通用的HTML标签,比如React.DOM.ul()、React.DOM.li()、React.DOM.div()等。
ReactDOM.render()就是react里面把虚拟DOM渲染到真实DOM的函数,它的第三个参数能够接收一个回调函数。
客户端渲染和服务端渲染
一般的react页面是客户端渲染页面,它初次打开时很慢的,原因如下:
- 它需要在浏览器中渲染虚拟DOM,并把它更新到真实DOM上面。
- 它常常需要等待服务端的一些数据才能更新DOM。
所以,从技术上讲,我们可以在服务端使用React库,并且创建ReactNode树,然后把它渲染为一个字符串,最后发送给客户端。
//服务端渲染成字符串
var ReactDOMServer = require('react-dom/server');
ReactDOMServer.renderToString(ReactElement);
//服务端渲染成静态页面
var ReactDOMServer = require('react-dom/server');
ReactDOMServer.renderToStaticMarkup(ReactElement);
使用服务端渲染的另一个好处是,方便SEO。
事件处理
React其实并不会将事件处理函数绑定到DOM节点本身,相反,它仅在最顶层使用一个事件监听器来监听所有事件,并把它们代理到相对应的事件处理函数。
state
我们要问自己这么一个问题:我们不应该在state里面放什么?
我们可以从组件的state中移除并且不影响用户页面更新的数据有哪些?边问自己边删除数据,直到你完全确定在不影响用户界面正常更新的前提下没有任何数据可删了。
规划React
规划React应用时应遵循下面两条简单的原则:
- 每个React组件应该代表一个用户界面元素。它应该封装最小的可复用元素。
- 多个React组件应该组成独立的React组件。最终,整个用户页面应该封装成一个React组件。
内置样式
可以把一些不需要改动的样式做成内置样式,但是要使用驼峰式命名,并且class要改为className。
var headerStyle = {
fontSize: '16px',
fontWeight: '300',
display: 'inline-block',
margin: '20px 10px'
};
<h2 style={headerStyle}>fasdfdf</h2>
验证React组件的属性
使用React.PropTypes来验证React组件的属性。(出于性能原因,PropTypes仅在React的开发版中被使用)
改动数据
我们如何在子组件中改变父组件的数据?
父组件给子组件传递一个回调函数,子组件通过调用这个回调函数来修改父组件的数据。
ref
React组件有一个ref属性,通过它可以在render函数外面引用该组件。
<input
ref="collectionName" />
componentDidMount: function() {
this.refs.collectionName.focus();
}
《react精髓》读书笔记的更多相关文章
- csapp读书笔记-并发编程
这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...
- CSAPP 读书笔记 - 2.31练习题
根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1) 属于第一种情况 sum = x ...
- CSAPP读书笔记--第八章 异常控制流
第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...
- CSAPP 并发编程读书笔记
CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...
- 读书笔记汇总 - SQL必知必会(第4版)
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 读书笔记--SQL必知必会18--视图
读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...
- 《C#本质论》读书笔记(18)多线程处理
.NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...
- C#温故知新:《C#图解教程》读书笔记系列
一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...
- C#刨根究底:《你必须知道的.NET》读书笔记系列
一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...
- Web高级征程:《大型网站技术架构》读书笔记系列
一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...
随机推荐
- Python多进程并发操作进程池Pool
目录: multiprocessing模块 Pool类 apply apply_async map close terminate join 进程实例 multiprocessing模块 如果你打算编 ...
- MyBatis中的缓存1
1.应用程序和数据库交互的过程是一个相对比较耗时的过程 2.缓存存在的意义:让应用程序减少对数据库的访问,提升程序运行的xiaolv 3.MyBatis中默认SqlSession缓存开启 3.1 同 ...
- Eclipse中配置约束
一.本地配置schema约束(xsd文件): 1.比如配置spring的applicationContext.xml中的约束条件: 复制applicationContext.xml中如图: 2.win ...
- 2018.10.29 bzoj3718: [PA2014]Parking(树状数组)
传送门 显然只用判断两个会相交的车会不会卡住就行了. 直接树状数组维护后缀最大值就行了. 代码: #include<bits/stdc++.h> using namespace std; ...
- boost-字符编码转换:使用conv
Windows下的字符集转换可以使用WideCharToMultiByte/ MultiByteToWideChar,Linux下字符集转换可以使用iconv()函数,下面为使用boost的conv来 ...
- vue中的静态路由
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面 ...
- js基础学习笔记(三)
3.1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看 ...
- spoj high
matrixtree定理裸体,学了行列式的n^3解法,(应该是能应用于所有行列式): 代码是参考某篇题解的... #include<iostream> #include<cstrin ...
- Qt_简介
Qt简介: 1990 开发 1991 发布Qt 1.0. 公司:Trolltech (奇趣科技) 1997 Qt被用来开发Linux桌面KDE 2008 被Nokia收购 2012 被转让给Digia ...
- Rescue HDU1242 (BFS+优先队列) 标签: 搜索 2016-05-04 22:21 69人阅读 评论(0)
Description Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is describe ...