npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lg-react-mounter

v0.2.1

Published

A mini renderer for React, this renderer only trigger componentWillMount() in Server Side Rendering

Downloads

6

Readme

react-mounter

A mini renderer for React, this renderer only trigger componentWillMount() in Server Side Rendering.

why?

如何在同构化的服务端渲染中触发异步操作?有两种方法:

  1. 在路由组件中定义静态方法,比如next.js 的getInitialProps 或 Vue中建议定义的asyncData()
  2. 调用renderToString挂载一次,触发所有componentWillMount()

两种方法都有优缺点:

第一种方法,只能在路由组件的静态方法中定义需要触发的异步操作,子孙组件中不能触发异步操作。这就要求你额外地将子孙组件 中的异步操作提升到路由组件。显然不够优雅,我们更希望能够在componentWillMount() 中直接定义. 但是这个方法很快。

第二种方法,缺点可能让人无法忍受,如下面配合redux + redux-saga在服务端触发异步操作:

async function render (store, App) {
  const Component = (<App store={store} />)
  // watch ACTIONS
  store.runSaga(saga)

  // trigger all async actions
  renderToStaticMarkup(Component)

  // stop watch ACTIONS immediately
  store.end()

  // wait all async actions done
  await store.done

  return renderToString(Component)
}

我们必须使用两次renderToString(), 第一次执行用于触发所有异步操作,第二次执行用于渲染最终的页面。就目前而言renderToString在服务端存在较大的性能瓶颈,它是同步的。如果页面比较复杂,两次渲染效率简直无法忍受。

我最初打算对渲染器进行简化,但是我发现这个方向是无用功,renderToString 已经非常精简、非常快了,尤其是开启了production。对渲染器进行简化带来的性能提升几乎可以忽略不计,因为渲染器的主要消耗在于遍历组件树

但是我们的目的只是为了触发组件中的异步操作, 这些异步操作主要位于container中,即组件树的顶层,再往下遍历就是 浪费了。所以react-mounter使用一个类似于shouldComponentUpdateshouldOmitChildren方法,告诉渲染器 不需要往下遍历了。

Installing

npm i lg-react-mounter

Usage

define Your Container

class MyContainer extends React.PureComponent {
  componentWillMount () {
    // async actions
    this.props.dispatch(getList())
  }
  shouldOmitChildren () {
    // pretty simple
    return true
  }
  // or
  // shouldOmitChildren = true
  render () {
    // if shouldOmitChildren return true, render method will not be called
    // ...
  }
}

Server-side rendering

import ReactMounter from 'react-mounter'
async function render (store, App) {
  const Component = (<App store={store} />)
  // watch ACTIONS
  store.runSaga(saga)

  // trigger all async actions
  ReactMounter.render(Component)

  // stop watch ACTIONS immediately
  store.end()

  // wait all async actions done
  await store.done

  return renderToString(Component)
}

example

lg-react-boilerplate