简单聊一聊一个前端编辑器的性能优化

最近项目一直在使用 [Monaco Editor](https://microsoft.github.io/monaco-editor/) 这个库. 在我加了一个新功能之后, 整个编辑器开始变的非常卡, 我试图解决这个性能问题. 但是发现有一些棘手...

**评论以及文末有更新**

## 场景

其实我加的新功能很简单, 以 vscode 为例, 他底部有一个 [status bar](https://code.visualstudio.com/docs/getstarted/userinterface), 用于显示当前编辑器的一些信息. 我当时加的功能是模仿 vscode, 在底部增加一个能显示当前光标位置/选中位置, 以及选中的单词的长度. 由于是公司代码的原因我这里只是简单放一下伪代码, 实际代码会比这个这个伪代码复杂和抽象很多

文件结构:

```js
<App />
  // ... other components
  <div>
    <Explorer />
    <Editor />
  </div> 
  <StatusBar />
```

简单说明一下, 有一个组件叫 `App`, 由于历史遗留原因这二组件是个 `class` 组件, 而且代码很多, 这个组件下有非常多的子组件, `Editor` 和 `StatusBar` 就是其中的两个子组件

而我现在的需求是: 用户在 `Editor` 里做任何操作, `StatusBar` 组件都需要显示出对应用户光标的位置

我思路也很简单:
- `cursor`(光标) 部分的状态在 `Editor` 中是可以拿到的
- 由于 `StatusBar` 这个组件需要根据 `cursor` 状态来渲染, 因此做状态提升, 到 `App` 中
- `App` 中初始化 `cursor` 状态, 传入相关 `setState()` 回调函数到 `Editor` 中, `Editor` 组件调用更新 `cursor` 状态, 最后 `StatusBar` 获取 `cursor` 最新的状态进行渲染.

## 实现

所以代码可能长这样

```js
// App.js

import Editor from './Editor'
import StatusBar from './StatusBar'

export default class App {
  constructor(props) {
    super(props) {
      this.state = {
        // ...other state
        cursorPosition: {
          lineNumber: 1,
          column: 1
        }
      }
      this.editorRef = React.createRef()
    }
  }

  setCursorPosition = (cursorPosition) => {
    this.setState({
      cursorPosition,
    })
  }

  render() {
    return (
      // ... other components
      <div>
        <Explorer />
        <Editor 
          setCursorPosition={this.setCursorPosition} 
          editorRef={this.editorRef}
        />
      </div> 
      <StatusBar cursorPosition={this.cursorPosition} />
    )
  }
}
```

```js
// Editor.js

import MonacoEditor from 'some-thirdparty-react-monaco-package'

export default function Editor(props) {
  const { setCursorPosition, editorRef } = props

  const handleEditorDidMount = () => {
    editorRef.current.onDidChangeCursorPosition(ev => {
      setCursorPosition(ev.position)
    })
  }

  return (
    <MonacoEditor editorDidMount={handleEditorDidMount} />
  )
}
```

```js
// StatusBar.js

import Button from '@material-ui/core/Button';

export default function StatusBar(props) {
  const { cursorPosition } = props

  return (
    <Button size="small">
      {cursorPosition}
    </Button>
  )
}
```

看上去好像没啥问题, 我当时这么写也没考虑太多

## 问题

实际上最后写完我测试发现了很大的性能问题

其实很简单, 我每次在 `Editor` 里面调用父组件(`App`) 的 `setState()`, 都会导致父组件重新渲染. 而 `App` 这个组件是一个很大的类组件, 里面还渲染很多别的组件, 而用户在编辑器里面只要敲一点东西, 光标几乎都会改变(或者直接点, 用户闲着没事在编辑器里直接乱点一通, 也能达到相同的效果). 这直接导致重新渲染 `App` 的频率相当频繁...

然后我页面就卡爆了...

我当时有点懵, 因为说实话这种渲染确实好像没法避免, 我每次的 `cursor` 状态确实不一样, 我没法直接通过 `shouldComponentUpdate` 来避免不必要的重复渲染

当然有时候可以避免, 就是当用户的每次都点击同一个地方, `cursorPosition` 就一样了...

## 方法

我一开始想到的一个办法是, 将 `Editor`组件和 `StatusBar` 重新写在一个新的组件, 这样所有的状态就只在这个新组件(可以看成这是一个中间组件)里面管理, 不会触发 `App` 这个大组件的重新渲染了.

但我还是很快放弃了这个想法, 因为把 `StatusBar` 和 `Editor` 放一起其实不简单.... 从 dom 上来看, 他们其实不是严格的兄弟组件, 中间还有着别的组件, 如果要抽出来还必须连带着别的组件一起重写:

```js
export default function MyNewComponent(props) {
  const { 
    editorRef,
    // ...还有很多别组件的 props...
  } = props

  // ...
  return (
    <div>
      <CompA />
      <CompB />
      // ...other component
      <div>
        <Explorer />
        <Editor editorRef={editorRef} />
      </div>
      <StatusBar />
    <div>
  )
}
```

总之, 我这么重构 effort 其实挺大...


## 可能的解决方案?

后来和另一个组里的实习生交流的时候, 他提出尝试把 `cursor` 部分的状态放到 `redux` 里面管理, 在 `Editor` 里面 `dispatch` 相应改变 `cursorPosition` 的 `action`, 在 `StatusBar` 里面连接 redux 拿到最新的 `cursorPosition` 状态. 这样直接绕过 `App` 这一层, 避免了重复渲染

其实这个思路和之前的想法类似 都是要避开 `App` 这个大组件, 只不过用 redux 这种状态管理库似乎代码写起来简单一些

代码最后就变成这样了:

```js
// Editor.js

import { useDispatch } from 'react-redux'
import { setCursorPosition } from './editorActions.js'
import MonacoEditor from 'some-thirdparty-react-monaco-package'

export default function Editor(props) {
  const { setCursorPosition, editorRef } = props
  const dispatch = useDispatch()

  const handleEditorDidMount = () => {
    editorRef.current.onDidChangeCursorPosition(ev => {
      dispatch(setCursorPosition(ev.position))
    })
  }

  return (
    <MonacoEditor editorDidMount={handleEditorDidMount} />
  )
}
```

```js
// StatusBar.js

import Button from '@material-ui/core/Button';
import { useSelector, shallowEqual } from 'react-redux'

export default function StatusBar(props) {
  const { cursorPosition } = useSelector(state => state.editor, shallowEqual)

  return (
    <Button size="small">
      {cursorPosition}
    </Button>
  )
}
```

不过这么讲也存在别的一些问题:
- `cursorPosition` 这个状态只在一个组件里被用到, Redux 本意还是为了做状态的管理, 多个组件可能都会共享到这个状态, 但现在只有一个, 似乎有点大材小用了
- 我们项目里 Redux 已经放了很多的状态了, mentor 不希望我再放别的进去了...
- 我没见过像我一样用 Redux 来做性能优化的...

## 可能有更好的解法?

如果你恰好能明白我在讲什么, 并且有更好的办法, 请务必告诉我...

---

## 更新

文章发布之后有几位前辈评论了一下, 都非常好. 我自己总结然后实践了一下, 以下是我的解决思路

不管是我之前用的 Redux, 还是评论里面提到的 Context, 其实都是 Pub/Sub (发布订阅)这个思想的实践. 不过由于目前使用 Redux 有点太重, 所以其实用 Context 会更好

不过在使用 Context 的时候存在一个问题: 就是如果 `context` 的 `value` 是一个对象这种复杂结构, 然后存在多个消费者, 每个消费者可能只是订阅一部分 `value`. 但是由于 `context` 的设计, 只要 `value` 部分变了, 那么所有的消费者都会被通知, 那么有很大的可能所有的消费者组件都被重新渲染了. 

基于这个问题 Dan Abramov 也是有给出一些[解法](https://github.com/facebook/react/issues/15156#issuecomment-474590693). 其实最直白的做法就是将多个 context 分离成几个更小的. 不过我在搜索的过程中发现了另外一个似乎更精巧的解法, 虽然可能有点简陋. 但是用在我们项目里我觉得应该够了(其实我不确定, 等过两天 mentor 给我 review 代码的时候再问问)?

### context

先看看最基本的使用 context 的做法, 也是评论里 [@李引证](https://www.zhihu.com/people/browsnet) 提到的做法, 不过这里我略有修改.

```js
// editorContext.js

import React from 'react'

// actions
export const setCursorPosition = () => {
  // ...
}

export const setSelections = () => {
  // ...
}

// context
export const EditorStateContext = React.createContext()
export const EditorDispatchContext = React.createContext()

const initialState = {
  cursorPosition: {
    lineNumber: 1,
    column: 1
  },
  selections: ['']
}

function editorReducer(state, action) {
  // ... reducer logic
}

export function EditorProvider({ children }) {
  const [state, dispatch] = React.useReducer(editorReducer, initialState)
  return (
    <EditorStateContext.Provider value={state}>
      <EditorDispatchContext.Provider value={dispatch}>
        {children}
      </EditorDispatchContext.Provider>
    </EditorStateContext.Provider>
  )
}

export function useEditorState() {
  const context = React.useContext(EditorStateContext)
  return context
}

export function useEditorDispatch() {
  const context = React.useContext(EditorDispatchContext)
  return context
}
```

这里我选择用 `useReducer()` 也是因为其实我的 `editor` 状态有点复杂, 而且 `cursorPosition` 和 `selections` 是对应两个不同的消费者组件. 如果单纯这么用, 其实是有一点我之前提到的性能问题的

### mapStateToProps

参考了 [React Context API and avoiding re-renders](https://stackoverflow.com/a/51317400/12733140) 这个问题下的一个回答. 其实核心就在于用 `React.memo` 以及将相关对应的 `context` 上的 `value` map 到对应的消费者组件的 `props` 上, 相关 `props` 变了, 组件才重新渲染. 虽然感觉兜兜转转绕了半天又绕到了 Redux 上....

```js
// editorContext.js
// ... 

export const useEditorCursorState = () => {
  const { cursorPosition } = useEditorState()
  return {
    cursorPosition
  }
}

export const useEditorSelectionState = () => {
  const { selections } = useEditorState()
  return {
    selections
  }
}

export function connectToContext(WrappedComponent, select) {
  return props => {
    const selectors = select()
    return <WrappedComponent {...selectors} {...props} />
  }
}
```

结合我之前的 `Editor` 和 `StatusBar` 一起用:

```js
// App.js

import Editor from './Editor'
import StatusBar from './StatusBar'

export default class App {
  constructor(props) {
    super(props) {
      this.editorRef = React.createRef()
    }
  }

  render() {
    return (
      // ... other components
      <EditorProvider>
        <div>
          <Explorer />
          <Editor 
            editorRef={this.editorRef}
          />
        </div> 
        <StatusBar />
      </EditorProvider>
    )
  }
}
```

```js
// Editor.js

import React from 'react'
import { 
  useEditorDispatch, 
  setCursorPosition, 
  setSelections 
} from './editorContext'
import MonacoEditor from 'some-thirdparty-react-monaco-package'

const Editor = React.memo((props) => {
  const { setCursorPosition, editorRef } = props
  const editorDispatch = useEditorDispatch()

  const handleEditorDidMount = () => {
    editorRef.current.onDidChangeCursorPosition(ev => {
      useEditorDispatch(setCursorPosition(ev.position))
    })

    editorRef.current.onDidChangeCursorSelection(ev => {
      useEditorDispatch(setSelections(ev.selections))
    })
  }

  return (
    <MonacoEditor editorDidMount={handleEditorDidMount} />
  )
})

export default Editor
```

```js
// StatusBar

import React from 'react'
import Button from '@material-ui/core/Button';
import { connectToContext, useEditorCursorState } from './editorContext'

const StatusBar = React.memo((props) => {
  const { cursorPosition } = props

  return (
    <Button size="small">
      {cursorPosition}
    </Button>
  )
})

export default connectToContext(StatusBar, useEditorCursorState)
```

如果你有更优雅的解法, 请一定告诉我...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

简单聊一聊一个前端编辑器的性能优化 #15

场景

实现

问题

方法

可能的解决方案?

可能有更好的解法?

更新

context

mapStateToProps

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

简单聊一聊一个前端编辑器的性能优化 #15

Description

场景

实现

问题

方法

可能的解决方案?

可能有更好的解法?

更新

context

mapStateToProps

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions