阅读 2453

React 系统复习如何做最高效(8.24直播总结 + 百道高频面试题整理)

一 前言

哈喽,大家好,我是 我不是外星人 👽 ,8月24号,我作为分享嘉宾,线上参与了一场 《React 系统复习如何做最高效》 的技术分享,接下来我把直播的内容汇总分享给大家。在分享的过程中,也枚举了一些思考题和一些比较热门的面试题目,一同奉上。

这里非常感谢掘金平台提供一次分享技术的机会,也非常感谢掘友们的热心捧场,整体下来还算是成功的,可能刚开始比较紧张,因为毕竟是第一次直播,人生的第一次直播献给了掘金😂,后来渐渐地找回了状态。这里保存了直播过程中的一些截图,整体下来掘友们还是蛮给力的,也参与互动,提了很多问题。

直播场景:

1.jpeg

掘友互动场景

WechatIMG239.jpeg

如果想看直播回放的童鞋,请点击这里: 直播回放

好的,废话不说,进入正题,本次直播分享主要按照以下模块进行的,这些模块是我工作几年来总结的一些经验,同学们可以按照对应的模块进行查缺补漏,

  • React 基础模块。
  • React 优化手段。
  • React 生态掌握。
  • React 设计模式。
  • React 核心原理。
  • React 项目实战。

B549B364-1C38-4A2D-8EFC-B953CFC06F70.jpg

二 知识点梳理

上述的模块进行细化,总结的内容如下:

React基础模块:

  • 操作 jsx
  • 掌握 class 和 function Component。
  • state 更新机制, setStateuseState 的用法和区别。
  • 理解 props ,React 中的 props 可以是什么?
  • 类组件生命周期,函数组件生命周期替代方案, useEffectuseLayoutEffect
  • Ref 是什么,能做些什么?
  • css in React

React优化手段

  • 渲染控制。
  • 渲染调优。
  • 处理海量数据。
  • 细节处理。

React生态

  • React-Router。
  • React-Redux。
  • React-Mobx。
  • 项目工程 umi | dva等。

React设计模式

  • 组合模式。
  • render props 模式。
  • HOC | 装饰器模式。
  • 提供者模式。
  • 自定义 hooks 模式。

React核心原理

  • 事件原理。
  • 调和原理。
  • 调度原理。
  • hooks 原理。
  • diff 流程等等。

React实战

  • 实现表单系统。
  • 实现状态管理工具。
  • 实现路由功能。
  • 自定义 hooks 实践。

以上就是本次直播的提及的 React 应该学习的知识点。用一幅图来概括。

47A69B6D-65A9-4646-8951-D347C6DD739B.jpg

接下来对每一个功能进行拆解。

三 功能拆解

分享的内容细化成每一个我们需要掌握的功能点,以问题的形式切入,我们可以尝试一下?

1 React基础模块

基础模块 jsx

jsx 中总结的知识点:

  • ① 我们写的 jsx 语法最后变成了什么? React JSX -> React element -> React fiber 流程。
  • ② 如何理解 React element?
  • ③ 老版本 React 为什么要引入 React,如下:
import React from 'react'
function Index(){
    return <div>let us learn React!</div>
}
复制代码
  • ④ 如何操作 React Element ,使其变成可控的? react createElement 和 react cloneElement。

  • createElementcloneElement 区别。

  • ⑥ React children 操作方法和应用场景? map ,forEach ,count ,toArray ,only。

  • ⑦ jsx 拓展尝鲜例子:

function Test(num){
   console.log(num)
   useEffect(()=>{
       console.log('1111')
   },[])
   return <div>《React 进阶实践指南》</div>
}

export default function Index(){
    const [ isShow , setIsShow  ]= useState(false)
    return <div>
           <button onClick={() => setIsShow(!isShow)} >点击</button>
           {isShow ? <Test num={1} /> : <Test num={2} />}
         </div>
}
复制代码

