戴德!~~没想到上篇文章能这么受人人的喜好，激动不已。🤩。然则却也是坐卧不宁，这也意味着义务。下篇许多学问点都须要比较深切的研讨和明白，博主也是程度有限，忧郁本身没法负担人人的期待。不过究竟照样须要摆正心态，放下心情，一字一字专心专注，不负本身，也不负社区。与列位小伙伴互相进修，合营生长，以此共勉！

近来营业忙碌，精力有限，虽然我只管严谨和反复订正，但文章也定有疏漏。上篇文章中，许多小伙伴们指出了不少的题目，为此我也是深表抱歉，我也会虚心接收和改正毛病。也非常感激那末多经由历程微信或民众号与我讨论的小伙伴，谢谢人人的支撑和勉励。

弁言

人人晓得，React 如今已在前端开辟中占有了主导的职位。优异的机能，壮大的生态，让其没法阻挠。博主面的 5 家公司，悉数是 React 手艺栈。据我所知，大厂也大部份以 React 作为主手艺栈。React 也成为了口试中并不可少的一环。

中篇主要从以下几个方面临 React 睁开论述:

• Fiber
• 性命周期
• SetState
• HOC(高阶组件)
• Redux
• React Hooks
• SSR
• 函数式编程

本来是设想只要高低两篇，但是写着写着越写越多，受限于篇幅，也为了有更好的浏览体验，只好拆分出中篇，愿望列位童鞋别介意。🙃，别的，下篇另有 Hybrid App / Webpack / 机能优化 / Nginx 等方面的学问，敬请期待。

发起照样先从上篇基本最先哈~有个循规蹈矩的历程: 口试上篇。🤑

进阶学问

框架: React

React 也是现如今最盛行的前端框架，也是许多大厂口试必备。React 与 Vue 虽有差别，但一样作为一款 UI 框架，虽然完成可以不一样，但在一些理念上照样有相似的，比方数据驱动、组件化、假造 dom 等。这里就主要枚举一些 React 中独占的观点。

<h3 id=”1″>1. Fiber</h3>

React 的中心流程可以分为两个部份:

• reconciliation (调理算法，也可称为 render):

  • 更新 state 与 props；
  • 挪用性命周期钩子；
  • 天生 virtual dom；
  • 经由历程新旧 vdom 举行 diff 算法，猎取 vdom change；
  • 肯定是不是须要从新衬着

• commit:

  • 如须要，则操纵 dom 节点更新；

要相识 Fiber，我们起首来看为何须要它？

• 题目: 跟着应用变得愈来愈巨大，悉数更新衬着的历程最先变得费劲，大批的组件衬着会致使主历程长时候被占用，致使一些动画或高频操纵涌现卡顿和掉帧的状况。而症结点，就是 同步壅塞。在之前的调理算法中，React 须要实例化每一个类组件，天生一颗组件树，应用 同步递归 的体式格局举行遍历衬着，而这个历程最大的题目就是没法 停息和恢复。
• 处置惩罚方案: 处置惩罚同步壅塞的要领，一般有两种: 异步 与 使命支解。而 React Fiber 就是为了完成使命支解而降生的。

• 简述:

  • 在 React V16 将调理算法举行了重构， 将之前的 stack reconciler 重组成新版的 fiber reconciler，变成了具有链表和指针的 单链表树遍历算法。经由历程指针映照，每一个单元都记录著遍历当下的上一步与下一步，从而使遍历变得可以被停息和重启。
  • 这里我明白为是一种 使命支解调理算法，重假如 将本来同步更新衬着的使命支解成一个个自力的 小使命单元，依据差别的优先级，将小使命疏散到浏览器的余暇时候实行，充分利用主历程的事宜轮回机制。

• 中心:

  • Fiber 这里可以具象为一个 数据构造:

  class Fiber {
      constructor(instance) {
          this.instance = instance
          // 指向第一个 child 节点
          this.child = child
          // 指向父节点
          this.return = parent
          // 指向第一个兄弟节点
          this.sibling = previous
      }    
  }

- **链表树遍历算法**: 经由历程 **节点保留与映照**，便可以随时地举行 住手和重启，如许便能到达完成使命支解的基本前提；
    - 1、起首经由历程不停遍历子节点，到树末端；
    - 2、最先经由历程 sibling 遍历兄弟节点；
    - 3、return 返回父节点，继续实行2；
    - 4、直到 root 节点后，跳出遍历；
 
- **使命支解**，React 中的衬着更新可以分红两个阶段:
    - **reconciliation 阶段**: vdom 的数据对照，是个合适拆分的阶段，比方对照一部份树后，先停息实行个动画挪用，待完成后再回来继续比对。
    - **Commit 阶段**: 将 change list 更新到 dom 上，不合适拆分，因为应用 vdom 的意义就是为了节约传说中最耗时的 dom 操纵，把一切操纵一次性更新，假如在这里又拆分，那不是又懵了么。🙃

