React 学习笔记

1、react 使用JSX语法来描述html，位于花括号的值会被当做一个JavaScript表达式进行求值

2、props是组件的不可变属性，有个重要属性：children，可以使用props.children来引用位于前置标签和后置标签之间的内容

3、state 组件所有可变的属性存储在state中。当state被修改时，组件会触发响应式渲染，组件自身及其子组件都会被重新渲染

4、react中的事件：react为了高效，将事件处理从节点拿出来，统一放在文档根节点进行处理，当事件发生时会将事件映射到对应的组件去渲染。

5、react中的属性采用驼峰式大小写原则（“onClick” 而非"onclick"）

6、JSX是react对JavaScript的扩展，用于在js中编写声明式XML风格语法，JSX有一组类似HTML的XML标签，转义后JSX会被转换为针对Reat库的调用。例如
```

hello world

``` 会被转义为 ``` React.createElement("h1", null, "Hello world") ```

7、JSX与HTML的不同之处：
1） 标签名采取驼峰式命名规范 2）所有元素必须闭合 3）标签名基于DOM api，而不是html语言规范，其中一个例子是class vs className
普通的html:

<div class="some-class"> </div>

而JSX却是

<div className="some-class"> </div>

8、JSX的特异之处
1）单一根节点
2）不支持if 语句，有类似需求使用三元问号表达式
3）JSX中的注释必须使用花括号（{}）括起来
4）React内置了XSS攻击保护措施，意味不可以动态动态生成html标签附加到JSX中。如果必须这样做，可以通过dangerouslySetInnerHtml属性来跳过XSS保护

9、react表单内的组件有两种类型：受控组件和非受控组件
1）受控组件：组件的值由外部传入，内部不可以改变组件的值
2）非受控组件：组件不为任何输入域提供值，渲染后的元素值直接反应用户的输入

10、React 虚拟DOM
众所周知，操作DOM是一个耗时操作，为了提高性能，react实现了一个虚拟DOM，用户所有的修改都是直接操作虚拟DOM。为了保持真实DOM和虚拟DOM的一致，需要找出两者之间的最小变化量,这一过程称为子级校验。
1）key属性，再需要进行插入、删除、替换和移动时可以快速找到组件
2）refs属性，如果必须和真实DOM打交道，可以通过refs属性来操作真实DOM