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的使用场景探索
以上是 react学习笔记1--基础知识 的全部内容， 来源链接： utcz.com/z/383958.html
