# react-demo
**Repository Path**: lxstart/react-demo
## Basic Information
- **Project Name**: react-demo
- **Description**: The trip of studying for react!
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-26
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
#### My trip of studying for react!
_as well as a collection of react demos_
记我的一次react旅行——一些关于react的demo集合。
+ What's React? [概要]
12-21[My mine]: A library with MVC design mode, just is a singe and flexible tool of frontend engineers. It works for mobile web design and web app production by supporting large number of components and quicker virtual dom.
+ Core Technology [核心技术]
* DOM
* JSX
* COMPONENT
+ Static HTML Model [静态HTML模板]
_This is a sample demo of the html structure for react._
下面是一个简单的react的HTML结构的demo。
```html
```
+ Render by virtual dom [由VDOM（控制DOM）渲染]
```html
ReactDOM.render(
{arr}
,
document.getElementById('example')
);
```
> Especially, the higher efficiency of render owns to `diff` algorithm, which reduces times of dom render and simplifys the process of render.
需要特别注意的是，react高效的渲染归功于可以动态适配VDOM和DOM变化的`diff`算法。
> It must emphasize that those nodes controlled is automaticly maintain by react instead of programmer.
这里必须强调的是这些被react所操作的节点是由react自动维护而不是由程序员手工维护的.
+ Basic rules of JSX [JSX基本规则]
> React uses HTML parsing rules to handle render where is a tag of HTML (starts with "<"). In addition, react uses JavaScript parsing rules to handle render where is a tag of code block (starts with "{").
HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析
+ Abundant and flexible components [丰富而灵活的组件]
* class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
* 这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。
+ Automaticlly maintain state of DOM [自动维护DOM的状态]
+ Timer and Animation [计时器和动画]