React study(一)

目录

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

条件判断的四种方法：
三元表达式 ? :
变量
直接调用函数表达式
或运算符 ||

万能的函数表达式 （function(){}(this)）(不建议使用)

非DOM属性介绍

非dom属性：dangerouskySetInnerHTML、ref、key
dangerouskySetInnerHTML：在jsx中直接插入html代码（尽量不要使用）
ref：父组件引用子组件
key：提高渲染性能（组件内部key值不同）

内容类似的组件尽量合并成一个组件
列表类型的元素一定要加上唯一的key

JSX解释器架构介绍

执行顺序入手、适当忽略细节、重视烂笔头、反复阅读
模块化好处：方便阅读、方便协同开发