1、项目搭建
1.1 路由基本使用
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
3.展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
1.2 NavLink与封装NavLink
1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
2.标签体内容是一个特殊的标签属性
3.通过this.props.children可以获取标签体内容
1.3 Switch的使用
1.通常情况下，path和component是一一对应的关系
2.Switch可以提高路由匹配效率(单一匹配，一旦匹配上就不继续往下匹配了)
1.4 路由的严格匹配与模糊匹配
1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
2、React 基本使用
2.1 JSX 基本使用
- 变量、表达式
- class style
- 子元素和组件
2.2 条件判断
- if else
- 三元表达式
- 逻辑运算符 && ||
2.3 列表渲染
2.4 事件
- bind this
- 关于 event 参数
- 传递自定义参数
2.5 表单
- 受控组件（表单的值受state影响）
- input textarea select 用 value
- checkbox radio 用 checked
2.6 组件使用
- props传递数据
- props传递函数
- props类型检查
2.7 setState
2.8 生命周期
- 单组件生命周期
- 父子组件生命周期，和 Vue 的一样
3、React 高级特性
3.1 函数组件
- 纯函数，输入 props，输出 JSX
- 没有实例，没有生命周期，没有 state
- 没有扩展其他方法
3.2 非受控组件
- ref
- defaultValue defaultChecked
- 手动操作 DOM 元素
使用场景
- 必须手动操作 DOM 元素，setState 实现不了
- 文件上传
<input type="file">
- 某些富文本编辑器，需要传入 DOM 元素
受控组件 vs 非受控组件
- 优先使用受控组件，符合 React 设计原则
- 必须操作 DOM 时，再使用非受控组件
3.3 Portals
- 组件默认会按照既定层次嵌套渲染
- 如何让组件渲染到父组件以外？
使用场景
- 父组件 overflow: hidden（父组件设置了 BFC )
- 父组件 z-index 值太小
- fixed 需要放在 body 第一层级
3.4 context
- 公共信息（语言、主题）如何传递给每个组件？
- 用 props 太繁琐
- 用 redux 小题大做
3.5 异步组件
- import()
- React.lazy
- React.Suspense
3.6 性能优化
- 性能优化，永远都是面试的重点
- 性能优化对于 React 更加重要
- 回顾讲 setState 时重点强调的不可变值
- shouldComponentUpdate（ 简称 SCU ）
- PureComponent 和 React.memo
- 不可变值 immutable.js
SCU 使用总结
- SCU 默认返回 true，即 React 默认重新渲染所有子组件
- 必须配合 “不可变值” 一起使用
- 可先不用 SCU，有性能问题时再考虑使用
PureComponent 和 memo
- PureComponent，SCU 中实现了浅比较
- memo，函数组件中的 PureComponent
- 浅比较已适用大部分情况（尽量不要深度比较）
function MyComponent(props){
/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps){
/*
如果把 nextProps 传入 render 方法的返回结果与
将 prevProps 传入 render 方法的返回结果一致则返回 true,
否则返回 false
*/
}
export default React.memo(MyComponent, areEqual);
immutable.js
- 彻底拥抱 “不可变值"
- 基于共享数据（不是深拷贝），速度好
- 有一定学习和迁移成本，按需使用
const map1 = Immutable.Map({a:1, b:2, c:3})
const map2 = map1.set('b', 50)
map1.get('b') // 2
map2,get('b') // 50
性能优化 - 小结
- 面试重点，且涉及 React 设计理念
- SCU PureComponent memo immutable.js
- 按需使用 & state 层级
3.7 关于组件公共逻辑的抽离
- mixin，已被 React 弃用
- 高阶组件 HOC
- Render Props
HOC vs Render Props
- HOC：模式简单，但会增加组件层级
- Render Props：代码简洁，学习成本较高
- 按需使用
4、Redux
- 和 Vuex 作用相同，但比 Vuex 学习成本高
- 不可变值，纯函数
- 面试常考
4.1 Redux 使用
- 基本概念
- store state
- action
- reducer
- 单项数据流
- dispatch(action)
- reducer - > newState
- subscribe 触发通知
- react-redux
- Provider
- connect
- mapStateToProps mapDispatchToProps
- 异步 action
- redux-thunk
- redux-promise
- redux-saga
- 中间件
4.2 Redux 原理图
4.3 react-redux 模型图
5、React-router
- 面试考点并不多（前提是熟悉React）
- 路由模式（hash，H5 history），同 vue-router
- 路由配置（动态路由、懒加载），同 vue-router
路由模式
toC 客户端一般 H5 history，toB 控制后台一般 hash
