React知识点
常见面试题：
1.React组件如何通讯？
2.JSX本质是什么？
3.context是什么？有何用途？
4.shouldComponentUpdate的用途？
5.描述redux单项数据流
6.setState是同步还是异步（场景题）
一、基本使用
1.JSX基本使用
1.1获取变量、插值
image.png
1.2 表达式
jsx中不能用if else语句，可以使用三元表达式
image.png
1.3子元素
image.png
1.4 class
不能写class，要写className
image.png
1.5 style样式
把样式保存在一个变量，然后用{}包裹；而下面的{{}}，外面的括号表示要包裹一个js变量，里面的括号表示一个对象
image.png
1.6原生
image.png
image.png
1.7 加载组件
image.png
2.条件判断
2.1 if else
image.png
2.2 三元表达式
image.png
2.3逻辑运算符 && ||
image.png
3.渲染列表
3.1 map
3.2 key
image.png
image.png
image.png
image.png
4.事件
4.1 bind this
方法一、推荐
image.png
方法二
image.png
方法三：推荐
image.png
image.png
4.2 关于event参数
？？？？
image.png
传递id和title，接收参数时，会在后面追加一个event参数
5.表单
5.1 受控组件
image.png
image.png
image.png
5.2 textarea-使用value
image.png
image.png
5.3 select-使用value
image.png
image.png
5.4 check使用checked
image.png
image.png
5.5 radio
image.png
image.png
image.png
6.组件使用
6.1 props传递数据
父->子：使用props属性
image.png
接收：
image.png
6.2 props传递函数
image.png
接收
image.png
6.3 props 类型检查
安装prop-types:
引入import PropTypes from 'prop-types'
image.png
7.setState
7.1 不可变值
例子：
image.png
image.png
7.1.1 不可变值（函数式编程，纯函数）-数组
image.png
注：都不能直接去修改原对象
7.1.2 不可变值-对象
image.png
7.2 setState可能是异步更新（也有可能是同步更新）
7.2.1 this.set中setState异步情况：直接在this.setState里面用是异步的
image.png
image.png
7.2.2
setTimeout中setStat同步情况：而
this.setState在setTimeout和自定义的DOM事件中用是同步的
image.png
image.png
自己定义的DOM事件，setState是同步的：
image.png
image.png
7.3可能会被合并：传入对象时会被合并，传入函数时不会被
7.3.1 传入对象
image.png
//1
7.3.2 传入函数：函数不像对象，不能被合并
image.png
8.生命周期
React生命周期分三个阶段：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数
image.png
此外，React 还提供两种特殊状态的处理函数
image.png
常用：
image.png
不常用：
image.png
9.React高级特性
9.1函数组件
class组件：
image.png
函数组件：
1.纯函数，输入
props，输出JSX2.没有实例，没有生命周期，没有state
3.不能扩展其他方法
image.png
9.2非受控组件
9.2.1 ref、defaultValue 和defaultChecked、手动操作DOM元素
//input defaultValue(通过defaultValue给出一个默认值，变化的值通过ref获取)
image.png
image.png
image.png
//checkbox defaultCheckbox
image.png
例子：文件上传
image.png
image.png
image.png
9.2.2 非受控组件-使用场景
1.不许手动操作DOM元素，setState实现不了（setState只能实现前端页面渲染方面的，不能实现交互方面）
2.文件上传<input type=file>
3.某些富文本编辑器，需要传入DOM元素
9.2.3受控组件和非受控组件
答：优先使用受控组件，符合react设计原则；必须操作DOM时，在使用非受控组件，比如文件上传
9.3 Portals传送门
组件默认会按照既定层次嵌套渲染
如何让组件渲染到父组件以外
image.png
image.png
因为position:fixed是相对于窗口定位的，要放在body下面
使用场景：
1.overflow:hidden：产生bfc时，父组件会限制自组件的展示，设置portals会使子组件逃离父组件
2.父组件z-index值太小
3.fixed需要放在body第一层级
9.4 context
公共信息（语言、主题）如何传递给每个组件？用props太繁琐，用redux小题大做，因此用context最为合适
创建：
image.png
生产：
image.png
消费：
image.png
此例子没有在Toolbar使用，而是在其子组件
<ThemedButton />和<ThemeLink />中使用：class组件中的使用方法：首先指定contextType读取当前ThemeContext,或者用
static contextType=ThemeContext也可以，再用this.context获取theme，react会网上找最近的theme Provider
image.png
而函数组件：函数组件没有实例，通过.Consumer进行传递
image.png
面试时要说明api：创建、生成、消费
9.5 异步组件
9.5.1 import()
9.5.2 React.lazy
9.5.3 React.Suspense
image.png
9.6 性能优化
1.shouldComponentUpdate（简称SCU）:
image.png
//React默认：父组件有更新，子组件则无条件
eg1：
image.png
image.png
//Footer组件
image.png
效果：
image.png
注：上面的效果图可知，input输入框和list列表组件有新数据而更新，使得Footer组件没有新数据也被迫更新，这样会造成不合理。
在React逻辑里，默认情况下父组件有更新，子组件也会无条件更新。
怎么性能优化？使用SCU
优化Footer组件：
image.png
如果footer组件的数据信息text和之前的一样，就不重复更新
//效果图
image.png
eg2：
SCU必须配合不可变值：
image.png
image.png
image.png
image.png
image.png
注意不可变值，不能用push，会改变原数组，可使用concat
2.PureComponent和memo
class组件：PureComponent,SCU中上线了浅比较；
image.png
函数组件：`memo,函数组件中的
image.png
PureComponent`;
浅比较已使用大部分情况（尽量不要做深度比较）
3.inmutable.js
彻底拥抱“不可变值”；
inmutable.js基于共享数据（不是深拷贝），速度好；
有一定学习和迁移成本，按需使用
image.png
性能优化-小结：
1）.面试重点，涉及react涉及理念
2）.SCU PureComponent memo immutable.js
3）.按需使用&state层级
9.7 关于组件公共逻辑的抽离：
1） minxin，已被React弃用
2）高阶组件HOC
高阶组件HOC
3） Render Props
高阶组件HOC 基本用法
image.png
举例：
image.png
image.png
image.png
就如hooks里面的connect高阶组件：
image.png
connect源码：
image.png
Render Props 基本用法
image.png
image.png
例子：
image.png
image.png
image.png
HOC与Render Props：
HOC:模式简单，但会增加组件层级
Render Props:代码简洁，学习成本较高
二、 Redux使用总结
2.1 基本概念
单项数据流概述：
dispatch(action);
reducer->newState;
subscribe触发通知
2.2 react-redux
四个要点：
<provider>、connect、mapStateToProps、
mapDispatchToProps.
代码演示：
生产store
image.png
消费store：
image.png
image.png
image.png
还有mapStateToProps、mapDispatchToProps：
connect是高阶组件
image.png
image.png
2.3 异步action
同步时，直接返回action对象；
image.png
异步时，需要返回一个函数，函数会接收dispatch参数，再利用fetch进行ajax异步获取数据，再dispatch
image.png
image.png
2.4 中间件原理
常用的中间件：redux-thunk、 redux-promise 、redux-saga、
image.png
相对dispatch加入一些业务逻辑处理，需要对dispatch进行改造处理，
image.png
image.png
image.png
3 React-router使用
3.1 路由模式（hash、H5 history）
引入
hash路由
image.png
H5 history路由：
image.png
使用：
image.png
3.2 路由配置（动态路由、懒加载）
image.png
跳转路由：
image.png
懒加载：
image.png
先用import获取异步组件，传进lazy()，就可以直接使用。其中Suspense可以兼容loading情况
4.React原理
4.1 函数式编程
一种编程范式、纯函数、不可变值；
回顾SCU和redux
4.2 vdom和diff
1.只比较同一层级，不跨级比较
2.tag不相同，则直接删掉重建，不再深度比较
3.tag和key，两者都相同，则认为是相同节点，不再深度比较
4.3 JSX本质
1.JSX等同于Vue模板
2.Vue模板不
image.png
eg：
//JSX基本用法
image.png
image.png
//JSX style
image.png
image.png
//JSX加载组件
image.png
image.png
//JSX事件
image.png
用法
//JSX list
image.png
image.png
总结：
React.createElement即h函数，返回vnode，
第一个参数可能是组件或者html标签（组件名首字母要大写，html标签不用大写），然后vnode通过patch(elem,vnode)和patch(vnode,newVnode)进行渲染。
4.4 合成事件
所有事件挂载到documnet上， event不是原生的，是SyntheticEvent合成事件对象
image.png
从div触发冒泡到document上，document会生成统一的react event，也就是合成事件Synthetic Event对象；在合成事件层，再派发事件，即事件处理函数
image.png
注：
1.event是SyntheticEvent，模拟出来DOM事件所有能力
2.event.nativeEvent是原生事件对象
3.所有的事件，都被挂载到document上
4.和DOM事件不一样，和Vue事件不一样
为什么要合成事件机制？
答：1.更好的兼容性和跨平台
2.载到documnet，减少内存消耗，避免频繁解绑
3.方便事件的统一管理（如事务机制）
4.5 setState 和batchUpdate
有时异步（普通使用），有时同步（setTimeout、DOM事件）；
有时合并（对象形式），有时不合并（函数形式）；
后者比较好理解（像Object.assign）,主要讲解前者
setState主流程：
image.png
左边：
image.png
右边：
image.png
那么为什么会出现上面的异步或者同步的不同走向？
image.png
而同步：
image.png
函数开始都需要设置isBatchingUpdates设置为true，再执行该函数，结束时设置为false。
左边分析：
开始isBatchingUpdates处于true状态，继续执行函数，执行完再isBatchingUpdates设置成false。
右边分析：开始isBatchingUpdates处于true状态，遇到setTimeout异步等待，先执行isBatchingUpdates设置为false，再回到setTimeout函数，此时isBatchingUpdates是false状态，再执行函数程序
因此判断setState是异步还是同步，只需关注isBatchingUpdates是true还是false即可
image.png
总结：setState是异步还是同步？
答：1.setState无所谓是异步还是同步2.主要是看能否命中batchUpdate机制
3.判断isBatchingUpdates
那么，哪些能命中batchUpdate机制？
1.生命周期（和它调用的函数）
2.React中注册的是事件（和他调用的函数），比如onclick事件、onchange事件
总之是react可以“管理”的入口
哪些不能命中batchUpdate机制？
答：
React“管不到”的入口：1.setTimeout 、setInterval等（和他调用的函数）
2.自定义的DOM事件（和他调用的函数）
transaction事务机制
定义一个开始的逻辑，再执行该函数体，再定义一个结束的逻辑
image.png
image.png
例子：
image.png
image.png
4.6 组件渲染和更新过程
渲染过程？
1.props 和state
2.render()生成vnode
3.patch（elem,vnode）
更新过程？
1.setState（newState）-->dirtyComponents（可能有子组件）
2.render()生成newVnode
3.patch(vnode,newVnode)
更新的两个阶段：
上述的patch被拆分为两个阶段:
1.reconciliation阶段-执行diff算法，纯JS计算
2.commit阶段-将diff结果渲染DOM
如果不分成这两个阶段，可能会有性能问题：
答：首先JS是单线程， 且和DOM渲染共用一个进程；当组件足够复杂，组件更新时计算和渲染都压力大；
同时再有DOM操作新要求（动画，鼠标拖拽等），将卡顿
解决方案：fiber
答：首先将reconciliation阶段进行任务拆分（commit无法拆分）；再DOM需要渲染时(window.requestIdleCallback)暂停reconciliation阶段任务片段，空闲时恢复；
image.png
面试题：
1.组件之间如何通讯？
答:父子组件 ：父给子组件props，子组件给父组件传递函数，让父组件调用；
自定义事件；
Redux和Context：
2.JSX本质是什么？
答：createElement，执行返回vnode，利用patch
3.Context是什么？如何应用？
答：父组件，向其下所有子孙组件传递信息，如一些简单的公共信息：主题色、语言等；简单的用context，复杂的用redux，中间程度的用context
3.SCU性能优化？
答：为了性能优化，但需要配合“不可变值”一起使用，否则会出错
4.setState场景题
image.png
前两个都是异步，都是0，前两个合并之后是1，第三个setTimeout同步之后变成2，第四个setTimeout同步之后变成3
5.纯函数？
答：返回一个新值，没有副作用（不会偷偷修改其他值）
重点是不可变值，如arr1=arr.slice()
6.组件生命周期
答：单组件生命周期、父子组件生命周期、注意SCU
7.React发起ajax应该在哪个生命周期？
答：放在componentDidMount，也就是说要放在DOM已经渲染完的周期上才发起ajax，这样才流畅
8.渲染列表，为何使用key？
答：同vue一样，必须用key，且不能是index和random，应该是业务上的id；diff算法中通过tag和key来判断，是否是sameNode，减少渲染次数，提升渲染性能
9.函数组件和class组件区别？
答：纯函数，输入props，输出JSX;没有实例，没有生命周期，没有state；不能扩展其他方法
- 什么是受控组件？
答：表单的值，受state控制；需要自行监听onChange，更新state；对比非受控组件；
11.如何使用异步组件？
答：加载大组件；路由懒加载
12.多个组件有公共逻辑，如何抽离？
答：高阶组件；Render Props；mixin已被React废弃
13.redux如何进行异步请求？
答：使用异步action；如redux-thunk
14.react-router如何配置懒加载
image.png
- PureComponent有何区别？
答：实现了浅比较的SCU，性能优化，结合不可变值使用
16.React事件和DOM事件的区别
答：所有的事件是挂载到document上，event不是原生的，是SyntheticEvent合成事件对象；dispatchEvent机制
17.React性能优化？
答：1.渲染列表时加key
2.自定义事件、DOM事件及时销毁
3.合理使用异步组件
4.减少函数bind this的次数
5.合理使用SCU PureComponent和memo
6.合理使用不可变值Immutable.js
7.webpack层面的优化
8.前端通用的性能优化，如图片懒加载
9.使用SSR
18.React和Vue的区别
答：共同点：1）.都支持组件化；2）都是数据驱动视图；3）都使用vdom操作DOM；
4）React使用JSX拥抱JS，Vue使用模板拥抱html
5）React函数式编程，vue声明式编程
6）React更多需要自力更生，vue把想要的都给你
