# react-comprehensive **Repository Path**: tongyaozhang/react-comprehensive ## Basic Information - **Project Name**: react-comprehensive - **Description**: React综合复习 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2021-05-04 - **Last Updated**: 2021-06-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### 1、项目搭建 #### 1.1 路由基本使用 1.明确好界面中的导航区、展示区 2.导航区的a标签改为Link标签 ```html Demo ``` 3.展示区写Route标签进行路径的匹配 ```html ``` 4.``的最外侧包裹了一个``或`` #### 1.2 NavLink与封装NavLink 1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名 2.标签体内容是一个特殊的标签属性 3.通过`this.props.children`可以获取标签体内容 #### 1.3 Switch的使用 1.通常情况下，path和component是一一对应的关系 2.Switch可以提高路由匹配效率(单一匹配，一旦匹配上就不继续往下匹配了) #### 1.4 路由的严格匹配与模糊匹配 1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致） 2.开启严格匹配：`` 3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由 ### 2、React 基本使用 #### 2.1 JSX 基本使用 + 变量、表达式 + class style + 子元素和组件 #### 2.2 条件判断 + if else + 三元表达式 + 逻辑运算符 && || #### 2.3 列表渲染 + map + key #### 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 的一样 ![](https://gitee.com/tongyaozhang/blog-image/raw/master/img/20210505085151.png) ### 3、React 高级特性 #### 3.1 函数组件 + 纯函数，输入 props，输出 JSX + 没有实例，没有生命周期，没有 state + 没有扩展其他方法 #### 3.2 非受控组件 + ref + defaultValue defaultChecked + 手动操作 DOM 元素 **使用场景** + 必须手动操作 DOM 元素，setState 实现不了 + 文件上传 `` + 某些富文本编辑器，需要传入 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 + 浅比较已适用大部分情况（尽量不要深度比较） ```js function MyComponent(props){ /* 使用 props 渲染 */ } function areEqual(prevProps, nextProps){ /* 如果把 nextProps 传入 render 方法的返回结果与 将 prevProps 传入 render 方法的返回结果一致则返回 true, 否则返回 false */ } export default React.memo(MyComponent, areEqual); ``` **immutable.js** + 彻底拥抱 “不可变值" + 基于共享数据（不是深拷贝），速度好 + 有一定学习和迁移成本，按需使用 ```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 原理图 ![](https://gitee.com/tongyaozhang/blog-image/raw/master/img/redux原理图.png) #### 4.3 react-redux 模型图 ![](https://gitee.com/tongyaozhang/blog-image/raw/master/img/react-redux模型图.png) ### 5、React-router + 面试考点并不多（前提是熟悉React） + 路由模式（hash，H5 history），同 vue-router + 路由配置（动态路由、懒加载），同 vue-router **路由模式** + hash模式（默认），如 http://abc.com/#/user/10 + H5 history模式，如 http://abc.com/user/20 + 后者需要 server 端支持，因此无特殊需求可选择前者 toC 客户端一般 H5 history，toB 控制后台一般 hash