- **疏散实行**: 使命支解后，就可以把小使命单元疏散到浏览器的余暇时期去列队实行，而完成的症结是两个新API: `requestIdleCallback` 与 `requestAnimationFrame`
    - 低优先级的使命交给`requestIdleCallback`处置惩罚，这是个浏览器供应的事宜轮回余暇期的回调函数，须要 pollyfill，而且具有 deadline 参数，限定实行事宜，以继续切分使命；
    - 高优先级的使命交给`requestAnimationFrame`处置惩罚；

```js
// 相似于如许的体式格局
requestIdleCallback((deadline) => {
    // 当有余暇时候时，我们实行一个组件衬着；
    // 把使命塞到一个个碎片时候中去；
    while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && nextComponent) {
        nextComponent = performWork(nextComponent);
    }
});
```

- **优先级战略**: 文本框输入 > 本次调理完毕需完成的使命 > 动画过渡 > 交互反应 > 数据更新 > 不会显现但以防将来会显现的使命 

Tips:

Fiber 实在可以算是一种编程头脑，在别的言语中也有许多应用(Ruby Fiber)。当碰到历程壅塞的题目时，使命支解、异步挪用 和 缓存战略 是三个明显的处置惩罚思绪。

<h3 id=”2″>2. 性命周期</h3>

在新版本中，React 官方对性命周期有了新的 变动发起:

• 应用getDerivedStateFromProps 替换componentWillMount；
• 应用getSnapshotBeforeUpdate 替换componentWillUpdate；
• 防止应用componentWillReceiveProps；

实在该变动的缘由，恰是因为上述提到的 Fiber。起首，从上面我们晓得 React 可以分红 reconciliation 与 commit 两个阶段，对应的性命周期以下:

• reconciliation:

  • componentWillMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate

• commit:

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

在 Fiber 中，reconciliation 阶段举行了使命支解，涉及到 停息 和 重启，因而可以会致使 reconciliation 中的性命周期函数在一次更新衬着轮回中被 屡次挪用 的状况，发作一些不测毛病。

新版的发起性命周期以下:

class Component extends React.Component {
  // 替换 `componentWillReceiveProps` ，
  // 初始化和 update 时被挪用
  // 静态函数，没法应用 this
  static getDerivedStateFromProps(nextProps, prevState) {}
  
  // 推断是不是须要更新组件
  // 可以用于组件机能优化
  shouldComponentUpdate(nextProps, nextState) {}
  
  // 组件被挂载后触发
  componentDidMount() {}
  
  // 替换 componentWillUpdate
  // 可以在更新之前猎取最新 dom 数据
  getSnapshotBeforeUpdate() {}
  
  // 组件更新后挪用
  componentDidUpdate() {}
  
  // 组件行将烧毁
  componentWillUnmount() {}
  
  // 组件已烧毁
  componentDidUnMount() {}
}

• 应用发起:

  • 在constructor初始化 state；
  • 在componentDidMount中举行事宜监听，并在componentWillUnmount中解绑事宜；
  • 在componentDidMount中举行数据的要求，而不是在componentWillMount；

  • 须要依据 props 更新 state 时，应用getDerivedStateFromProps(nextProps, prevState)；

    • 旧 props 须要本身存储，以便比较；

public static getDerivedStateFromProps(nextProps, prevState) {
    // 当新 props 中的 data 发作变化时，同步更新到 state 上
    if (nextProps.data !== prevState.data) {
        return {
            data: nextProps.data
        }
    } else {
        return null1
    }
}

- 可以在`componentDidUpdate`监听 props 或许 state 的变化，比方:

```js
componentDidUpdate(prevProps) {
    // 当 id 发作变化时，从新猎取数据
    if (this.props.id !== prevProps.id) {
        this.fetchData(this.props.id);
    }
}
```

- 在`componentDidUpdate`应用`setState`时，必需加前提，不然将进入死轮回；
- `getSnapshotBeforeUpdate(prevProps, prevState)`可以在更新之前猎取最新的衬着数据，它的挪用是在 render 以后， mounted 之前；
- `shouldComponentUpdate`: 默许每次挪用`setState`，肯定会终究走到 diff 阶段，但可以经由历程`shouldComponentUpdate`的性命钩子返回`false`来直接阻挠背面的逻辑实行，一般是用于做前提衬着，优化衬着的机能。

<h3 id=”3″>3. setState</h3>

在相识setState之前，我们先来简朴相识下 React 一个包装构造: Transaction:

• 事件 (Transaction):

  • 是 React 中的一个挪用构造，用于包装一个要领，构造为: initialize – perform(method) – close。经由历程事件，可以一致治理一个要领的最先与完毕；处于事件流中，示意历程正在实行一些操纵；

• setState: React 中用于修正状况，更新视图。它具有以下特征:

