React study(一)
来源:互联网 发布:origin矩阵表作用 编辑:程序博客网 时间:2024/06/05 00:20
目录
- 目录
- react的产生
- react特点
- 发展历程
- 配置环境
- JSX语法及特点介绍
- JSX语法
- 非DOM属性介绍
- JSX解释器架构介绍
react的产生
facebook需要解决的问题:构建数据不断变化的大型应用。
渲染到DOM:render( element, container, [cb] )
element:指我们用React创建的虚拟DOM
container:真实的DOM元素,容器。
cb:渲染完成或更新后的回调,可选。
react特点
react特点: 简单 、 声明式
react核心是组件,组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。
提高代码复用率:组件将数据和逻辑封装,类似面向对象中的类。
降低测试难度:组件高内聚低耦合,很容易对单个组件进行测试。
降低代码复杂度:直观的语法可以极大提高可读性。
发展历程
2013年6月,Facebook官方发布react
2013年9月,React热度开始上涨
2015年3月,React Native发布
配置环境
jsx解释器、react.min.js压缩版、下面的是带插件的react
编辑器:sublime
给sublime配置插件 Emmet、HTML-CSS-JSPrettify、Spacegray模板。
package control:
https://packagecontrol.io/installation
注意:reactjs也可以应用在nodejs中,在服务端进行页面的渲染,这样做可以提高载入速度、完善SEO、并且更加便于测试。
Emmet语法介绍:
JSX语法及特点介绍
JSX=JavaScript XML的缩写
官方推荐JSX:
类XML语法容易接受、增强JS语义、结构清晰、抽象程度高(屏蔽了DOM操作、跨平台)、代码模块化(React可以与你所知道的库或框架很好地工作。)
JSX语法
首字母大写(自定义)、小写(原生的标签)
嵌套
求值表达式(函数求值表达式可以,但这不是好习惯;建议将函数独立出来,在表达式中调用)
驼峰命令
htmlFor和className
有几点需要注意:
1)获取属性的值用的是this.props.属性名
2)创建的组件名称首字母必须大写。
3)为元素添加css的class时,要用className。
4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。
条件判断的四种方法:
三元表达式 ? :
变量
直接调用函数表达式
或运算符 ||
万能的函数表达式 (function(){}(this))(不建议使用)
非DOM属性介绍
非dom属性:dangerouskySetInnerHTML、ref、key
dangerouskySetInnerHTML:在jsx中直接插入html代码(尽量不要使用)
ref:父组件引用子组件
key:提高渲染性能(组件内部key值不同)
内容类似的组件尽量合并成一个组件
列表类型的元素一定要加上唯一的key
JSX解释器架构介绍
执行顺序入手、适当忽略细节、重视烂笔头、反复阅读
模块化好处:方便阅读、方便协同开发
- React study(一)
- React Study
- React study(二)
- React Native study
- React study (三)事件函数
- J2EE study(一)-----J2EE Foundation
- My Linux Study Note(一)
- Study on Android【一】--概述
- Study Spring《框架学习一》
- React Native (一) --React 入门
- react(一):初识react
- React学习(一):React入门
- study
- study
- study
- study
- STUDY
- Study
- 电荷放大器的Matlab仿真
- Json 转 java 对象 和 List集合
- nyoj125
- Xcode中的文本查找和文本替换功能
- 五个为什么(译文)
- React study(一)
- [Android_机制]_Http和Socket连接区别
- hihoCoder 1251 Today Is a Rainy Day(暴力)
- Collections.sort() 对 List 排序
- Android组件之Service
- 矢量方程(vector-valued function)
- Table表格的序号自动增长
- iOS打电话、发短信、发邮件功能开发
- iOS抓包