noflux
  • Noflux
  • Choose a language
  • Noflux
    • migration
      • Migration from noflux to v0.x
      • from-v0-to-v1
      • Migration
    • advanced
      • @connect
      • API
      • state
    • Summary
    • basic
      • React
      • Basic
      • state
    • getting-started
  • Noflux
    • Summary
    • advanced
      • state
      • @connect
      • API
    • basic
      • React
      • 基础
      • state
    • migration
      • from-v0-to-v1
      • Migration
      • 从noflux到v0.x
    • getting-started
  • examples
    • README
    • Noflux TodoMVC Example Using TypeScript
Powered by GitBook
On this page
  • Principle
  • Partial Connecting

Was this helpful?

  1. Noflux
  2. advanced

@connect

PreviousadvancedNextAPI

Last updated 4 years ago

Was this helpful?

Principle

The core function Noflux using to re-render the component is . Noflux change the component which is @connected to call forceUpdate automatically.

Therefore, state.set should only be called asynchronously, as in event listening or Promise#then. Invoking forceUpdate synchronously in may cause infinite recursion.

Partial Connecting

All state management using single source of truth will face a performance problem when state growth large and nest deeply. The data for each component in a single page application (SPA) can be stored in a different sub-state. When one of them changes, it is necessary to avoid rendering other compoents.

For example, in Redux you can use mapStateToProps control component observation to avoid all components re-rendering.

In Noflux, the component's observation of state changes is automatic and intelligent. The component will only listen for the state it depends on and other state changes do not cause the component to re-rende. This is called partial connecting。

The is an examples of partial connecting. Through console.log output you can find that the two components observe states separately and click event does not trigger another component re-render: ():

@connect
class ComponentA extends Component {
  render() {
    console.log('ComponentA render');
    return (
      <div>
        <button onClick={() => state.set('dateA', Date.now())}>
          Update
        </button>
        <p>
          Date A is {state.get('dateA')}
        </p>
      </div>
    );
  }
}

@connect class ComponentB extends Component {
  // almost same as ComponentA
}

export default class App extends Component {
  render() {
    return (
      <div>
        <ComponentA />
        <hr />
        <ComponentB />
      </div>
    )
  }
}

Due to the immutable state, state.get() will return a clone after any modification. So it's better to avoid calling state.get() in the component otherwise it will not be able to enjoy the performance benefits of partial connecting. A good suggestion is always useing state.get(path) to read state.

// bad case
const { dataA, datab } = state.get();

// good case
const dataA = state.get('dataA');
const dataB = state.get('dataB');

@connect's partial connecting rely on in @noflux/state which use some algorithms to optimize the performance.

Component#forceUpdate
React component lifecycle
https://codesandbox.io/s/Vm5mPRroX
listener tree