项目实战中的 React 性能优化 #

/**
 * 动态加载脚本
 * @param url 脚本地址
 */
export function loadScript(url: string, attrs?: object) {
  return new Promise((resolve, reject) => {
    const matched = Array.prototype.find.call(document.scripts, (script: HTMLScriptElement) => {
      return script.src === url
    })
    if (matched) {
      // 如果已经加载过，直接返回 
      return resolve()
    }
    const script = document.createElement('script')
    if (attrs) {
      Object.keys(attrs).forEach(name => {
        script.setAttribute(name, attrs[name])
      })
    }
    script.type = 'text/javascript'
    script.src = url
    script.onload = resolve
    script.onerror = reject
    document.body.appendChild(script)
  })
}

// 明文加密的方法
async function encrypt(value: string): Promise<string> {
  // 引入加密的第三方库
  await loadScript('/lib/encrypt.js')
  // 配合 JSEncrypt 加密
  const encrypt = new JSEncrypt()
  encrypt.setPublicKey(PUBLIC_KEY)
  const encrypted = encrypt.encrypt(value)
  return encrypted
}

// 登录操作
async function login() {
  // 密码加密
  const password = await encrypt('12345')
  await fetch('https://api/login', {
    method: 'POST',
    body: JSON.stringify({
      password,
    })
  })
}

async function encrypt(value: string): Promise<string> {
  // 改为 import() 的方式引入加密的第三方库
  const module = await import('jsencript')
  // expor default 导出的模块
  const JSEncrypt = module.default
  // 配合 JSEncrypt 加密
  const encrypt = new JSEncrypt()
  encrypt.setPublicKey(PUBLIC_KEY)
  const encrypted = encrypt.encrypt(value)
  return encrypted
}

const module = await import('./city.json')
console.log(module.default)

/**
 * 动态加载样式
 * @param url 样式地址
 */
export function loadStyleSheet(url: string) {
  return new Promise((resolve, reject) => {
    const matched = Array.prototype.find.call(document.styleSheets, (styleSheet: HTMLLinkElement) => {
      return styleSheet.href === url
    })
    if (matched) {
      return resolve()
    }
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = url
    link.onload = resolve
    link.onerror = reject
    document.head.appendChild(link)
  })
}

function lazyload(loader: () => Promise<{ default: React.ComponentType<any> }>) {
  const LazyComponent = React.lazy(loader)
  const Lazyload: React.FC = (props: any) => {
    return (
      <React.Suspense fallback={<Spinner/>}>
        <LazyComponent {...props}/>
      </React.Suspense>
    )
  }
  return Lazyload
}

const Login = lazyload(() => import('src/pages/Home'))

import * as lodash from 'lodash'
// or
import lodash from 'lodash'

import debounce from 'lodash/debounce'

import { debounce } from 'lodash'

lodash.after = after;
lodash.ary = ary;
lodash.assign = assign;
lodash.assignIn = assignIn;
lodash.assignInWith = assignInWith;
lodash.assignWith = assignWith;
lodash.at = at;
lodash.before = before;
...

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

const http2 = require('http2')

const server = http2.createSecureServer({
  cert: ...,
  key: ...,
})

const http2 = require('http2')

// 也就意味着，这个方法相当于没用
const server = http2.createServer()

const webpackConfig = {
    resolve: {
        alias: {
            moment: 'dayjs',
        }
    }
}

this.state = {
    socket: new WebSocket('...'),
    data: new FormData(),
    xhr: new XMLHttpRequest(),
}

import * as React from 'react'
import { useFormInput } from 'src/hooks'

const InputBar: React.FC = () => {
  const input = useFormInput('')
  
  return (
    <div className='input-bar'>
      <textarea
        placeholder='请输入消息，回车发送'
        value={input.value}
        onChange={input.handleChange}
      />
    </div>
  )
}

export default InputBar

import * as React from 'react'

const ConversationHeader: React.FC = () => {
  return (
    <div className='conversation-header'>
      <img
        src=''
        alt=''
      />
      <h4>聊天对象</h4>
    </div>
  )
}

export default ConversationHeader

import * as React from 'react'
import ConversationHeader from './Header'
import MessageList from './MessageList'
import InputBar from './InputBar'

const Conversation: React.FC = () => {
  const [messages, setMessages] = React.useState([])
  
  const send = () => {
    // 发送消息
  }
  React.useEffect(
    () => {
        socket.onmessage = () => {
            // 处理消息
        }
    },
    []
  )
  return (
    <div className='conversation'>
      <ConversationHeader/>
      <MessageList messages={messages}/>
      <InputBar send={send}/>
    </div>
  )
}

export default Conversation

// 其他的同理
export default React.memo(ConversationHeader)

function memo<T extends ComponentType<any>>(
        Component: T,
        propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean
    ): MemoExoticComponent<T>;

export default React.memo(MessageList, (prevProps, nextProps) => {
    // 简单的对比演示，当新旧消息长度不一样时，我们更新 MessageList
    return prevProps.messages.length === nextProps.messages.length
})

const propsAreEqual = () => true
React.memo(Component, propsAreEqual)

export function withImmutable<T extends React.ComponentType<any>>(Component: T) {
  return React.memo(Component, () => true)
}

const FunctionComponent: React.FC = () => {
  // 层级复杂的对象
  const data = {
    // ...
  }

  const callback = () => {}
  return (
    <Child
      data={data}
      callback={callback}
    />
  )
}

const FunctionComponent: React.FC = () => {
  // 层级复杂的对象
  const data = React.memo(
    () => {
        return {
            // ...
        }
    },
    [inputs]
  )

  const callback = () => {}
  return (
    <Child
      data={data}
      callback={callback}
    />
  )
}

const ConversationHeader: React.FC = () => {
  return React.useMemo(() => {
    return (
      <div className='conversation-header'>
        <img
          src=''
        />
        <h4>聊天对象</h4>
      </div>
    )
  }, [])
}

export default ConversationHeader

const DataContext = React.createContext({} as any)

const Provider: React.FC = props => {
  return (
    <DataContext.Provider value={{ a, b, c, d, e... }}>
      {props.children}
    </DataContext.Provider>
  )
}

const ConsumerA: React.FC = () => {
  const { a } = React.useContext(DataContext)
  // .
}

const ConsumerB: React.FC = () => {
  const { b } = React.useContext(DataContext)
  // .
}

function requestWork(root: FiberRoot, expirationTime: ExpirationTime) {
  // 不同 Root 之间链表关联
  addRootToSchedule(root, expirationTime);
  if (isRendering) {
    return;
  }

  if (isBatchingUpdates) {
    // ...
    return;
  }

  // 执行同步更新
  if (expirationTime === Sync) {
    performSyncWork();
  } else {
    scheduleCallbackWithExpirationTime(root, expirationTime);
  }
}

function batchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
  const previousIsBatchingUpdates = isBatchingUpdates;
  isBatchingUpdates = true;
  try {
    return fn(a);
  } finally {
    isBatchingUpdates = previousIsBatchingUpdates;
    if (!isBatchingUpdates && !isRendering) {
      // 执行同步更新
      performSyncWork();
    }
  }
}