react学习笔记1--基础知识

什么是react

• A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES【React是一个用于构建用户界面的JavaScript库。】
• React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到DOM中。【为什么用react，它为什么快】
• 个人感觉: react通过虚拟DOM解决的数据频繁变化造成的DOM节点的频繁渲染。所以，适用于那些数据更新比较快的，【增删改查】频繁的页面；

react的核心库

• react.js 是 React 的核心库，
• react-dom.js 是提供与 DOM 相关的功能，
• JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。或者 直接node编辑完成

什么是JSX 的语法

• 它允许 HTML 与 JavaScript 的混写
• 在JSX语法中，遇到HTML标签（以<开头）就用HTML规则解析，遇到代码块（以{开头）就用JavaScript规则解析。
• JSX还允许在模板中直接插入JavaScript变量，变量是数组就展开数组成员。

---

组件

• React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

• 注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。

• 另外，组件类只能包含一个顶层标签，否则也会报错。

• this.props && this.props
• this.props.children的值有三种可能：如果当前组件没有子节点，它就是undefined;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array
• React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object

组件渲染原理

• 组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的DOM 。
• 根据React的设计，所有的DOM变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做DOM diff，它可以极大提高网页的性能表现。
• 有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。

组件渲染状态

• 组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI
• this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

组件的生命周期

• 组件的生命周期分成三个状态：
• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

参考地址

• 前端已不止于前端－ReactJs初体验
• React学习笔记—Why React?
• React学习笔记—虚拟DOM
• 不止是UI：React的使用场景探索