• 异步与同步: setState并非纯真的异步或同步，这实在与挪用时的环境相干:

  • 在 合成事宜 和 性命周期钩子(除 componentDidUpdate) 中，setState是”异步”的；

    • 缘由: 因为在setState的完成中，有一个推断: 当更新战略正在事件流的实行中时，该组件更新会被推入dirtyComponents行列中守候实行；不然，最先实行batchedUpdates行列更新；

      • 在性命周期钩子挪用中，更新战略都处于更新之前，组件仍处于事件流中，而componentDidUpdate是在更新以后，此时组件已不在事件流中了，因而则会同步实行；
      • 在合成事宜中，React 是基于 事件流完成的事宜托付机制 完成，也是处于事件流中；
    • 题目: 没法在setState后立时从this.state上猎取更新后的值。
    • 处置惩罚: 假如须要立时同步去猎取新值，setState实际上是可以传入第二个参数的。setState(updater, callback)，在回调中即可猎取最新值；

  • 在 原生事宜 和 setTimeout 中，setState是同步的，可以立时猎取更新后的值；

    • 缘由: 原生事宜是浏览器本身的完成，与事件流无关，自然是同步；而setTimeout是放置于定时器线程中延后实行，此时事件流已完毕，因而也是同步；
• 批量更新: 在 合成事宜 和 性命周期钩子 中，setState更新行列时，存储的是 兼并状况(Object.assign)。因而前面设置的 key 值会被背面所掩盖，终究只会实行一次更新；

• 函数式: 因为 Fiber 及 兼并 的题目，官方引荐可以传入 函数 的情势。setState(fn)，在fn中返回新的state对象即可，比方this.state((state, props) => newState)；

  • 应用函数式，可以用于防止setState的批量更新的逻辑，传入的函数将会被 递次挪用；

• 注重事项:

  • setState 兼并，在 合成事宜 和 性命周期钩子 中屡次一连挪用会被优化为一次；

  • 当组件已被烧毁，假如再次挪用setState，React 会报错正告，一般有两种处置惩罚办法:

    • 将数据挂载到外部，经由历程 props 传入，如放到 Redux 或 父级中；
    • 在组件内部保护一个状况量 (isUnmounted)，componentWillUnmount中标记为 true，在setState前举行推断；

<h3 id=”4″>4. HOC(高阶组件)</h3>

HOC(Higher Order Componennt) 是在 React 机制下社区构成的一种组件形式，在许多第三方开源库中表现壮大。

• 简述:

  • 高阶组件不是组件，是 加强函数，可以输入一个元组件，返回出一个新的加强组件；
  • 高阶组件的主要作用是 代码复用，操纵 状况和参数；

• 用法:

  • 属性代办 (Props Proxy): 返回出一个组件，它基于被包裹组件举行 功用加强；

    • 默许参数: 可认为组件包裹一层默许参数；

    function proxyHoc(Comp) {
        return class extends React.Component {
            render() {
                const newProps = {
                    name: 'tayde',
                    age: 1,
                }
                return <Comp {...this.props} {...newProps} />
            }
        }
    }

    
    - **提取状况**: 可以经由历程 props 将被包裹组件中的 state 依靠外层，比方用于转换受控组件:

    ```js
    function withOnChange(Comp) {
        return class extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    name: '',
                }
            }
            onChangeName = () => {
                this.setState({
                    name: 'dongdong',
                })
            }
            render() {
                const newProps = {
                    value: this.state.name,
                    onChange: this.onChangeName,
                }
                return <Comp {...this.props} {...newProps} />
            }
        }
    }
    ```
    
    应用姿态以下，如许就可以非常疾速的将一个 `Input` 组件转化成受控组件。 
    
    ```js
    const NameInput = props => (<input name="name" {...props} />)
    export default withOnChange(NameInput)
    ```
    
    - **包裹组件**: 可认为被包裹元素举行一层包装，

    ```js
    function withMask(Comp) {
      return class extends React.Component {
          render() {
              return (
                  <div>
                      <Comp {...this.props} />
                        <div style={{
                          width: '100%',
                          height: '100%',
                          backgroundColor: 'rgba(0, 0, 0, .6)',
                      }} 
                  </div>
              )
          }
      }
    }
    ```
    
- **反向继续** (Inheritance Inversion): 返回出一个组件，**继续于被包裹组件**，经常使用于以下操纵:
    
    ```js
    function IIHoc(Comp) {
        return class extends Comp {
            render() {
                return super.render();
            }
        };
    }
    ```
    
    - **衬着挟制** (Render Highjacking)
        - **前提衬着**: 依据前提，衬着差别的组件

        ```js
        function withLoading(Comp) {
            return class extends Comp {
                render() {
                    if(this.props.isLoading) {
                        return <Loading />
                    } else {
                        return super.render()
                    }
                }
            };
        }
        ```
        
        - 可以直接修正被包裹组件衬着出的 React 元素树
        
    - **操纵状况** (Operate State): 可以直接经由历程 `this.state` 猎取到被包裹组件的状况，并举行操纵。但如许的操纵轻易使 state 变得难以追踪，不容易保护，郑重应用。
    

• 应用场景:

  • 权限控制，经由历程笼统逻辑，一致对页面举行权限推断，按差别的前提举行页面衬着:

  function withAdminAuth(WrappedComponent) {
      return class extends React.Component {
          constructor(props){
              super(props)
              this.state = {
                  isAdmin: false,
              }
          } 
          async componentWillMount() {
              const currentRole = await getCurrentUserRole();
              this.setState({
                  isAdmin: currentRole === 'Admin',
              });
          }
          render() {
              if (this.state.isAdmin) {
                  return <Comp {...this.props} />;
              } else {
                  return (<div>您没有权限检察该页面，请联络治理员！</div>);
              }
          }
      };
  }

