提交ReactUseDemo

ganghongli · Apr 16, 2024 · fed4b23 · fed4b23
1 parent 55cfa29
commit fed4b23
Show file tree

Hide file tree

Showing 69 changed files with 1,511 additions and 1,342 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/RNOHDCS.iml b/.idea/RNOHDCS.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/ReactUseDemo/CreateGlobalState.tsx → ReactUseDemo/Demo/CreateGlobalState.tsx b/ReactUseDemo/CreateGlobalState.tsx → ReactUseDemo/Demo/CreateGlobalState.tsx
@@ -1,30 +1,29 @@
-import React from 'react';
-import { View, Text, Button } from 'react-native';
-import { createGlobalState } from 'react-use'
-
-const useGlobalValue = createGlobalState<number>(0);
-
-const CompA = () => {
-  const [value, setValue] = useGlobalValue();
-
-  return <Button title='+' onPress={() => setValue(value + 1)} />
-};
-
-const CompB = () => {
-  const [value, setValue] = useGlobalValue();
-
-  return <Button title='-' onPress={() => setValue(value - 1)} />
-};
-
-const CreateGlobalStateDemo = () => {
-  const [value] = useGlobalValue();
-  return (
-    <View>
-      <Text>{value}</Text>
-      <CompA />
-      <CompB />
-    </View>
-  );
-};
-
-export default CreateGlobalStateDemo;
+import React from 'react';
+import { View, Text, Button } from 'react-native';
+import { createGlobalState } from 'react-use'
+
+const useGlobalValue = createGlobalState<number>(0);
+
+const CompA = () => {
+  const [value, setValue] = useGlobalValue();
+
+  return <Button title='+' onPress={() => setValue(value + 1)} />
+};
+
+const CompB = () => {
+  const [value, setValue] = useGlobalValue();
+
+  return <Button title='-' onPress={() => setValue(value - 1)} />
+};
+
+ const CreateGlobalStateDemo = () => {
+  const [value] = useGlobalValue();
+  return (
+    <View>
+      <Text>{value}</Text>
+      <CompA />
+      <CompB />
+    </View>
+  );
+};
+export default CreateGlobalStateDemo
diff --git a/ReactUseDemo/CreateMemo.tsx → ReactUseDemo/Demo/CreateMemo.tsx b/ReactUseDemo/CreateMemo.tsx → ReactUseDemo/Demo/CreateMemo.tsx
@@ -1,23 +1,22 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { createMemo } from 'react-use';
-
-const fibonacci: any = n => {
-  if (n === 0) return 0;
-  if (n === 1) return 1;
-  return fibonacci(n - 1) + fibonacci(n - 2);
-};
-
-const useMemoFibonacci = createMemo(fibonacci);
-
-const CreateMemoDemo = () => {
-  const result = useMemoFibonacci(10);
-
-  return (
-    <Text>
-      fib(10) = {result}
-    </Text>
-  );
-};
-
-export default CreateMemoDemo;
+import React from 'react';
+import { Text } from 'react-native';
+import { createMemo } from 'react-use';
+
+const fibonacci: any = (n: number) => {
+  if (n === 0) return 0;
+  if (n === 1) return 1;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+};
+
+const useMemoFibonacci = createMemo(fibonacci);
+
+ const CreateMemoDemo = () => {
+  const result = useMemoFibonacci(10);
+
+  return (
+    <Text>
+      fib(10) = {result}
+    </Text>
+  );
+};
+export default CreateMemoDemo
diff --git a/ReactUseDemo/CreateReducerContext.tsx → ReactUseDemo/Demo/CreateReducerContext.tsx b/ReactUseDemo/CreateReducerContext.tsx → ReactUseDemo/Demo/CreateReducerContext.tsx
@@ -1,54 +1,53 @@
-import React from 'react';
-import { View, Button, Text } from 'react-native';
-import { createReducerContext } from 'react-use';
-
-type Action = 'increment' | 'decrement';
-
-const reducer = (state: number, action: Action) => {
-  switch (action) {
-    case 'increment':
-      return state + 1;
-    case 'decrement':
-      return state - 1;
-    default:
-      throw new Error();
-  }
-};
-
-const [useSharedCounter, SharedCounterProvider] = createReducerContext(reducer, 0);
-
-const ComponentA = () => {
-  const [count, dispatch] = useSharedCounter();
-  return (
-    <View>
-      <Text>Component A</Text>
-      <Button title='-' onPress={() => dispatch('decrement')} />
-      <Text>{count}</Text>
-      <Button title='+' onPress={() => dispatch('increment')} />
-    </View>
-  );
-};
-
-const ComponentB = () => {
-  const [count, dispatch] = useSharedCounter();
-  return (
-    <View>
-      <Text>Component B</Text>
-      <Button title='-' onPress={() => dispatch('decrement')} />
-      <Text>{count}</Text>
-      <Button title='+' onPress={() => dispatch('increment')} />
-    </View>
-  );
-};
-
-const CreateReducerContextDemo = () => {
-  return (
-    <SharedCounterProvider>
-      <Text>Those two counters share the same value.</Text>
-      <ComponentA />
-      <ComponentB />
-    </SharedCounterProvider>
-  );
-};
-
-export default CreateReducerContextDemo;
+import React from 'react';
+import { View, Button, Text } from 'react-native';
+import { createReducerContext } from 'react-use';
+
+type Action = 'increment' | 'decrement';
+
+const reducer = (state: number, action: Action) => {
+  switch (action) {
+    case 'increment':
+      return state + 1;
+    case 'decrement':
+      return state - 1;
+    default:
+      throw new Error();
+  }
+};
+
+const [useSharedCounter, SharedCounterProvider] = createReducerContext(reducer, 0);
+
+const ComponentA = () => {
+  const [count, dispatch] = useSharedCounter();
+  return (
+    <View>
+      <Text>Component A</Text>
+      <Button title='-' onPress={() => dispatch('decrement')} />
+      <Text>{count}</Text>
+      <Button title='+' onPress={() => dispatch('increment')} />
+    </View>
+  );
+};
+
+const ComponentB = () => {
+  const [count, dispatch] = useSharedCounter();
+  return (
+    <View>
+      <Text>Component B</Text>
+      <Button title='-' onPress={() => dispatch('decrement')} />
+      <Text>{count}</Text>
+      <Button title='+' onPress={() => dispatch('increment')} />
+    </View>
+  );
+};
+
+ const CreateReducerContextDemo = () => {
+  return (
+    <SharedCounterProvider>
+      <Text>Those two counters share the same value.</Text>
+      <ComponentA />
+      <ComponentB />
+    </SharedCounterProvider>
+  );
+};
+export default CreateReducerContextDemo
diff --git a/ReactUseDemo/CreateStateContext.tsx → ReactUseDemo/Demo/CreateStateContext.tsx b/ReactUseDemo/CreateStateContext.tsx → ReactUseDemo/Demo/CreateStateContext.tsx
@@ -1,37 +1,37 @@
-import React from 'react';
-import { View, TextInput, Text } from 'react-native';
-import { createStateContext } from 'react-use';
-
-const [useSharedText, SharedTextProvider] = createStateContext('');
-
-const ComponentA = () => {
-  const [text, setText] = useSharedText();
-  return (
-    <View>
-      <Text>Component A:</Text>
-      <TextInput style={{borderWidth:1}} value={text} onChangeText={value => setText(value)} />
-    </View>
-  );
-};
-
-const ComponentB = () => {
-  const [text, setText] = useSharedText();
-  return (
-    <View>
-      <Text>Component B:</Text>
-      <TextInput style={{borderWidth:1}} value={text} onChangeText={value => setText(value)} />
-    </View>
-  );
-};
-
-const CreateStateContextDemo = () => {
-  return (
-    <SharedTextProvider>
-      <Text>Those two fields share the same value.</Text>
-      <ComponentA />
-      <ComponentB />
-    </SharedTextProvider>
-  );
-};
-
-export default CreateStateContextDemo;
+import React from 'react';
+import { View, TextInput, Text } from 'react-native';
+import { createStateContext } from 'react-use';
+
+const [useSharedText, SharedTextProvider] = createStateContext('');
+
+const ComponentA = () => {
+  const [text, setText] = useSharedText();
+  return (
+    <View>
+      <Text>Component A:</Text>
+      <TextInput style={{borderWidth:1}} value={text} onChangeText={value => setText(value)} />
+    </View>
+  );
+};
+
+const ComponentB = () => {
+  const [text, setText] = useSharedText();
+  return (
+    <View>
+      <Text>Component B:</Text>
+      <Text style={{borderWidth:1}}>{text}</Text>
+    </View>
+  );
+};
+
+ const CreateStateContextDemo = () => {
+  return (
+    <SharedTextProvider>
+      <Text>A组件和B组件单向共享状态</Text>
+      <ComponentA />
+      <ComponentB />
+    </SharedTextProvider>
+  );
+};
+
+export default CreateStateContextDemo