React && Redux 学习笔记(一)
来源:互联网 发布:网络风险有哪些 编辑:程序博客网 时间:2024/06/06 04:17
1.react的思想:
react可以用下面的公式表示: UI = render(data);UI表示用户看到的界面,UI是通过纯函数的render将数据data渲染出来。
react一个比较重要的思想是虚拟DOM(virtual DOM),传统的前端思想:如HTML,每个元素对应一个DOM节点,HTML元素逐级包含,构成了DOM树,浏览器为了渲染HTML格式的网页,就会将HTML文本解析成DOM树,根据DOM树渲染界面给用户,当需要更改界面的时候,直接改变DOM树上的节点。
传统的DOM方法更新界面,虽然仅修改了一条JS语句,但是往往引起浏览器重新对网页进行布局,重新绘制,这样的执行过程比执行一体JS语句慢很多。
所谓虚拟DOM是对DOM树的一种抽象,它不会直接和浏览器打交道,只是仅存在于JS空间的树形结构,每次自上而下渲染react组件的时候,会将本次产生的虚拟DOM与上一次渲染虚拟DOM进行对比(这种对比的diff算法后续会介绍),然后仅渲染不同的地方即可。
2.react组件的数据:
react组件分为两种:prop和state,两者的变化都会引起组件的重新渲染,一般情况:prop组件是对外的接口,state组件是内部状态,对外用prop,对内用state。
其中prop看起来很像HTML的元素的属性,两个的区别:HTML的属性值都是字符串类型,而prop属性的值可以是任意的一种JS数据类型。在JSX中,prop属性值必须用{ }括起来。
prop有propTypes检查,就是让组件声明自己的接口规范:
Xxx.propTypes = {
name : PropTypes.string.isRequired,
value: PropTypes.number
}
上述表明name必须是string类型且必不可好,缺少了会报warning,value的值必须是数值。
react组件不能修改传入的prop的值。
state必须是一个javascript对象,改变内部state,可以通过this.setSate函数修改。
prop和state区别:
1.prop定义外部接口,state用于记录内部的状态;
2. 组件不应该改变prop的值,而state存在的目的就是让组件来改变。
关于组件的生命周期和后续知识,见下篇(正在努力整理。。。)
- React && Redux 学习笔记(一)
- react-redux学习笔记-2-react-redux
- react-redux 学习笔记
- react-redux学习笔记
- react学习之redux(一)
- React与Redux学习总结(一)
- react && redux 学习笔记(二)
- Redux 学习笔记(一)
- react、redux个人学习笔记
- react项目学习笔记四(redux和redux的中间件redux-thunk的认识)
- react-redux学习笔记-1-react
- React Native学习笔记(五)Redux基础学习
- React + Redux 入门(一):抛开 React 学 Redux
- react-redux的connect()方法 学习笔记
- React学习笔记_react-redux原理分析
- React学习笔记_React-Redux 的用法
- react+redux大体思路(一)
- react+redux(一)
- poj 3253 Fence Repair(优先队列+贪心)
- csu1329 一个盒子
- C++中的引用
- jdbc测试mysql数据库sql预解析(绑定变量)
- 常用linux命令(20个)
- React && Redux 学习笔记(一)
- Android Input Method Sample Code Analysis
- 由Sophix引发的安卓热更新底层原理探索
- 内容解析者获取手机通讯录信息
- SpringMvc的@RequestBody注解
- Android音频系统之AudioFlinger(二)
- FormData和multer使用的一个小坑
- OpenResty(Nginx+Lua)
- hdu2037——今年暑假不AC