- **机能监控**，包裹组件的性命周期，举行一致埋点:

```js
function withTiming(Comp) {
    return class extends Comp {
        constructor(props) {
            super(props);
            this.start = Date.now();
            this.end = 0;
        }
        componentDidMount() {
            super.componentDidMount && super.componentDidMount();
            this.end = Date.now();
            console.log(`${WrappedComponent.name} 组件衬着时候为 ${this.end - this.start} ms`);
        }
        render() {
            return super.render();
        }
    };
}
```

- **代码复用**，可以将反复的逻辑举行笼统。

• 应用注重:

  • 1. 纯函数: 加强函数应为纯函数，防止侵入修正元组件；
  • 1. 防止用法污染: 抱负状况下，应透传元组件的无关参数与事宜，只管保证用法稳固；
  • 1. 定名空间: 为 HOC 增添特异性的组件称号，如许能便于开辟调试和查找题目；
  • 1. 援用通报: 假如须要通报元组件的 refs 援用，可以应用React.forwardRef；
  • 1. 静态要领: 元组件上的静态要领并没法被自动传出，会致使营业层没法挪用；处置惩罚:
    • 函数导出
    • 静态要领赋值
  • 1. 从新衬着: 因为加强函数每次挪用是返回一个新组件，因而假如在 Render 中应用加强函数，就会致使每次都从新衬着悉数HOC，而且之前的状况会丧失；

<h3 id=”5″>5. Redux</h3>

Redux 是一个 数据治理中心，可以把它明白为一个全局的 data store 实例。它经由历程肯定的应用划定规矩和限定，保证着数据的健壮性、可追溯和可展望性。它与 React 无关，可以自力运转于任何 JavaScript 环境中，从而也为同构应用供应了更好的数据同步通道。

• 中心理念:

  • 单一数据源: 悉数应用只要唯一的状况树，也就是一切 state 终究保护在一个根级 Store 中；

  • 状况只读: 为了保证状况的可控性，最好的体式格局就是监控状况的变化。那这里就两个必要前提：

    • Redux Store 中的数据没法被直接修正；
    • 严厉控制修正的实行；
  • 纯函数: 划定只能经由历程一个纯函数 (Reducer) 来形貌修正；
• 大抵的数据构造以下所示:

• 理念完成:

  • Store: 全局 Store 单例， 每一个 Redux 应用下只要一个 store， 它具有以下要领供应用:

    • getState: 猎取 state；
    • dispatch: 触发 action, 更新 state；
    • subscribe: 定阅数据变动，注册监听器；

// 建立
const store = createStore(Reducer, initStore)

- **Action**: 它作为一个行动载体，用于映照响应的 Reducer，而且它可以成为数据的载体，将数据从应用通报至 store 中，是 store **唯一的数据源**；

```js
// 一个一般的 Action

const action = {

    type: 'ADD_LIST',
    item: 'list-item-1',
}

// 应用：
store.dispatch(action)

// 一般为了便于挪用，会有一个 Action 建立函数 (action creater)
funtion addList(item) {
    return const action = {
        type: 'ADD_LIST',
        item,
    }
}

// 挪用就会变成:
dispatch(addList('list-item-1'))
```
    
- **Reducer**: 用于形貌怎样修正数据的纯函数，Action 属于行动称号，而 Reducer 就是修正行动的本质；

```js
// 一个通例的 Reducer
// @param {state}: 旧数据
// @param {action}: Action 对象
// @returns {any}: 新数据
const initList = []
function ListReducer(state = initList, action) {
    switch (action.type) {
        case 'ADD_LIST':
            return state.concat([action.item])
            break
        defalut:
            return state
    }
}
```
    
> **注重**:
>
> 1. 恪守数据不可变，不要去直接修正 state，而是返回出一个 **新对象**，可以应用 `assign / copy / extend / 解构` 等体式格局建立新对象；
> 2. 默许状况下须要 **返回原数据**，防止数据被清空；
> 3. 最好设置 **初始值**，便于应用的初始化及数据稳固；

• 进阶:

  • React-Redux: 连系 React 应用；

    • <Provider>: 将 store 经由历程 context 传入组件中；

    • connect: 一个高阶组件，可以方便在 React 组件中应用 Redux；

      • 1. 将store经由历程mapStateToProps举行挑选后应用props注入组件
      • 1. 依据mapDispatchToProps建立要领，当组件挪用时应用dispatch触发对应的action

  • Reducer 的拆分与重构:

    • 跟着项目越大，假如将一切状况的 reducer 悉数写在一个函数中，将会 难以保护；
    • 可以将 reducer 举行拆分，也就是 函数剖析，终究再应用combineReducers()举行重构兼并；

  • 异步 Action: 因为 Reducer 是一个严厉的纯函数，因而没法在 Reducer 中举行数据的要求，须要先猎取数据，再dispatch(Action)即可，下面是三种差别的异步完成:

    • redex-thunk
    • redux-saga
    • redux-observable

