React官方文档

JSX

• 本质上是react element， 等同于用react.createElement创建的对象

元素渲染

• 每个react元素都是不可变的，变化需要重新render，react只会重新渲染变化的部分

组件&props

• 组件是一个返回react elemnt的函数
• props是一个只读的值

state

• 组件内部的状态

事件处理

• 事件处理函数不会绑定this

条件渲染

• if else，&&，三目运算符
• 阻止渲染用return null

列表渲染

• 用map函数return jsx
• 需要设定key

表单（受控组件）

• 目的：实现vmodel绑定表单的值
• 使用value绑定state的值，onchange绑定处理函数，处理函数改变state值

状态提升

• 组件间通用的状态需要提升到父组件
• 改变这种状态需要用到父组件传入的函数来处理

组合与继承

• 组件的组合已经基本可以满足所有需求，不需要继承

react理念

• 单向数据流
• 先确定ui组件层级
• 确定state的位置
• 添加反向数据流

高级部分

深入jsx

• 布尔值、Null 和 Undefined 被忽略
• 属性默认为true

使用propstypes检查类型

• 检查类型、指定默认值、限制单个子代

静态类型检查

• flow
• typescript

refs & DOM

• 创建refs访问原生dom的方法和属性

非受控组件

• 通过ref访问表单里面的值

性能优化

• 构建工具打包
• react重新渲染原理：浅比较state的属性，渲染变化的部分
• 使用不可突变数据结构，避免浅比较对不不出差异而不渲染的问题

协调（对比算法）

• 相同类型的元素：观察二者属性，保持相同底层DOM
• keys：解决递归子节点排序变化而重新渲染的性能问题

context

• 用于全局的数据；使用context避免中间元素传递props

fragment

• 空的jsx标签，只接受key属性

portals

• 将子节点渲染到父组件以外的DOM节点
• portals内部触发的事件会冒泡到包含react树的祖先

错误边界

• 错误边界是用于捕获其子组件树 JavaScript 异常，记录错误并展示一个回退的 UI 的 React 组件
• 相当于是组件级别的try catch

web component

• 可以在web组件里面使用react，反之亦然

高阶组件

• 一个接受组件为参数并返回新组件的函数
• 作用：把数据源不同、逻辑相似的组件抽象成为高阶组件
• 原则：不要改变原始组件，使用组合
• 约定：将不相关的props属性传递给包裹组件
• 约定：最大化使用组合
• 约定：包装显示名字以便于调试
• 注意：不要在render函数中使用高阶组件
• 必须将静态方法做拷贝
• Refs属性不能传递

传递refs

• 在高阶组件中传递refs

render props

• React 组件之间使用一个值为函数的 prop 在 React 组件间共享代码的简单技术
• 在一个通用的组件里接受一个render函数来渲染另一个组件
• 实现通用组件的数据能被具体业务组件访问