如上点击按钮 buttonuseEffect 中的 console.log('1111') 是否打印。

错误分析: 点击按钮,切换 isShow,控制两个 Test 组件的挂载 | 卸载,因为组件重复挂载,那么 useEffect 执行,打印 console.log('1111') ,但是实际结果是这样吗?

效果:

1.gif

流程分析: 为什么 useEffect 中的 console.log 没有打印呢 ?

  • 首先如果我们明白 jsx -> element -> fiber 流程之后,就不难解释这个现象了,写的两个 Test 组件,本质上被 babel 处理成两个 element 对象,element 对象中的 type 属性都指向了 Test 组件函数,两个 element 对象唯一区别是 props 不同。

4DC0372C-EDDD-4889-990A-22A96090BA21.jpg

  • 那么在 React 调和阶段 React ,判断 type 指向相同,就会判断它们是一个组件,所以一次更新的只是被判定 props 变化,走的更新逻辑。

E7B2C227-23FB-4403-AAE4-6E61142554C9.jpg

  • 然后在 Test 函数中,更新组件不会让依赖项为 []useEffect再次执行,所以 console.log('1111') 不会被打印。

解决问题:

如果想要组件挂载 | 卸载效果,那么很简单,给其中的 Test 加入一个 key,就可以解决问题,key 可以作为组件身份的标示,在下一次更新中,就会根据 key 找到复用的 fiber 节点,如果没有找到,那就会走正常的组件挂载 | 卸载流程了。

 {isShow ? <Test num={1} key={1}  /> : <Test num={2} />}
复制代码

基础模块 state

state 中总结的知识点:

  • ① state 更新机制? state 改变到视图更新的流程。
  • ② state 批量更新的规则,为什么会被打破?
  • ③ setState 是同步还是异步的?
  • ④ 类组件的 setState 和函数组件的 useState 有什么共性和区别?
  • ⑤ 函数组件的状态管理方法 useState + useRef ? useState 负责更新,useRef 负责保存状态。
  • ⑥ state 打印问题:
handleClick=()=>{
    setTimeout(()=>{
        this.setState({ number: 1  })
    })
    this.setState({ number: 2  })
    ReactDOM.flushSync(()=>{
        this.setState({ number: 3  })
    })
    this.setState({ number: 4  })
}
render(){
   console.log(this.state.number)
   return <button onClick={ this.handleClick } > 点击 </button>
}
复制代码

点击按钮,打印顺序 ?

打印 3 4 1 ,相信不难理解为什么这么打印了。

首先 flushSync this.setState({ number: 3 }) 设定了一个高优先级的更新,所以 2 和 3 被批量更新到 3 ,所以 3 先被打印。 更新为 4。 最后更新 setTimeout 中的 number = 1。

基础模块 component

component 模块包含的知识点:

  • ① 类组件特点,函数组件特点,两者有什么区别?
  • ② 组件的通信方式?
  • ③ 组件的强化方式?
  • ④ React 对组件的处理和处理时机?
  • ⑤ 公共组件的设计规范?

基础模块生命周期

生命周期知识点:

  • ① 生命周期的介绍,和用法?
  • ② 生命周期的执行时机? 父与子生命周期的执行顺序?
  • ③ 函数组件生命周期的代替方案?
  • ④ useEffect 和 useLayoutEffect 有什么区别,应用场景?
  • ⑤ 废弃的生命周期,为什么要废弃?

一幅图表示 函数组件类组件 所有生命周期的执行时机(包括已经废弃的生命周期):

基础模块 Ref

ref 知识点总结:

  • ① Ref 对象,以及两种 ref 对象创建方法。 useRef 和 createRef
  • ② Ref 有什么作用? 1 获取组件实例,DOM元素 ; 2 组件通信 ; 3 保存状态;
  • ③ Ref 原理 ? commitAttachRefcommitDetachRef
  • ④ Ref 获取的三种方式? function ; Ref 对象 ; String ;
  • ⑤ 如何跨层级传递 ref ?
  • ⑥ 父组件如何获取函数子组件内部状态?