<h3 id=”6″>6. React Hooks</h3>

React 中一般应用 类定义 或许 函数定义 建立组件:

在类定义中，我们可以应用到许多 React 特征，比方 state、 种种组件性命周期钩子等，然则在函数定义中，我们却无计可施，因而 React 16.8 版本推出了一个新功用 (React Hooks)，经由历程它，可以更好的在函数定义组件中应用 React 特征。

• 优点:

  • 1、跨组件复用: 实在 render props / HOC 也是为了复用，比拟于它们，Hooks 作为官方的底层 API，最为轻量，而且革新本钱小，不会影响本来的组件条理构造和传说中的嵌套地狱；

  • 2、类定义越发庞杂:

    • 差别的性命周期会使逻辑变得疏散且杂沓，不容易保护和治理；
    • 时候须要关注this的指向题目；
    • 代码复用代价高，高阶组件的应用常常会使悉数组件树变得痴肥；
  • 3、状况与UI断绝: 恰是因为 Hooks 的特征，状况逻辑会变成更小的粒度，而且极轻易被笼统成一个自定义 Hooks，组件中的状况和 UI 变得越发清楚和断绝。

• 注重:

  • 防止在 轮回/前提推断/嵌套函数 中挪用 hooks，保证挪用递次的稳固；
  • 只要 函数定义组件 和 hooks 可以挪用 hooks，防止在 类组件 或许 一般函数 中挪用；
  • 不能在useEffect中应用useState，React 会报错提醒；
  • 类组件不会被替换或烧毁，不须要强迫革新类组件，两种体式格局能并存；

• 主要钩子*:

  • 状况钩子 (useState): 用于定义组件的 State，其到类定义中this.state的功用；

  // useState 只接收一个参数: 初始状况
  // 返回的是组件名和变动该组件对应的函数
  const [flag, setFlag] = useState(true);
  // 修正状况
  setFlag(false)
      
  // 上面的代码映照到类定义中:
  this.state = {
      flag: true    
  }
  const flag = this.state.flag
  const setFlag = (bool) => {
      this.setState({
          flag: bool,
      })
  }

- **性命周期钩子** (`useEffect`):

类定义中有许多性命周期函数，而在 React Hooks 中也供应了一个响应的函数 (`useEffect`)，这里可以看作`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`的连系。

- `useEffect(callback, [source])`接收两个参数
    - `callback`: 钩子回调函数；
    - `source`: 设置触发前提，仅当 source 发作转变时才会触发；
    - `useEffect`钩子在没有传入`[source]`参数时，默许在每次 render 时都邑优先挪用上次保留的回调中返回的函数，后再从新挪用回调；

```js
useEffect(() => {
    // 组件挂载后实行事宜绑定
    console.log('on')
    addEventListener()
    
    // 组件 update 时会实行事宜解绑
    return () => {
        console.log('off')
        removeEventListener()
    }
}, [source]);


// 每次 source 发作转变时，实行结果(以类定义的性命周期，便于人人明白):
// --- DidMount ---
// 'on'
// --- DidUpdate ---
// 'off'
// 'on'
// --- DidUpdate ---
// 'off'
// 'on'
// --- WillUnmount --- 
// 'off'
```
- 经由历程第二个参数，我们便可模拟出几个经常使用的性命周期:
    - `componentDidMount`: 传入`[]`时，就只会在初始化时挪用一次；

    ```js
    const useMount = (fn) => useEffect(fn, [])
    ``` 
    
    - `componentWillUnmount`: 传入`[]`，回调中的返回的函数也只会被终究实行一次；

    ```js
    const useUnmount = (fn) => useEffect(() => fn, [])
    ```
    
    - `mounted `: 可以应用 useState 封装成一个高度可复用的 mounted 状况；

    ```js
    const useMounted = () => {
        const [mounted, setMounted] = useState(false);
        useEffect(() => {
            !mounted && setMounted(true);
            return () => setMounted(false);
        }, []);
        return mounted;
    }
    ```
    
    - `componentDidUpdate`: `useEffect`每次均会实行，实在就是排除了 DidMount 后即可；

    ```js
    const mounted = useMounted() 
    useEffect(() => {
        mounted && fn()
    })
    ```

• 别的内置钩子:

  • useContext: 猎取 context 对象

  • useReducer: 相似于 Redux 头脑的完成，但其并不足以替换 Redux，可以明白成一个组件内部的 redux:

    • 并非耐久化存储，会跟着组件被烧毁而烧毁；
    • 属于组件内部，各个组件是互相断绝的，纯真用它并没法同享数据；
    • 合营useContext的全局性，可以完成一个轻量级的 Redux；(easy-peasy)
  • useCallback: 缓存回调函数，防止传入的回调每次都是新的函数实例而致使依靠组件从新衬着，具有机能优化的结果；
  • useMemo: 用于缓存传入的 props，防止依靠的组件每次都从新衬着；
  • useRef: 猎取组件的实在节点；

  • useLayoutEffect:

    • DOM更新同步钩子。用法与useEffect相似，只是区分于实行时候点的差别。
    • useEffect属于异步实行，并不会守候 DOM 真正衬着后实行，而useLayoutEffect则会真正衬着后才触发；
    • 可以猎取更新后的 state；
