---
name: Counter
route: /counter
order: 1
sidebar: true
---

import Counter from './';

# Counter Component

这是一个计数器的示例。 

1. `computed`计算属性。
2. 嵌套`computed`。
3. `effect`去观察`reacitve`以及`computed`。

<Counter>Hi</Counter>

## Codes
```tsx
import React from 'react';
import { setup } from '../../src/index';
import { reactive, computed, effect } from '@vue/reactivity'
import styles from './index.css';

const Counter: React.FC = setup(() => {
  const state = reactive({ count: 0 });
  const plusOne = computed(() => state.count + 1);
  const plusTwo = computed(() => plusOne.value + 1);


  effect(() => {
    console.log('current count changed', state.count);
  });

  effect(() => {
    console.log('current plusOne', plusOne.value);
  });

  const add = () => {
    state.count = state.count + 1;
  };

  return props => {
    return (
      <>
        <div>current count is {state.count}</div>
        <div>current plusOne is {plusOne.value}</div>
        <div>current plusTwo is {plusTwo.value}</div>
        <button onClick={add} className={styles.button}>
          {props.children}
        </button>
      </>
    );
  };
});

export default Counter;

```