https://github.com/nanxiaobei/react-split-components

🏏 A new way of React Components without Hooks
https://github.com/nanxiaobei/react-split-components

Last synced: about 2 months ago
JSON representation

🏏 A new way of React Components without Hooks

• Host: GitHub
• URL: https://github.com/nanxiaobei/react-split-components
• Owner: nanxiaobei
• License: mit
• Created: 2021-11-06T08:15:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-23T11:12:07.000Z (almost 2 years ago)
• Last Synced: 2023-11-07T17:12:04.621Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 104 KB
• Stars: 114
• Watchers: 5
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




Create now ➫ [🔗 kee.so](https://kee.so/)



---

# React Split Components (RiC)

A new way of React Components without Hooks.

English | [简体中文](./README.zh-CN.md)

---

## Introduction

[Introducing React Split Components →](./INTRODUCTION.md)

React Function Components in closure style.

Write React like Svelte, just natural and fluent code.

## Features

- Remove the dependence on Hooks, but not purely Functional Components

- Only at the writing level, no need for ESLint support

- Like High-Order Components, it's a "design pattern", not API, no lib needed

## Simple Example

```jsx

function demo({ atom }) {

  const state = atom({

    count: 0,

  });

  const onClick = () => {

    state.count += 1;

  };

  return () => {

    const { count } = state;

    return (

      <>

        
{count}

        Click me

      >

    );

  };

}


const Demo = create(demo);

```

## Full Example

```jsx

function demo({ props, atom, onMount, onEffect }) {

  const state = atom({

    // for useState

    loading: true,

    data: null,

    count: 0,

    // for useMemo

    power: () => state.count * state.count,

    text: () => `${props.theme} ~ ${state.count}`,

  });

  // for useRef

  const countRef = { current: null };

  // for useCallback

  const onClick = () => {

    const { setTheme } = props;

    setTheme();

    state.count += 1;

  };

  const getData = () => {

    request().then((res) => {

      state.data = res.data;

      state.loading = false;

    });

  };

  // for useEffect

  onMount(() => {

    getData();

    console.log('mount!');

    return () => {

      console.log('unmount!');

    };

  });

  onEffect(state.power, (val, prevVal) => {

    console.log('enter state.power', val, prevVal);

    return () => {

      console.log('clear state.power', val, prevVal);

    };

  });

  const onReload = () => {

    state.loading = true;

    getData();

  };

  return () => {

    const { theme } = props;

    const { loading, data, count, power, text } = state;

    return (

      <>

        
{loading ? 'loading...' : JSON.stringify(data)}

        Reload data

        
{theme}

        
{count}

        
{power}

        
{text}

        Click me

      >

    );

  };

}


const Demo = create(demo);

```

## Online Demo

[![Edit react-split-components-final](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-split-components-final-9ftjx?fontsize=14&hidenavigation=1&theme=dark)

## License

[MIT License](https://github.com/nanxiaobei/react-split-components/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)