• 自定义钩子(useXxxxx): 基于 Hooks 可以援用别的 Hooks 这个特征，我们可以编写自定义钩子，如上面的useMounted。又比方，我们须要每一个页面自定义题目:

function useTitle(title) {
  useEffect(
    () => {
      document.title = title;
    });
}

// 应用:
function Home() {
    const title = '我是首页'
    useTitle(title)
    
    return (
        <div>{title}</div>
    )
}

<h3 id=”7″>7. SSR</h3>

SSR，俗称 效劳端衬着 (Server Side Render)，讲人话就是: 直接在效劳端层猎取数据，衬着出完成的 HTML 文件，直接返回给用户浏览器接见。

• 前后端星散: 前端与效劳端断绝，前端动态猎取数据，衬着页面。

• 痛点:

  • 首屏衬着机能瓶颈:

    • 空缺耽误: HTML下载时候 + JS下载/实行时候 + 要求时候 + 衬着时候。在这段时候内，页面处于空缺的状况。

  • SEO 题目: 因为页面初始状况为空，因而爬虫没法猎取页面中任何有用数据，因而对搜索引擎不友好。

    • 虽然一向有在提动态衬着爬虫的手艺，不过据我相识，大部份国内搜索引擎依然是没有完成。

最初的效劳端衬着，便没有这些题目。但我们不能返璞归真，既要保证现有的前端自力的开辟形式，又要由效劳端衬着，因而我们应用 React SSR。

• 道理:

  • Node 效劳: 让前后端运转统一套代码成为可以。
  • Virtual Dom: 让前端代码离开浏览器运转。
• 前提: Node 中心层、 React / Vue 等框架。 构造也许以下:

• 开辟流程: (此处以 React + Router + Redux + Koa 为例)

  • 1、在同个项目中，搭建 前后端部份，通例构造:

    • build
    • public

    • src

      • client
      • server
  • 2、server 中应用 Koa 路由监听 页面接见:

  import * as Router from 'koa-router'
  
  const router = new Router()
  // 假如中心也供应 Api 层
  router.use('/api/home', async () => {
      // 返回数据
  })
  
  router.get('*', async (ctx) => {
      // 返回 HTML
  })

- 3、经由历程接见 url **婚配** 前端页面路由:

```js
// 前端页面路由
import { pages } from '../../client/app'
import { matchPath } from 'react-router-dom'

// 应用 react-router 库供应的一个婚配要领
const matchPage = matchPath(ctx.req.url, page)
```

- 4、经由历程页面路由的设置举行 **数据猎取**。一般可以在页面路由中增添 SSR 相干的静态设置，用于笼统逻辑，可以保证效劳端逻辑的通用性，如:

    ```js
    class HomePage extends React.Component{
        public static ssrConfig = {
              cache: true,
             fetch() {
                  // 要求猎取数据
             }
        }
    }
    ```
    
    猎取数据一般有两种状况:
    
    - 中心层也应用 **http** 猎取数据，则此时 fetch 要领可前后端同享；

    ```js
    const data = await matchPage.ssrConfig.fetch()
    ```
    
    - 中心层并不应用 http，是经由历程一些 **内部挪用**，比方 Rpc 或 直接读数据库 等，此时也可以直接由效劳端挪用对应的要领猎取数据。一般，这里须要在 ssrConfig 中设置特异性的信息，用于婚配对应的数据猎取要领。

    ```js
    // 页面路由
    class HomePage extends React.Component{
        public static ssrConfig = {
            fetch: {
                 url: '/api/home',
            }
        }
    }
    
    // 依据划定规矩婚配出对应的数据猎取要领
    // 这里的划定规矩可以自在，只要能婚配出准确的要领即可
    const controller = matchController(ssrConfig.fetch.url)
    
    // 猎取数据
    const data = await controller(ctx)
    ``` 

- 5、建立 Redux store，并将数据`dispatch`到内里:

```js
import { createStore } from 'redux'
// 猎取 Clinet层 reducer
// 必需复用前端层的逻辑，才保证一致性；
import { reducers } from '../../client/store'

// 建立 store
const store = createStore(reducers)
 
// 猎取设置好的 Action
const action = ssrConfig.action

// 存储数据    
store.dispatch(createAction(action)(data))
```

- 6、注入 Store， 挪用`renderToString`将 React Virtual Dom 衬着成 **字符串**: 

```js
import * as ReactDOMServer from 'react-dom/server'
import { Provider } from 'react-redux'

// 猎取 Clinet 层根组件
import { App } from '../../client/app'

const AppString = ReactDOMServer.renderToString(
    <Provider store={store}>
        <StaticRouter
            location={ctx.req.url}
            context={{}}>
            <App />
        </StaticRouter>
    </Provider>
)
```

