周元-React学习笔记

Vue & React

• Vue是怎么更新组件的？

  • data.x => 修改
    • set 函数 nofity
    • get 函数 watcher
    • 观察者 => data.x => 1 => 2
    • value => 2

• React 更新

• 从根节点遍历一遍

1. react是immutable（不可变的）, vue是mutable（可变 的）
2. react是运行时框架，vue是半编译框架

/**
 * 循环
 */

// vue
<div v-for="item in list">
    <div>{{item}}</div>
</div>



// react
<div>
    {list.map(item => <div>{item}</div>)}
</div>


<div>
    {(function() {
        let res = [];
        list.forEach(item => res.push(<div>{item}</div>))
        return res.join('')
    })()}
</div>

function getList() {
    return list.map(item => <div>{item}</div>)
}
<div>{getList()}</div>

• react更新

1. hook:useState
2. class: setState | forUpdate

React初体验

node v16+

npm create react-create-app

• 可以在{}里写js语法，不能写语句
• 在react中要修改一个数据触发界面更新，需要将数据设置为可控状态：useState, this.setState()
• 小写字母开发，默认是原生组件：<button></buttton>；大写字母开头是自定义的组件

why hooks?

1. 解决逻辑复用困难
2. this难以理解
3. 拥抱FP，函数式编程

React高级用法

• useState, useEffect, useLayoutEffect, useInsertionEffect

• useRef, useImperativeHandle, forwardRef

• useReducer

• useMemo, useCallback

避免组件进行不必要的更新~

HOC

1. 属性代理 就是用组件包裹一层代理组件，在代理组件上，可以做一些，对源组件的强化操作。这里注意属性代理返回的是一个新组件，被包裹的原始组件，将在新的组件里被挂载。

一般用在一些业务的切面上

• 优点 低耦合 类、函数都可以 业务组件隔离性好

• 缺点 无法获取原始组件的状态 如果要获取，要用 ref

2. 反向继承 反向继承和属性代理有一定的区别，在于包装后的组件继承了原始组件本身，所以此时无须再去挂载业务组件。

一般用在一些业务的本身上

• 优点 获取状态方便

• 缺点 函数组件用不了 逻辑很脏，影响很大。

状态管理

1. redux
2. provider, consumer / provide,inject

性能优化

1. 一部分性能优化的方式，就是用缓存短期数据，暂时取代长期数据。

• 正常： 请求后端 ------------ 返回前端
• 优化： 先用缓存的前端内容 --- 问后端这个东西过期了没 --- 直接用 （协商缓存）

2. 还有一部分，就是提前把这些数据拿到。

状态管理需要做？

• 独立的区域去存储数据

  1. 闭包
  2. 单例模式

• 数据修改，能够让使用这个数据的地方感知到

  1. 发布订阅
  2. Proxy / Object.defineproperty

• model改了，view同步更新

  1. forceUpdate
  2. $forceUpdate
  3. data.x = Math.random()

mbox

观察者模式，proxy

React路由

路由的核心：监听URL的变化，根据 path 和 components 的对应关系，触发组件进行卸载和挂载，同时使用 context 进行数据注入。

• 分类

1. history路由
2. hash路由
3. momery路由

Q：history和hash的区别？

1. hash 路由一般会携带一个 # 号，不美观；history 路由就不存在美观问题
2. 默认 hash 路由不会像浏览器发出请求，一般是用作锚点；但是history -> go, back, forward 前进后退，都会向服务端请求；
3. hash 模式一般是不支持 SSR 的，history 可以支持。
4. history 路由在部署的时候，nginx，需要自己去处理跳转

# nginx配置
location / {
    try_files uri $uri /xx/xxx/xx/index.html
}

Q: 现在的路由，和以前的有啥区别？

以前是，服务端控制页面加载，现在是前端自己，控制组件渲染，来模拟跳转。 页面跳转的时候，浏览器要劫持 URL 的变化。

• react-router

提供核心的 API，如：Router, Route, Switch 这些，但是，不提供和 DOM 相关的；

• react-router-dom

提供 BrowserRouter, HashRouter, Link 这些API，可以通过 dom 操作触发事件控制路由；

BrowserRouter： pushState, popState 事件，构建路由;

HashRouter： hashChange 构建路由

备注

• React是怎么更新组件的？

  • setState实现原理？

• React diff原理？

• 新建一个React项目：create-react-app

  • React v16新语法：useState，hooks ...
  • useAPI: useEffect,useLayoutEffect, useMemo, useCallback

• 箭头函数，和bind ？

• 什么是闭包陷阱？

• React 高级API的使用？常用API梳理？

• HOC是什么？使用？

  • 面试题：反向继承优缺点？

• redux使用？实现原理梳理？redux 和 mobx 的区别？

• redux 跟 vuex 实现原理有区别？

• React Router 的使用？ router.js手写一遍？实现原理梳理？

其他

• 内置 React Hook (opens new window)