Merge pull request alibaba#808 from Turkyden/fix/useReactive

fix/useReactive: add the usage demo of computed properties

packages/hooks/src/useReactive/demo/demo1.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useReactive } from 'ahooks';
 
 export default () => {
-  let state = useReactive({
+  const state = useReactive({
     count: 0,
     inputVal: '',
     obj: {

packages/hooks/src/useReactive/demo/demo2.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useReactive } from 'ahooks';
 
 export default () => {
-  let state = useReactive({
+  const state = useReactive({
     arr: [],
   });
 

packages/hooks/src/useReactive/demo/demo3.tsx

@@ -1,34 +1,45 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useReactive } from 'ahooks';
 
 export default () => {
-  const state = useReactive({ count: 0 });
-  const [stateCount, setStateCount] = useState(0);
-
-  const state2 = useReactive({ count: 0 });
-  const [stateCount2, setStateCount2] = useState(0);
-
-  // 依赖的是对象，因为始终同一个引用，所以不会执行
-  useEffect(() => {
-    setStateCount(stateCount + 1);
-  }, [state]);
-
-  // 依赖的基础数据类型，所以只要改变就会重新执行
-  useEffect(() => {
-    setStateCount2(stateCount2 + 1);
-  }, [state2.count]);
+  const state = useReactive({
+    bug: '',
+    bugs: ['feat', 'fix', 'chore'],
+    addBug(bug) {
+      this.bugs.push(bug);
+    },
+    get bugsCount() {
+      return this.bugs.length;
+    },
+  });
 
   return (
     <div>
-      <button style={{ marginTop: 20 }} onClick={() => (state.count += 1)}>
-        stateCount + 1
-      </button>
-      <p>stateCount:{stateCount}</p>
+      <p>state.bugsCount: {state.bugsCount}</p>
+
+      <form
+        onSubmit={(e) => {
+          state.addBug(state.bug);
+          state.bug = '';
+          e.preventDefault();
+        }}
+      >
+        <input type="text" value={state.bug} onChange={(e) => (state.bug = e.target.value)} />
+        <button type="submit" style={{ marginLeft: '10px' }}>
+          Add
+        </button>
+        <button type="button" style={{ marginLeft: '10px' }} onClick={() => state.bugs.pop()}>
+          Delete
+        </button>
+      </form>
+
+      <br />
 
-      <button style={{ marginTop: 20 }} onClick={() => (state2.count += 1)}>
-        stateCount2 + 1
-      </button>
-      <p>stateCount2:{stateCount2}</p>
+      <ul>
+        {state.bugs.map((bug) => (
+          <li key={bug}>{bug}</li>
+        ))}
+      </ul>
     </div>
   );
 };

packages/hooks/src/useReactive/demo/demo4.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import { useReactive } from 'ahooks';
+
+export default () => {
+  const state = useReactive({ count: 0 });
+  const [stateCount, setStateCount] = useState(0);
+
+  const state2 = useReactive({ count: 0 });
+  const [stateCount2, setStateCount2] = useState(0);
+
+  // 依赖的是对象，因为始终同一个引用，所以不会执行
+  useEffect(() => {
+    setStateCount(stateCount + 1);
+  }, [state]);
+
+  // 依赖的基础数据类型，所以只要改变就会重新执行
+  useEffect(() => {
+    setStateCount2(stateCount2 + 1);
+  }, [state2.count]);
+
+  return (
+    <div>
+      <button style={{ marginTop: 20 }} onClick={() => (state.count += 1)}>
+        stateCount + 1
+      </button>
+      <p>stateCount:{stateCount}</p>
+
+      <button style={{ marginTop: 20 }} onClick={() => (state2.count += 1)}>
+        stateCount2 + 1
+      </button>
+      <p>stateCount2:{stateCount2}</p>
+    </div>
+  );
+};

packages/hooks/src/useReactive/index.en-US.md

@@ -22,9 +22,13 @@ It offers data reactivity when manipulating states and views, in which case `use
 
 <code src="./demo/demo2.tsx" />
 
+### Computed Properties
+
+<code src="./demo/demo3.tsx" />
+
 ### notice
 
-<code  src="./demo/demo3.tsx" desc="`useReactive` returns a proxy object which always has the same reference. If `useEffect`, `useMemo`, `useCallback` and props passed to child component rely on the proxy, none of the above will be invoked by any changes to the proxy."  />
+<code  src="./demo/demo4.tsx" desc="`useReactive` returns a proxy object which always has the same reference. If `useEffect`, `useMemo`, `useCallback` and props passed to child component rely on the proxy, none of the above will be invoked by any changes to the proxy."  />
 
 ## API
 

packages/hooks/src/useReactive/index.zh-CN.md

@@ -18,14 +18,17 @@ group:
 
 <code src="./demo/demo1.tsx" />
 
-
 ### 数组操作
 
 <code src="./demo/demo2.tsx"  />
 
+### 计算属性
+
+<code src="./demo/demo3.tsx"  />
+
 ### 注意
 
-<code  src="./demo/demo3.tsx" desc="`useReactive`产生可操作的代理对象一直都是同一个引用，`useEffect` , `useMemo` ,`useCallback` ,`子组件属性传递` 等如果依赖的是这个代理对象是**不会**引起重新执行。"  />
+<code  src="./demo/demo4.tsx" desc="`useReactive`产生可操作的代理对象一直都是同一个引用，`useEffect` , `useMemo` ,`useCallback` ,`子组件属性传递` 等如果依赖的是这个代理对象是**不会**引起重新执行。"  />
 
 ## API