- 7、将 AppString 包装成完整的 html 文件花样；

- 8、此时，已能天生完整的 HTML 文件。但只是个纯静态的页面，没有款式没有交互。接下来我们就是要插进去 JS 与 CSS。我们可以经由历程接见前端打包后天生的`asset-manifest.json`文件来猎取响应的文件途径，并一样注入到 Html 中援用。

```js
const html = `
    <!DOCTYPE html>
    <html lang="zh">
        <head></head>
        <link href="${cssPath}" rel="stylesheet" />
        <body>
            <div id="App">${AppString}</div>
            <script src="${scriptPath}"></script>
        </body>
    </html>
`
```

- 9、举行 **数据脱水**: 为了把效劳端猎取的数据同步到前端。重假如将数据序列化后，插进去到 html 中，返回给前端。

```js
import serialize from 'serialize-javascript'
// 猎取数据
const initState = store.getState()
const html = `
    <!DOCTYPE html>
    <html lang="zh">
        <head></head>
        <body>
            <div id="App"></div>
            <script type="application/json" id="SSR_HYDRATED_DATA">${serialize(initState)}</script>
        </body>
    </html>
`

ctx.status = 200
ctx.body = html
```

> **Tips**:
>
> 这里比较迥殊的有两点:
>
> 1. 应用了`serialize-javascript`序列化 store， 替换了`JSON.stringify`，保证数据的平安性，防止代码注入和 XSS 进击；
>
> 2. 应用 json 举行传输，可以获得更快的加载速率；

- 10、Client 层 **数据吸水**: 初始化 store 时，以脱水后的数据为初始化数据，同步建立 store。

```js
const hydratedEl = document.getElementById('SSR_HYDRATED_DATA')
const hydrateData = JSON.parse(hydratedEl.textContent)

// 应用初始 state 建立 Redux store
const store = createStore(reducer, hydrateData)
```

<h3 id=”8″>8. 函数式编程</h3>

函数式编程是一种 编程范式，你可以明白为一种软件架构的头脑形式。它有着自力一套理论基本与边境轨则，寻求的是 更简约、可展望、高复用、易测试。实在在现有的浩瀚着名库中，都蕴含着雄厚的函数式编程头脑，如 React / Redux 等。

• 罕见的编程范式:

  • 敕令式编程(历程化编程): 更体贴处置惩罚题目标步骤，一步步以言语的情势通知计算机做什么；
  • 事宜驱动编程: 事宜定阅与触发，被普遍用于 GUI 的编程设想中；
  • 面向对象编程: 基于类、对象与要领的设想形式，具有三个基本观点: 封装性、继续性、多态性；

  • 函数式编程

    • 换成一种更高端的说法，面向数学编程。怕不怕~🥴

• 函数式编程的理念:

  • 纯函数(肯定性函数): 是函数式编程的基本，可以使顺序变得天真，高度可拓展，可保护；

    • 上风:

      • 完整自力，与外部解耦；
      • 高度可复用，在恣意高低文，恣意时候线上，都可实行而且保证结果稳固；
      • 可测试性极强；

    • 前提:

      • 不修正参数；
      • 不依靠、不修正任何函数外部的数据；
      • 完整可控，参数一样，返回值肯定一样: 比方函数不能包括new Date()或许Math.randon()等这类不可控因素；
      • 援用通明；
    • 我们经常使用到的许多 API 或许东西函数，它们都具有着纯函数的特征， 如split / join / map；

  • 函数复合: 将多个函数举行组合后挪用，可以完成将一个个函数单元举行组合，杀青末了的目标；

    • 扁平化嵌套: 起首，我们肯定能想到组合函数最简朴的操纵就是 包裹，因为在 JS 中，函数也可以当作参数:

      • f(g(k(x))): 嵌套地狱，可读性低，当函数庞杂后，轻易让人一脸懵逼；
      • 抱负的做法: xxx(f, g, k)(x)

    • 结果通报: 假如想完成上面的体式格局，那也就是xxx函数要完成的就是: 实行结果在各个函数之间的实行通报；

      • 这时候我们就可以想到一个原生供应的数组要领: reduce，它可以按数组的递次顺次实行，通报实行结果；
      • 所以我们就可以完成一个要领pipe，用于函数组合:

      // ...fs: 将函数组合成数组；
      // Array.prototype.reduce 举行组合；
      // p: 初始参数；
      const pipe = (...fs) => p => fs.reduce((v, f) => f(v), p)

    
    - **应用**: 完成一个 驼峰定名 转 中划线定名 的功用:

    ```js
    // 'Guo DongDong' --> 'guo-dongdong'
    // 函数组合式写法
    const toLowerCase = str => str.toLowerCase()
    const join = curry((str, arr) => arr.join(str))
    const split = curry((splitOn, str) => str.split(splitOn));
    
    const toSlug = pipe(
        toLowerCase,    
        split(' '),
        join('_'),
        encodeURIComponent,
    );
    console.log(toSlug('Guo DongDong'))
    ```
    
    - **优点**:
        - 隐蔽中心参数，不须要暂时变量，防止了这个环节的失足概率；
        - 只需关注每一个纯函数单元的稳固，不再须要关注定名，通报，挪用等；
        - 可复用性强，任何一个函数单元都可被恣意复用和组合；
        - 可拓展性强，本钱低，比方如今加个需求，要检察每一个环节的输出:
        
        ```js
        const log = curry((label, x) => {
            console.log(`${ label }: ${ x }`);
            return x;
        });
        
        const toSlug = pipe(
            toLowerCase,    
            log('toLowerCase output'),
            split(' '),
            log('split output'),
            join('_'),
            log('join output'),
            encodeURIComponent,
        );
        ```
    
    > Tips:
    >
    > 一些东西纯函数可直接援用`lodash/fp`，比方`curry/map/split`等，并不须要像我们上面如许本身完成；

