JSX语法
为什么使用 JSX？
React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。
语法特点:
- 只有一个根节点
- { }中写javascript表达式
- 数组内可以直接写html标签
- 对象样式自动展开
- 可以{/* 注释*/}
- 样式的类名指定不要用class，要用className
实际上，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖
//如下JSX 代码
<button color="blue">你好React</button>
//经过Babel编译
React.createElement(
button,
{color: 'blue'},
'你好React'
)
函数组件(无状态组件)
执行了ReactDOM.render之后，发生了什么?
1.React解析组件标签,找到该组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
this问题
没有this，this值为undefined。因为经过babel编译后开启了严格模式(use strict)
类组件(有状态组件)
执行了ReactDOM.render之后，发生了什么?
1.React解析组件标签,找到该组件
2,发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
组件三大核心属性
state
状态(state)不能直接修改，需要通过内置 API(setState)进行更新，本质是合并而不是替换
props
对props进行限制：
对属性进行类型、必要性的限制：propTypes
指定默认属性值：defaultProps
注意props是只读的
refs
Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。
何时使用 Refs
下面是几个适合使用 refs 的情况：
- 管理焦点，文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库。
