💡: add example: useCreation\useContext

app/src/main/java/xyz/junerver/composehooks/example/UseContextExample.kt

@@ -0,0 +1,90 @@
+package xyz.junerver.composehooks.example
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import xyz.junerver.compose.hooks.ReactContext
+import xyz.junerver.compose.hooks.createContext
+import xyz.junerver.compose.hooks.useContext
+import xyz.junerver.compose.hooks.useReducer
+import xyz.junerver.compose.hooks.useState
+import xyz.junerver.composehooks.ui.component.TButton
+import xyz.junerver.kotlin.tuple
+
+/**
+ * Description: 使用[useContext]可以避免复杂的状态提升，状态由父组件通过[ReactContext.Provider]提供，子组件无论嵌套多少级，都可以使用[useContext]轻松获取上下文
+ *
+ * Using [useContext] can avoid complex state promotion. The state is provided by the parent component through [ReactContext.Provider]. No matter how many levels of nesting the child component has, you can use [useContext] to easily obtain the context.
+ * @author Junerver
+ * date: 2024/3/11-11:47
+ * Email: [email protected]
+ * Version: v1.0
+ */
+val initialState = SimpleData("default", 18)
+
+/**
+ * 上下文的初始值并没有限定，但是我推荐使用[tuple]来传递一个元组
+ */
+val SimpleContext = createContext(tuple(
+    initialState,
+    { _: String -> },
+    {}
+))
+
+@Composable
+fun UseContextExample() {
+    val (state, dispatch) = useReducer(simpleReducer, initialState = initialState)
+    /**
+     * 通过[ReactContext.Provider]向子组件提供上下文，子组件只需要通过[useContext]即可拿到正确的上下文；
+     */
+    SimpleContext.Provider(
+        value = tuple(
+            state,
+            /**
+             * 不建议直接将[dispatch]传递给[Provider]
+             */
+            { newName: String -> dispatch(SimpleAction.ChangeName(newName)) },
+            { dispatch(SimpleAction.AgeIncrease) }
+        )
+    ) {
+        Surface {
+            Column {
+                Text(text = "ChileOne:")
+                ChildOne()
+                Spacer(modifier = Modifier.height(20.dp))
+                Text(text = "ChileTwo:")
+                ChildTwo()
+            }
+        }
+    }
+}
+
+@Composable
+fun ChildOne() {
+    val (state) = useContext(context = SimpleContext)
+    Text(text = "state: $state")
+}
+
+@Composable
+fun ChildTwo() {
+    val (_, changName, ageIncrease) = useContext(context = SimpleContext)
+    val (state, setState) = useState("")
+
+    Column {
+        OutlinedTextField(value = state, onValueChange = setState)
+        TButton(text = "changeName") {
+            changName(state)
+            setState("")
+        }
+        TButton(text = "age +1") {
+            ageIncrease()
+        }
+    }
+
+}

app/src/main/java/xyz/junerver/composehooks/example/UseCreationExample.kt

@@ -0,0 +1,47 @@
+package xyz.junerver.composehooks.example
+
+import android.util.Log
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import xyz.junerver.compose.hooks.useCreation
+import xyz.junerver.compose.hooks.useRef
+import xyz.junerver.compose.hooks.useUpdate
+import xyz.junerver.composehooks.ui.component.TButton
+
+/**
+ * Description:
+ * @author Junerver
+ * date: 2024/3/11-11:36
+ * Email: [email protected]
+ * Version: v1.0
+ */
+data class Subject(val flag: String) {
+    init {
+        Log.d("UseCreationExample", "Subject is be instantiated：$flag")
+    }
+}
+
+@Composable
+fun UseCreationExample() {
+    /**
+     * 当组件刷新时，[useRef]会创建一个*一次性*的实例，这个可能会带来一些性能问题；
+     *
+     * When the component is refreshed, [useRef] will create a one-time instance, which may cause some performance issues;
+     */
+    val ref = useRef(default = Subject("useRef${Math.random()}"))
+    val creRef = useCreation {
+        Subject("useCreation${Math.random()}")
+    }
+    val update = useUpdate()
+    Surface {
+        Column {
+            Text(text = ref.current.flag)
+            Text(text = creRef.current.flag)
+            TButton(text = "update and see log") {
+                update()
+            }
+        }
+    }
+}

app/src/main/java/xyz/junerver/composehooks/route/routes.kt

@@ -3,6 +3,8 @@ package xyz.junerver.composehooks.route
 import androidx.compose.runtime.Composable
 import xyz.junerver.composehooks.HomeScreen
 import xyz.junerver.composehooks.example.UseBooleanExample
+import xyz.junerver.composehooks.example.UseContextExample
+import xyz.junerver.composehooks.example.UseCreationExample
 import xyz.junerver.composehooks.example.UseDebounceExample
 import xyz.junerver.composehooks.example.UseEffectExample
 import xyz.junerver.composehooks.example.UseIntervalExample
@@ -35,8 +37,8 @@ val routes = arrayOf<Pair<String, @Composable () -> Unit>>(
     "useNetwork" to { UseNetworkExample() },
     "useRequest" to { TODO() },
     "useBoolean" to { UseBooleanExample() },
-    "useContext" to { TODO() },
-    "useCreation" to { TODO() },
+    "useContext" to { UseContextExample() },
+    "useCreation" to { UseCreationExample() },
     "useDebounce" to { UseDebounceExample() },
     "useEffect" to { UseEffectExample() },
     "useInterval" to { UseIntervalExample() },