7. 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使用-考点总结