fix(react-login-page): fix control render issue.

Author: jaywcjlove

core/README.md

@@ -232,10 +232,13 @@ import React from 'react';
 import Login, { Render } from 'react-login-page';
 
 const Demo = () => {
+  const [name, setName] = React.useState(1);
+  console.log('name:', name);
   return (
     <Login>
       <Render>{({ blocks, fields, $$index, extra }, data) => <label>{blocks.title}</label>}</Render>
-      <Login.Block keyname="title">Login</Login.Block>
+      <Login.Block keyname="title">{name} Login</Login.Block>
+      <button onClick={() => setName(name + 1)}>++</button>
     </Login>
   );
 };

core/src/Block.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useRef, useEffect, createElement, AllHTMLAttributes } from 'react';
+import { PropsWithChildren, useEffect, createElement, AllHTMLAttributes, memo } from 'react';
 import { useStore, BlockTagType, Blocks } from './store';
 
 export interface BlockProps<T extends BlockTagType> extends AllHTMLAttributes<T> {
@@ -15,22 +15,21 @@ export interface BlockProps<T extends BlockTagType> extends AllHTMLAttributes<T>
   tagName?: T;
 }
 
-export const Block = <Tag extends BlockTagType = 'div'>(props: PropsWithChildren<Partial<BlockProps<Tag>>>) => {
-  const ref = useRef<Partial<BlockProps<Tag>>>();
+export const Block = memo(<Tag extends BlockTagType = 'div'>(props: PropsWithChildren<Partial<BlockProps<Tag>>>) => {
   const { blocks = {}, dispatch } = useStore();
+  const { name, keyname, visible = true, tagName = 'div', ...elmProps } = props;
   useEffect(() => {
-    const { name, keyname, visible = true, tagName = 'div', ...elmProps } = props;
-    if (ref.current !== elmProps && (name || keyname)) {
+    if (name || keyname) {
       const key = (keyname || name) as string;
-      ref.current = { ...elmProps };
       const div = visible ? createElement(tagName, { ...elmProps }, elmProps.children) : null;
+      delete blocks[key];
       dispatch({
         blocks: { ...blocks, [key]: div as unknown as Blocks<'div'> },
       });
     }
-  }, [props, ref]);
+  }, [props]);
 
   return null;
-};
+});
 
 Block.displayName = 'Login.Block';

core/src/Button.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, useRef, useEffect } from 'react';
+import { FC, PropsWithChildren, useEffect, memo } from 'react';
 import { useStore } from './store';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -9,21 +9,20 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   index?: number;
 }
 
-export const Button: FC<PropsWithChildren<ButtonProps>> = (props) => {
-  const ref = useRef<ButtonProps>();
+export const Button: FC<PropsWithChildren<ButtonProps>> = memo((props) => {
   const { buttons = {}, dispatch } = useStore();
   useEffect(() => {
     const { keyname, visible = true, ...elmProps } = props;
-    if (ref.current !== elmProps && (keyname || elmProps.name)) {
-      ref.current = { ...elmProps };
+    if (keyname || elmProps.name) {
       const key = (keyname || elmProps.name) as string;
+      delete buttons[key];
       dispatch({
         buttons: { ...buttons, [key]: visible ? <button type="submit" {...elmProps} /> : null },
       });
     }
-  }, [props, ref]);
+  }, [props]);
 
   return null;
-};
+});
 
 Button.displayName = 'Login.Button';

core/src/Input.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useRef, useEffect, memo } from 'react';
+import React, { FC, PropsWithChildren, useEffect, memo } from 'react';
 import { useStore } from './store';
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -15,13 +15,14 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
 }
 
 export const Input: FC<PropsWithChildren<InputProps>> = memo((props) => {
-  const ref = useRef<InputProps>();
   const { fields = {}, extra = {}, $$index = {}, dispatch } = useStore();
   const { rename, keyname, visible = true, children, ...elmProps } = props;
   useEffect(() => {
-    if (ref.current !== props && (keyname || elmProps.name)) {
+    if (keyname || elmProps.name) {
       const key = (keyname || elmProps.name) as string;
-      ref.current = { ...props };
+      delete $$index[key];
+      delete fields[key];
+      delete extra[key];
       dispatch({
         $$index: { ...$$index, [key]: elmProps.index || 0 },
         extra: {
@@ -34,7 +35,7 @@ export const Input: FC<PropsWithChildren<InputProps>> = memo((props) => {
         },
       });
     }
-  }, [props, ref]);
+  }, [props]);
 
   return null;
 });

core/src/Select.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useRef, useEffect } from 'react';
+import React, { FC, PropsWithChildren, useEffect, memo } from 'react';
 import { useStore } from './store';
 
 export interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
@@ -14,21 +14,20 @@ export interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement
   index?: number;
 }
 
-export const Select: FC<PropsWithChildren<SelectProps>> = (props) => {
-  const ref = useRef<SelectProps>();
+export const Select: FC<PropsWithChildren<SelectProps>> = memo((props) => {
   const { fields = {}, dispatch } = useStore();
   const { rename, keyname, visible = true, ...elmProps } = props;
   useEffect(() => {
-    if (ref.current !== props && (keyname || props.name)) {
+    if (keyname || props.name) {
       const key = (keyname || props.name) as string;
-      ref.current = { ...props };
+      delete fields[key];
       dispatch({
         fields: { ...fields, [key]: visible ? <select {...elmProps} name={rename || props.name} /> : null },
       });
     }
-  }, [props, ref]);
+  }, [props]);
 
   return null;
-};
+});
 
 Select.displayName = 'Login.Select';

core/src/Textarea.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo, PropsWithChildren, useRef, useEffect } from 'react';
+import React, { FC, memo, PropsWithChildren, useEffect } from 'react';
 import { useStore } from './store';
 
 export interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
@@ -15,13 +15,14 @@ export interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
 }
 
 export const Textarea: FC<PropsWithChildren<TextareaProps>> = memo((props) => {
-  const ref = useRef<TextareaProps>();
   const { fields = {}, extra = {}, $$index = {}, dispatch } = useStore();
   useEffect(() => {
     const { rename, keyname, visible = true, children, ...elmProps } = props;
-    if (ref.current !== props && (keyname || elmProps.name)) {
+    if (keyname || elmProps.name) {
       const key = (keyname || elmProps.name) as string;
-      ref.current = { ...props };
+      delete fields[key];
+      delete extra[key];
+      delete $$index[key];
       dispatch({
         $$index: { ...$$index, [key]: elmProps.index || 0 },
         extra: {
@@ -31,7 +32,7 @@ export const Textarea: FC<PropsWithChildren<TextareaProps>> = memo((props) => {
         fields: { ...fields, [key]: visible ? <textarea {...elmProps} name={rename || elmProps.name} /> : null },
       });
     }
-  }, [props, ref]);
+  }, [props]);
 
   return null;
 });