7. React 使用
2020-04-16 11:12:28 6 举报AI智能生成
react
作者其他创作
大纲/内容
前端框架及项目面试聚焦Vue/React/Webpack — 课程笔记
第7章 React 使用
7-1 React使用-考点串讲
React使用
1.基本使用-常用，必须会2.高级特性-不常用，但体现深度3.Redux和React-router使用
7-2 JSX基本知识点串讲
JSX基本使用
1. 变量、表达式2. class style3. 子元素和组件
7-3 JSX如何判断条件和渲染列表
条件判断
1. if else2. 三元表达式3. 逻辑运算符 && ||
和vue的v-if v-else不同这里的条件判断直接写js
渲染列表
1. map2. key
事件
1. bind this2. 关于event参数3. 传递自定义参数
7-4 React事件为何bind this
bind this
clickHandler1
this.clickHandler1 = this.clickHandler1.bind(this)在constructor中绑定方法的this指向
使用静态方法
clickHandler2
clickHandler2静态方法使用静态方法，不需要绑定方法的this指向
7-5 React事件和DOM事件的区别
event
1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力2. event.nativeEvent 是原生事件对象3. 所有的事件，都被挂载到 document 上4. 和 DOM 事件不一样，和 Vue 事件也不一样
传递参数
7-6 React表单知识点串讲
表单
1. 受控组件2. input textarea select 用value3. checkbox radio 用checked
input
受控组件，可以简单理解为，input受state控制通过onChange手动修改state的值
textarea
<textarea value={this.state.info} onChange={this.onTextareaChange}/>
select
<select value={this.state.city} onChange={this.onSelectChange}> <option value=\"beijing\">北京</option> <option value=\"shanghai\">上海</option> <option value=\"shenzhen\">深圳</option></select>
checkbox
<input type=\"checkbox\" checked={this.state.flag} onChange={this.onCheckboxChange}/>
radio
<input type=\"radio\" name=\"gender\" value=\"male\" checked={this.state.gender === 'male'} onChange={this.onRadioChange}/>
7-7 React父子组件通讯
组件使用
1. props传递数据2. props传递函数3. props类型检查
代码演示
List
List负责渲染
Input
父组件给input传递方法子组件调用父组件的方法，修改父组件的state
1. 父组件可以给子组件传递数据，也可以传递方法2. 在子组件中，通过this.props获取父组件传递的数据3. 状态提升：react组件中，在公共的父组件中定义变量
7-8 setState为何使用不可变值
setState
1. 不可变值（非常非常重要）2. 可能是异步更新3. 可能会被合并
不可变值
concat不影响原来的数组push会改变原来的数组
slice不会改变原来的数组
7-9 setState是同步还是异步
1. 直接使用时异步的2. setState回调中是同步的3. 在setTimeout中是同步的4. 在自己定义的 DOM 事件中是同步的
7-10 setState何时会合并state？
1. 传入对象，会被合并（类似 Object.assign） 2. 传入函数，不会被合并
7-11 React组件生命周期
单个组件的生命周期
父子组件生命周期，和Vue的一样
7-12 React基本使用-知识点总结和复习
知识点
1. JSX基本使用2. 条件3. 列表4. 事件5. 表单6. 组件和props7. setState(面试必考)8. 生命周期
7-13 React函数组件和class组件有何区别
React高级特性
1. 函数组件2. 非受控组件3. Portals4. context5. 异步组件6. 性能优化7. 高阶组件 HOC8. Render Props
函数组件
1. 纯函数，输入props，输JSX2. 没有实例，没有生命周期，没有state3. 不能扩展其他方法
7-14 什么是React非受控组件
非受控组件
1. ref2. defaultValue defaultChecked3. 手动操作DOM元素
使用场景
1. 必须手动操作DOM元素，setState实现不了2. 文件上传<input type=file>3. 某些富文本编辑器，需要传入DOM元素
受控组件 vs非受控组件
1. 优先使用受控组件，符合React设计原则2. 必须操作DOM时，再使用非受控组件
7-15 什么场景需要用React Portals
1. 组件默认会按照既定层次嵌套渲染2. 如何让组件渲染到父组件以外？
Portals使用场景
1. overflow:hidden2. 父组件z-index值太小3. fixed需要放在body第一层
7-16 是否用过React Context
context
使用场景：1. 公共信息（语言、主题）如何传递给每个组件2. 用props太繁琐（比如组件层级很深时，用props需要一层一层的传递，太麻烦）3. 用redux小题大做
组件结构
三层组件：第一层App第二层Toolbar第三层ThemeLink、ThemedButton现在要把第一层组件的数据theme传递给第三层
数据
生产和管理数据
App
// 创建 Context 填入默认值（任何一个 js 变量）const ThemeContext = React.createContext('light')
<ThemeContext.Provider value={this.state.theme}> <Toolbar /> <hr/> <button onClick={this.changeTheme}>change theme</button> </ThemeContext.Provider>
<ThemeContext.Provider></ThemeContext.Provider>管理和生产数据
消费数据
<ThemeContext.Provider></ThemeContext.Provider>的子组件都可以消费数据Toolbar、ThemeLink、ThemedButton都具备消费数据的能力
class 组件如何消费数据
ThemedButton.contextType = ThemeContext或者 static contextType = ThemeContext
函数式组件如何消费数据
<ThemeContext.Consumer></ThemeContext.Consumer>
7-17 React如何异步加载组件
异步组件
1. import()2. React.lazy3. React.Suspense
组件比较大时，或者路由懒加载时使用异步组件
7-18 React性能优化-SCU的核心问题在哪里
性能优化
1. 性能优化，永远是面试的重点2. 性能优化对React更加重要3. 回顾setState的不可变值
1. shouldComponentUpdate(简称SCU)2. PureComponent和React.memo3. 不可变值immutable.js
SCU基本用法
这是一个可选的生命周期默认返回true
通过对比前后的状态，返回true时，会继续渲染返回false，不会渲染可以优化性能
7-19 React性能优化-SCU默认返回什么
父组件更新，会重新触发render渲染，子组件就会渲染
PropsDemo.js
Input 输入框组件List 渲染列表组件
不使用SRC优化时，Input输入内容提交，Footer会跟着更新
React 默认：父组件有更新，子组件则无条件也更新！！！性能优化对于 React 更加重要！SCU 一定要每次都用吗？—— 需要的时候才优化
7-20 React性能优化-SCU一定要配合不可变值
SCU一定要赔着不可变值
SCUDemo2
在List中做SCU优化
_isEqual会做数组和对象的深度比较，尽量把state层级减少
修改list时不可以使用push，它会改变list数组，导致setState前后list值相同SCU中会判断两者相等，就不会重新渲染
SCU使用总结
1. SCU默认返回true，即React默认重新渲染所有子组件2. 必须配合'不可变值'一起使用3. 可先不用SCU，有性能优化时再考虑使用
7-21 React性能优化-PureComponent和memo
PureComponent和memo
1. PureComponent，SCU中实现了浅比较2. memo，函数组件中的PureComponent3. 浅比较已适用大部分情况（尽量不要做深度比较）
PureComponent
React.memo
areEqual是一个类似SCU的函数，把组件和类SCU函数传入React.memo中
7-22 React性能优化-了解immutable.js
immutable.js
1. 彻底拥抱‘不可变值’2. 基于共享数据（不是深拷贝），速度好3. 有一定学习和迁移成本，按需使用
性能优化-小结
1. 面试重点，且涉及React设计理念（不可变值）2. SCU PureComponent React.memo immutable.js3. 按需使用 & state层级
7-23 什么是React高阶组件
关于组件公共逻辑的抽离
1. mixin，已被React弃用2. 高阶组件 HOC(High Order Component)3. Render Props
高阶组件 基本用法
7-24 什么是React Render Props
Render props
HOC vs Render Props
1. HOC: 模式简单，但会增加组件层级，可能会出props漏传的情况2. Render Props：代码简洁，学习成本较高3. 按需使用
7-25 React高级特性考点总结
1. 函数组件2. 非受控组件3. portals4. context5. 异步组件6. 性能优化（重要）7. 高阶组件 HOC8. Render Props
7-26 Redux考点串讲
Redux使用
1. 和Vuex作用相同，但比Vuex学习成本高2. 不可变值，纯函数3. 面试常考
1. 基本概念2. 单项数据流（经常考）3. react-redux4. 异步action(常考)5. 中间件
7-27 描述Redux单项数据流
基本概念
1. store state2. action3. reducer
https://www.redux.org.cn/
单项数据流概述
1. dispatch(action)2. reducer->newState，用不可变值3. subscribe触发通知，触发视图层更新
7-28 串讲react-redux知识点
react-redux
1. <Provider> connect2. connect3. mapStateToProps mapDispatchToProps
7-29 Redux action如何处理异步
7-30 简述Redux中间件原理
7-31 串讲react-router知识点
7-32 React使用-考点总结
0 条评论
下一页
