origin来源
- 传统UI操作关注太多的细节。传统DOM API关注太多细节。react始终整体刷新
- 应用程序状态分散在各处，难维护和追踪
UI细节问题，通过整体刷新解决。
数据问题：单向数据流。 Flux架构 （衍生出Redux 、 MobX）
理解React组件
props + state ---> View
- 组件一般不提供共用方法，更像是某种状态机。
- React组件可以理解成一个纯函数。
- 单向数据绑定。
创建组件
- 创建静态UI
- 考虑组件的状态组成
- 考虑组件的交互方式
数据状态管理原则
- 计算得到的状态，不要单独存储
- 组件尽量无状态，数据用props获取
JSX---在JavaScript代码中，直接写HTML标记语言
jsx本质：并不是模板语言，只是一种语法糖，动态创建组件的语法糖。
写法对比：
const element= <h1>hello,{name}</h1>;
const element = React.createElement('h1', null, 'Hello,', name);
属性中使用表达式
表达式作为元素
JSX优点：
- 声明式创建界面的直观
- 代码动态创建界面的灵活
- 无需学习新的模板语言
约定：
小写开头的是原生DOM，如div
大写开头是自定义组件
JSX标记可以直接使用属性语法，如<menu.Item />
生命周期
"Render阶段"：纯净且没有副作用
"Precommit"阶段：可以读取DOM
"Commit"阶段：可以使用DOM
创建时：
更新时：
卸载时：
ps : 熟练掌握框架的前提，是熟练了解各生命周期能做的事。
virtual DOM
两个假设：
- 组件的DOM结构是相对稳定的。
- 类型相同的兄弟节点可以被唯一标识。
高阶组件
- 高阶组件接受组件作为参数，返回新的组件。
- 函数作为子组件。
