1。jsx：jsx执行更快，编译为js代码后进行了优化，而且在编译过程中就能发现错误。注：可以防止用户输入数据的数据注入（受控组件）
diff算法
2。react组件：单个组件-类组件与函数组件
复合组件-按功能分复合组件(组合或继承)与高阶组件
表单元素-按事件处理-分为受控组件或非受控组件
是否用react中的state或方法来控制输入的数据
props:组件对外的接口
state：组件内部状态
3.render：null或false不渲染界面，默认返回一个jsx表示的对象，由react库来根据返回的对象判断如何渲染。
null从组件的render方法返回不会影响组件生命周期方法的触发组件能够隐藏自身
false:不渲染组件
划分组件边界的原则
react组件的数据种类
4.react组件的生命周期
高阶组件（又叫参数化的容器组件）-》包裹组件-》子组件（需要渲染的界面）
高阶组件参数（需渲染的包裹组件，获取数据的方法）不修改子组件，对包裹组件注入不相关得props传入state或实例方法
6。分条件渲染组件
7.组件的列表和键
8.受控组件
对于受控组件，每个状态变异都会有一个关联的处理函数。这使修改或验证用户输入变得非常简单。
不受控组件
<input type='file'>因为值是只读的，react中其值不受控制
要编写一个不受控制的组件，而不是为每个状态更新编写一个事件处理程序，可以使用ref从DOM获取表单值。
9.提升状态
首先将状态添加到需要渲染的组件中。然后，如果其他组件也需要它，可以将它提升到最接近的共同祖先。不要尝试同步不同组件之间的状态，而应该依靠自顶向下的数据流。
即：把2个子组件共享的数据回传给共同显示的父组件来处理数据
10.组件嵌套修改
通过props.children传递子组件或者属性里写组件来修改包裹组件里的内容
组件可以接受任意道具，包括原始值，React元素或函数。
如果您想在组件之间重用非UI功能，我们建议将其解压缩到单独的JavaScript模块中
11.组件的设计规则
①将ui分解为组件层次结构
②构建静态版本-无状态的自上而下或自下而上按层次构建
③确定ui的最小化的state变量
④确定state属于哪个组件
⑤添加反向数据流-设计交互
二。高级react
2.1jsx
组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数。
react元素包括：表达形式的标签变量、html标签元素、组件。即：可以通过react顶层api将其转化为dom元素并呈现
React 组件是MyComponent，React 元素就是
<MyComponent/>
const element = I'm element。
②使用点语法(对象形式)按条件渲染嵌套组件-运行时选择类型
import{PhotoStory,VideoStory}from'./stories';
constcomponents={photo:PhotoStory,video:VideoStory};
functionStory(props){// Wrong! JSX type can't be an expression.return <components[props.storyType] story={props.story}/> ;}
表达式属性传入-其中以子组件传入最有用
2.2proptypes类型检查
3.修改数据的另一种方法-ref 还有一种是数据流中的state
对于refs有几个很好的用例：
管理焦点，文本选择或媒体播放。
触发命令式动画。
与第三方DOM库集成。
ref：该ref属性采用回调函数，并且在组件挂载或卸载后立即执行回调。
ref回调之前被调用componentDidMount或componentDidUpdate生命周期钩。
3.1使用ref回调来设置类的属性是访问DOM元素的常用模式。
注意：
参考和功能组件
您不能ref在功能组件上使用该属性，因为它们没有实例：1.如果需要引用组件，则应该将组件转换为类2.只要您引用DOM元素或类组件，就可以在功能组件内使用该ref属性
3.2将DOM Refs公开给父组件
间接的实现父子组件传数据
4.不受控组件
其中表单数据由DOM本身处理，以使用ref从DOM获取表单值。
始终是一个不受控制的组件，因为它的值只能由用户设置，而不是以编程方式设置。
5.优化性能
1.可以通过安装适用于Chrome的React Developer Tools进行检查
与您的页面进行交互，您应该看到任何重新呈现的组件周围都会出现彩色边框。这可以让你发现没有必要的重新渲染
2.使用Chrome性能标签分析组件
3.使用shouldComponentUpdate检查，避免不必要的渲染
diff算法
1.先检查2个树形节点根节点类型是否相同
不同直接重新装载dom元素不同，类组件不同
2.类型相同
①dom元素保留元素，更新div属性与内容
②组件类型
递归更新节点的属性，根据新节点的props去更新
比较状态
react4个属性 key、ref、props、类型type
优化：
避免不必要的render（用户的输入进行限制）
shouldupadate控制不必要的更新
setstate的控制以及组件输入的限制（props与state控制）
回调与绑定
合理拆分组件state数量控制
减少组件之间的依赖
