How to use mobx-react-lite - 10 common examples

function observerSCU(nextProps, nextState) {
    if (isUsingStaticRendering()) {
        console.warn(
            "[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."
        )
    }
    // update on any state changes (as is the default)
    if (this.state !== nextState) {
        return true
    }
    // update if props are shallowly not equal, inspired by PureRenderMixin
    // we could return just 'false' here, and avoid the `skipRender` checks etc
    // however, it is nicer if lifecycle events are triggered like usually,
    // so we return true here if props are shallowly modified.
    return !shallowEqual(this.props, nextProps)
}

import * as React from 'react';
import { observer } from 'mobx-react-lite';

import {
  StyledNewsItem,
  Img,
  Info,
  Title,
  Footer,
  Source,
  Fill,
  Description,
} from './style';
import { INewsItem } from '~/interfaces/news-item';

export const NewsItem = observer(
  ({
    item,
    column,
    row,
    width,
    height,
  }: {
    item: INewsItem;
    column: number;
    row: number;
    width: number;
    height: number;
  }) => {
    // eslint-disable-next-line prefer-const
    let [img, setImg] = React.useState('');

const children = record.children;

    if (children && children.length) {
      const key = record.get('key');
      expendedKeys.push(key);
      record.isExpanded = true;
    }

    const parent = record.parent;
    if (parent && !parent.isExpanded) {
      expandParents(parent, expendedKeys);
    }
  }
}

const TreeView = observer(({ ds, store, nodesRender, searchAble }) => {
  const treeClass = useMemo(() => classnames({
    'c7ncd-menu-wrap': true,
    'c7ncd-menu-scroll': searchAble,
  }), [searchAble]);

  const nodeRenderer = useCallback(({ record }) => nodesRender(record, store.getSearchValue),
    [store.getSearchValue]);

  function handleSearch(value) {
    const realValue = value || '';
    const expandedKeys = [];

    // NOTE: 让多个 action 只执行一次
    runInAction(() => {
      /**
       *

export default function ChampionSelect() {
    return useObserver(() => {
        if (!champSelect.state) return null;

        return (
            
                
                
                

                {/* Absolute Positioned Elements */}
                
                
                
                
            
        );
    });

function SelectedSectionName() {
    // This can't be a text directly since the bottom border doesn't render on iOS.
    return useObserver(() => (
        
            {getGamemodeName(store.selectedSection).toUpperCase()}
        
    ));
}

function makeComponentReactive(render) {
    if (isUsingStaticRendering() === true) return render.call(this)

    /**
     * If props are shallowly modified, react will render anyway,
     * so atom.reportChanged() should not result in yet another re-render
     */
    setHiddenProp(this, skipRenderKey, false)
    /**
     * forceUpdate will re-assign this.props. We don't want that to cause a loop,
     * so detect these changes
     */
    setHiddenProp(this, isForcingUpdateKey, false)

    // Generate friendly name for debugging
    const initialName =
        this.displayName ||
        this.name ||

import { action } from 'mobx'
import { useObservable, useStaticRendering } from 'mobx-react-lite'
import { createContext, useCallback } from 'react'

const isServer = typeof window === 'undefined'
// eslint-disable-next-line react-hooks/rules-of-hooks
useStaticRendering(isServer)

let StoreContext = createContext()
let start
let stop
let store

function initializeData(initialData = store || {}) {
  const { lastUpdate = Date.now(), light } = initialData
  return {
    lastUpdate,
    light: Boolean(light),
  }
}

function InjectStoreContext({ children, initialData }) {
  let timerInterval = null

// Class for handling Webpack stats output
import Output from "@/lib/output";

// Every byte sent back to the client is React; this is our main template
import Html from "@/views/ssr";

// ----------------------------------------------------------------------------

// Types
export interface IRouterContext {
  status?: number;
  url?: string;
}

// Enable SSR-mode with MobX to avoid memory leaks
useStaticRendering(true);

// Everything from this point will be Webpack'd and dumped in `dist/server.js`
// and then loaded into an active Koa server
export default function(output: Output) {
  // Create Koa middleware to handle React requests
  return async (ctx: Context) => {
    // Create a new Apollo client
    const client = createClient();

    // Create a fresh 'context' for React Router
    const routerContext: IRouterContext = {};

    // Render our components - passing down MobX state, a GraphQL client,
    // and a router for rendering based on our route config
    const components = (

<div>
        <span>变更内容</span>
        <div>
          
          <div>
            
          </div>
          
        </div>
      </div>
    
  );
}; 

export default observer(UpdateRemindModalChildren);