分享几个上千的React开源库助你玩转React

import { Typography, Space, Button, Tag } from 'antd';
import useMutableState from 'beautiful-react-hooks/useMutableState';
const TestComponent = () => {
  const counter = useMutableState({ value: 0 });
  return (
    <DisplayDemo title="useMutableState">
      <Typography.Paragraph>
        Counter: <Tag color="green">{counter.value}</Tag>
      </Typography.Paragraph>
      <Space>
        <Button type="primary" onClick={() => counter.value += 1}>increase</Button>
        <Button type="primary" onClick={() => counter.value -= 1}>decrease</Button>
      </Space>
    </DisplayDemo>
  );
};

import React from 'react';
import { compose, withState } from 'recompose';
import withLifecycle from '@hocs/with-lifecycle';
const Demo = ({ isLoading }) => (
  <h1>{ isLoading ? 'Loading' : 'Done' }</h1>
);
export default compose(
  withState('isLoading', 'setLoading', true),
  withLifecycle({
    onDidMount({ setLoading }) {
      setLoading(true, () => {
        setTimeout(() => setLoading(false), 3000);
      })
    },
    onReceiveProps(props, nextProps) {
      console.log(`isLoading: ${props.isLoading} → ${nextProps.isLoading}`);
    }
  })
)(Demo);