基础模块 Css in React

css 模块总结:

  • ① React css 模块化方案。
  • ② css module 掌握。
  • ③ css in js 掌握。

2 React 优化手段

React 优化手段总结:

  • ① React 渲染控制的方法?。 缓存 react element ,pureComponent ,Memo ,shouldComponentUpdate
  • ② shallowEqual 浅比较原理。
  • ③ React 中节流防抖运用。
  • ④ 合理运用状态管理。
  • ⑤ 按需引入。减少项目体积。
  • ⑥ 代码分割 lazy ,异步组件 Suspense 及其原理。
  • ⑦ diff 算法,合理应用 key 。
  • ⑧ 渲染错误边界,componentDidCatch
  • ⑨ 状态管理工具和 immutable.js 使用。
  • ⑩ useMemo 缓存逻辑。
  • ⑪ memo 的缓存策略。

3 React 生态

React 生态总结: react-router,react-redux ,react-mobx umi dva 等。

  • ① 两种路由模式 | spa 单页面路由原理。
  • ② React router 使用,实现动态路由,自定义路由。
  • ③ Route. Router Switch 分工。
  • ④ 权限路由封装。
  • ⑤ Mobx-react 使用。
  • ⑥ Mobx 和 React Redux 区别?
  • ⑦ Mobx 原理,收集依赖,触发更新。
  • ⑧ React Redux 和 Redux 使用。
  • ⑨ Redux 设计模式 | 中间件原理。
  • ⑩ React Redux 原理?
  • ⑪ react redux 衍生: dva React-saga 等
  • ⑫ React Redux 中 connect 原理 (这里推荐大家看一下源码,学习一下 hooks使用)。

4 React 设计模式

React 设计模式总结:

  • ① React 几种设计模式总结。组合模式,render props模式,提供者模式, hoc 模式,自定义hooks 模式。
  • ② 新老版本 context 用法特点。
  • ③ React context 特点。逐层传递,发布订阅。
  • ④ 新版本 context 消费者几种方式。contextType ,useContext ,consumer
  • ⑤ hoc 两种方式,优缺点?属性代理,反向继承。
  • ⑥ hoc 如何解决静态属性继承问题。
  • ⑦ hoc 如何解决 ref 获取问题。
  • ⑧ hoc 注意事项。
  • ⑨ 自定义 hooks 设计。
  • ⑩ 自定义 hooks 实践。

以下是一些经典设计模式的代码片段(供大家参考):

组合模式

<Form ref={ form } >
    <FormItem name="name" label="我是"  >
        <Input   />
    </FormItem>
    <FormItem name="mes" label="我想对大家说"  >
        <Input   />
    </FormItem>
    <input  placeholder="不需要的input" />
    <Input/>
</Form>
复制代码

提供者模式

function ConsumerDemo(){
     const { color,background } = React.useContext(ThemeContext)
    return <div style={{ color,background } } >消费者</div> 
}
const Son = React.memo(()=> <ConsumerDemo />) // 子组件

const ThemeProvider = ThemeContext.Provider //提供者
export default function ProviderDemo(){
    const [ contextValue , setContextValue ] = React.useState({  color:'#ccc', background:'pink' })
    return <div>
        <ThemeProvider value={ contextValue } >
            <Son />
        </ThemeProvider>
        <button onClick={ ()=> setContextValue({ color:'#fff' , background:'blue' })  } >切换主题</button>
    </div>
}
复制代码

render props模式


const Index = ()=>{
    return <Container>
        <Children />
        { (ContainerProps)=> <Children {...ContainerProps} name={'haha'}  />  }
    </Container>
}
复制代码

hoc模式