- **数据不可变性**(immutable): 这是一种数据理念，也是函数式编程中的中心理念之一:
    - **首倡**: 一个对象再被建立后便不会再被修正。当须要转变值时，是返回一个全新的对象，而不是直接在原对象上修正；
    - **目标**: 保证数据的稳固性。防止依靠的数据被未知地修正，致使了本身的实行非常，能有用进步可控性与稳固性；
    - 并不等同于`const`。应用`const`建立一个对象后，它的属性依然可以被修正；
    - 更相似于`Object.freeze`: 凝结对象，但`freeze`仍没法保证深层的属性不被串改；
    - `immutable.js`: js 中的数据不可变库，它保证了数据不可变，在 React 生态中被普遍应用，大大提拔了机能与稳固性；
        - `trie`数据构造: 
            - 一种数据构造，能有用地深度凝结对象，保证其不可变；
            - **构造同享**: 可以共用不可变对象的内存援用所在，削减内存占用，进步数据操纵机能；
    
- 防止差别函数之间的 **状况同享**，数据的通报应用复制或全新对象，恪守数据不可变准绳；
- 防止从函数内部 **转变外部状况**，比方转变了全局作用域或父级作用域上的变量值，可以会致使别的单元毛病；
- 防止在单元函数内部实行一些 **副作用**，应当将这些操纵抽离成更自力的东西单元；
    - 日记输出
    - 读写文件
    - 收集要求
    - 挪用外部历程
    - 挪用有副作用的函数 

• 高阶函数: 是指 以函数为参数，返回一个新的加强函数 的一类函数，它一般用于:

  • 将逻辑行动举行 断绝笼统，便于疾速复用，如处置惩罚数据，兼容性等；
  • 函数组合，将一系列单元函数列表组合成功用更壮大的函数；
  • 函数加强，疾速地拓展函数功用，

• 函数式编程的优点:

  • 函数副作用小，一切函数自力存在，没有任何耦合，复用性极高；
  • 不关注实行时候，实行递次，参数，定名等，能专注于数据的活动与处置惩罚，能有用进步稳固性与健壮性；
  • 寻求单元化，粒度化，使其重构和革新本钱下降，可保护、可拓展性较好；
  • 更易于做单元测试。

• 总结:

  • 函数式编程实际上是一种编程头脑，它寻求更细的粒度，将应用拆分红一组组极小的单元函数，组合挪用操纵数据流；
  • 它首倡着 纯函数 / 函数复合 / 数据不可变， 郑重看待函数内的 状况同享 / 依靠外部 / 副作用；

Tips:

实在我们很难也不须要在口试历程中去完美地论述出整套头脑，这里也只是浅尝辄止，一些个人明白罢了。博主也是低级小菜鸟，停留在外表罢了，只求对人人能有所协助，轻喷🤣；

我个人以为: 这些编程范式之间，实在并不矛盾，各有各的 优劣势。

明白和进修它们的理念与上风，合理地 设想融会，将优异的软件编程头脑用于提拔我们应用；

一切设想头脑，终究的目标肯定是使我们的应用越发 解耦颗粒化、易拓展、易测试、高复用，开辟越发高效和平安；

有一些库能让人人很快地打仗和应用函数头脑: Underscore.js / Lodash/fp / Rxjs 等。

结语

到此，想必人人会发明已最先深切一些理论和道理层面了，并不像上篇那末的浅显易懂了。但这也是个必经之路，不可以永久停留在 5分钟控制的手艺 上。不再停留在言语的外表，而是明白更深切的道理，形式，架构，因果，你就会倏忽发明你成为高等软件工程师了。😁。

愿望列位小伙伴能沉下心来，一些理论、观点虽然死板，但反复揣摩后再本身实践尝试下，就可以有本身的明白。

当你最先口试高等工程师时，口试官便不再重点关注你会不会写stopPropagation或许会不会程度居中了，而是更在意你本身的思索和研讨才能了。表现出本身深切明白研讨的效果，定会让口试官另眼相看。

Tips:

字节跳动招中高等前端或练习，有兴致内推的同砚可简历邮件至 guoxiaodong.tayde@bytedance.com (题目: 姓名-岗亭-所在) 或关注下面民众号加我微信详聊哈。

博主真的写得很辛劳，再不 star 下，真的要哭了。~ github。🤑