feat(useField): 优化useLayoutEffect避免server端调用警告

qiqiboy · Feb 25, 2021 · 8e9ac23 · 8e9ac23
1 parent 49776bf
commit 8e9ac23
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 25 deletions.
diff --git a/dist/react-formutil.cjs.development.js b/dist/react-formutil.cjs.development.js
@@ -3098,7 +3098,11 @@ function useField(name) {
 
   var useState = React__default['default'].useState,
       useLayoutEffect = React__default['default'].useLayoutEffect,
+      useEffect = React__default['default'].useEffect,
       useRef = React__default['default'].useRef;
+
+  var _useEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
   var $name;
 
   if (name) {
@@ -3137,7 +3141,7 @@ function useField(name) {
     $registered = ($formContext.$$registers || {})[$this.$fieldHandler.$name] || $this.$fieldHandler;
   }
 
-  useLayoutEffect(function () {
+  _useEffect(function () {
     var $state = $this.$state;
 
     if ($this.isMounting) {
@@ -3151,7 +3155,8 @@ function useField(name) {
 
     $this.$prevState = $state; // eslint-disable-next-line
   }, [$this.$state.$value]);
-  useLayoutEffect(function () {
+
+  _useEffect(function () {
     $this.isMounting = true;
     warning__default['default'](!$name || $formContext.$formutil, "You should enusre that the useField() with the name '".concat($name, "' must be used underneath a <Form /> component or withForm() HOC, otherwise it's isolated."));
     warning__default['default']($name, "You should pass a name argument to useField(), otherwise it will be isolated!");
@@ -3160,7 +3165,8 @@ function useField(name) {
       createRef(props.$ref, null);
     }; // eslint-disable-next-line
   }, []);
-  useLayoutEffect(function () {
+
+  _useEffect(function () {
     if ($formContext.$$register) {
       $formContext.$$register($name, $this.$fieldHandler);
     }
@@ -3172,10 +3178,12 @@ function useField(name) {
     }; // eslint-disable-next-line
   }, [$name]); // trigger ref callback
 
-  useLayoutEffect(function () {
+
+  _useEffect(function () {
     createRef(props.$ref, $this.$fieldutil);
   });
-  useLayoutEffect(function () {
+
+  _useEffect(function () {
     if (callbackRef.current.length > 0) {
       var callbackQueue = toConsumableArray(callbackRef.current);
 

diff --git a/dist/react-formutil.cjs.production.js b/dist/react-formutil.cjs.production.js
diff --git a/dist/react-formutil.esm.development.js b/dist/react-formutil.esm.development.js
@@ -3027,7 +3027,11 @@ function useField(name) {
 
   var useState = React.useState,
       useLayoutEffect = React.useLayoutEffect,
+      useEffect = React.useEffect,
       useRef = React.useRef;
+
+  var _useEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
   var $name;
 
   if (name) {
@@ -3066,7 +3070,7 @@ function useField(name) {
     $registered = ($formContext.$$registers || {})[$this.$fieldHandler.$name] || $this.$fieldHandler;
   }
 
-  useLayoutEffect(function () {
+  _useEffect(function () {
     var $state = $this.$state;
 
     if ($this.isMounting) {
@@ -3080,7 +3084,8 @@ function useField(name) {
 
     $this.$prevState = $state; // eslint-disable-next-line
   }, [$this.$state.$value]);
-  useLayoutEffect(function () {
+
+  _useEffect(function () {
     $this.isMounting = true;
     warning(!$name || $formContext.$formutil, "You should enusre that the useField() with the name '".concat($name, "' must be used underneath a <Form /> component or withForm() HOC, otherwise it's isolated."));
     warning($name, "You should pass a name argument to useField(), otherwise it will be isolated!");
@@ -3089,7 +3094,8 @@ function useField(name) {
       createRef(props.$ref, null);
     }; // eslint-disable-next-line
   }, []);
-  useLayoutEffect(function () {
+
+  _useEffect(function () {
     if ($formContext.$$register) {
       $formContext.$$register($name, $this.$fieldHandler);
     }
@@ -3101,10 +3107,12 @@ function useField(name) {
     }; // eslint-disable-next-line
   }, [$name]); // trigger ref callback
 
-  useLayoutEffect(function () {
+
+  _useEffect(function () {
     createRef(props.$ref, $this.$fieldutil);
   });
-  useLayoutEffect(function () {
+
+  _useEffect(function () {
     if (callbackRef.current.length > 0) {
       var callbackQueue = _toConsumableArray(callbackRef.current);
 

diff --git a/dist/react-formutil.esm.production.js b/dist/react-formutil.esm.production.js
diff --git a/dist/react-formutil.umd.development.js b/dist/react-formutil.umd.development.js
@@ -3834,7 +3834,11 @@
 
     var useState = React__default['default'].useState,
         useLayoutEffect = React__default['default'].useLayoutEffect,
+        useEffect = React__default['default'].useEffect,
         useRef = React__default['default'].useRef;
+
+    var _useEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
     var $name;
 
     if (name) {
@@ -3873,7 +3877,7 @@
       $registered = ($formContext.$$registers || {})[$this.$fieldHandler.$name] || $this.$fieldHandler;
     }
 
-    useLayoutEffect(function () {
+    _useEffect(function () {
       var $state = $this.$state;
 
       if ($this.isMounting) {
@@ -3887,7 +3891,8 @@
 
       $this.$prevState = $state; // eslint-disable-next-line
     }, [$this.$state.$value]);
-    useLayoutEffect(function () {
+
+    _useEffect(function () {
       $this.isMounting = true;
       warning_1(!$name || $formContext.$formutil, "You should enusre that the useField() with the name '".concat($name, "' must be used underneath a <Form /> component or withForm() HOC, otherwise it's isolated."));
       warning_1($name, "You should pass a name argument to useField(), otherwise it will be isolated!");
@@ -3896,7 +3901,8 @@
         createRef(props.$ref, null);
       }; // eslint-disable-next-line
     }, []);
-    useLayoutEffect(function () {
+
+    _useEffect(function () {
       if ($formContext.$$register) {
         $formContext.$$register($name, $this.$fieldHandler);
       }
@@ -3908,10 +3914,12 @@
       }; // eslint-disable-next-line
     }, [$name]); // trigger ref callback
 
-    useLayoutEffect(function () {
+
+    _useEffect(function () {
       createRef(props.$ref, $this.$fieldutil);
     });
-    useLayoutEffect(function () {
+
+    _useEffect(function () {
       if (callbackRef.current.length > 0) {
         var callbackQueue = toConsumableArray(callbackRef.current);
 

diff --git a/dist/react-formutil.umd.production.js b/dist/react-formutil.umd.production.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-formutil",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Happy to build the forms in React ^_^",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

diff --git a/src/hooks/useField.js b/src/hooks/useField.js
@@ -18,7 +18,8 @@ function useField(name, props = {}) {
         throw new Error(`Hooks api need react@>=16.8, Please upgrade your reactjs.`);
     }
 
-    const { useState, useLayoutEffect, useRef } = React;
+    const { useState, useLayoutEffect, useEffect, useRef } = React;
+    const _useEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
     let $name;
 
@@ -60,7 +61,7 @@ function useField(name, props = {}) {
         $registered = ($formContext.$$registers || {})[$this.$fieldHandler.$name] || $this.$fieldHandler;
     }
 
-    useLayoutEffect(() => {
+    _useEffect(() => {
         const { $state } = $this;
 
         if ($this.isMounting) {
@@ -76,7 +77,7 @@ function useField(name, props = {}) {
         // eslint-disable-next-line
     }, [$this.$state.$value]);
 
-    useLayoutEffect(() => {
+    _useEffect(() => {
         $this.isMounting = true;
 
         warning(
@@ -94,7 +95,7 @@ function useField(name, props = {}) {
         // eslint-disable-next-line
     }, []);
 
-    useLayoutEffect(() => {
+    _useEffect(() => {
         if ($formContext.$$register) {
             $formContext.$$register($name, $this.$fieldHandler);
         }
@@ -108,11 +109,11 @@ function useField(name, props = {}) {
     }, [$name]);
 
     // trigger ref callback
-    useLayoutEffect(() => {
+    _useEffect(() => {
         createRef(props.$ref, $this.$fieldutil);
     });
 
-    useLayoutEffect(() => {
+    _useEffect(() => {
         if (callbackRef.current.length > 0) {
             const callbackQueue = [...callbackRef.current];