@HOC1(styles)
@HOC2
@HOC3
class Index extends React.Componen{
    /* ... */
}
复制代码

自定义hooks模式

function useXXX(){
    const value = React.useContext(defaultContext)
    /* .....用上下文中 value 一段初始化逻辑  */
    const newValue = initValueFunction(value) /* 初始化 value 得到新的 newValue  */
    /* ...... */
    return newValue
}
复制代码

5 React 核心原理

React 核心原理总结:

fiber原理

  • ① 什么是fiber ? Fiber 架构解决了什么问题?
  • ② Fiber root 和 root fiber 有什么区别?
  • ③ 不同fiber 之间如何建立起关联的?
  • ④ React 调和流程?
  • ⑤ 两大阶段 commit 和 render 都做了哪些事情?
  • ⑥ 什么是双缓冲树? 有什么作用?
  • ⑦ Fiber 深度遍历流程?
  • ⑧ Fiber的调和能中断吗? 如何中断?

调度原理

  • ① 异步调度原理?
  • ② React 为什么不用 settimeout ?
  • ③ 说一说React 的时间分片?
  • ④ React 如何模拟 requestIdleCallback?
  • ⑤ 简述一下调度流程?

hooks原理

  • ① React Hooks 为什么必须在函数组件内部执行?React 如何能够监听 React Hooks 在外部执行并抛出异常。
  • ② React Hooks 如何把状态保存起来?保存的信息存在了哪里?
  • ③ React Hooks 为什么不能写在条件语句中?
  • ④ useMemo 内部引用 useRef 为什么不需要添加依赖项,而 useState 就要添加依赖项。
  • ⑤ useEffect 添加依赖项 props.a ,为什么 props.a 改变,useEffect 回调函数 create 重新执行。
  • ⑥ React 内部如何区别 useEffect 和 useLayoutEffect ,执行时机有什么不同?

事件原理

  • ① React 为什么有自己的事件系统?
  • ② 什么是事件合成 ?
  • ③ 如何实现的批量更新?
  • ④ 事件系统如何模拟冒泡和捕获阶段?
  • ⑤ 如何通过 dom 元素找到与之匹配的fiber?
  • ⑥ 为什么不能用 return false 来阻止事件的默认行为?
  • ⑦ 事件是绑定在真实的dom上吗?如何不是绑定在哪里?
  • ⑧ V17 对事件系统有哪些改变

6 React 实践

实践是检验真理的唯一标准,如果想要进阶 React ,在理论知识基础上,也需要去尝试敲代码。

  • 如过没有做过React 项目,尝试写一个 demo 。
  • 尝试写一个公共组件。
  • 尝试写一个高阶组件。
  • 尝试写一个自定义 hooks。
  • 尝试在项目中使用多种设计模式。

7 React 学习的几个重要阶段

进阶 React 可以按照以下阶段去进阶。

  • 第一阶段:明白基础 api ,尝试写项目,多尝试一些复杂的逻辑场景。会用一些React生态。

  • 第二阶段:尝试封装一些基础组件,hoc,尝试使用一些设计模式。

  • 第三阶段:学习一些原理,可以尝试看一下核心源码。

  • 第四阶段:可以自己根据业务需求写一些库,考虑开源。

四 总结

以上就是本次直播分享 React 系统学习部分的内容,大家可以根据自己对 React 的掌握程度,进行查缺补漏,最后祝愿大家早日进阶 React 技术栈。

《React进阶实践指南小册》

本次分享的知识点,在这本小册中都能找到答案。 目前小册已经完结,是终点亦是起点, 小册内容将持续更新,随着 React 版本升级持续维护,并有持续更新章节~ 提前透露,小册接下来会补充:React context 原理部分,内容补充到第八章。 奉上几个小册 7 折 优惠码 F3Z1VXtv ,先到先得~

感兴趣的同学可以关注笔者公众号 : 前端Sharing 持续分享前端硬文。

文章分类
前端