feat[ptr]: 默认情况下，Form 对在里面的所有的 Input 都传递了 handleChange, 当其中一个变化时，直接修改了 Form 的 state, 那么整个 Form 、 Form 中所有的 Input 都会 re-rende

通过 useForm 内部管理的 _formValues 实现字段级别订阅更新、 _formState 表单整体状态的观察者模式

Author: ceilf6

.effect-pictures/form-massive-re-render.png

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-hook-form": "^7.71.1",
     "react-scripts": "3.0.1"
   },
   "scripts": {

.effect-pictures/form-useForm.png

@@ -3,6 +3,7 @@ import React from 'react';
 
 // import CoverButton from './test/CoverButton';
 import Father from './test/Father';
+import Form from './components/Form';
 
 const el = (
     // 写在 组件中间{ }中的 会自动传入到 props.children
@@ -13,7 +14,8 @@ const el = (
     //     }}
     // </CoverButton>
 
-    <Father />
+    // <Father />
+    <Form legend={['name','key']}/>
 )
 
 

.effect-pictures/image.png .effect-pictures/same-TCP.png.effect-pictures/image.png renamed to .effect-pictures/same-TCP.png

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useController, useForm } from 'react-hook-form';
+import Input from '../Input';
+
+function getFieldName(index) {
+    return `field_${index}`;
+}
+
+const FormField = React.memo(function FormField({ control, name, legend }) {
+    const { field } = useController({
+        name,
+        control,
+        defaultValue: ''
+    });
+
+    return (
+        <Input
+            legend={legend}
+            value={field.value}
+            transform={field.onChange}
+        />
+    );
+});
+
+function Form({ legend }) {
+    const legendList = React.useMemo(() => {
+        return legend && legend.length ? legend : ['用户名'];
+    }, [legend]);
+
+    const defaultValues = React.useMemo(() => {
+        return legendList.reduce((result, _item, index) => {
+            result[getFieldName(index)] = '';
+            return result;
+        }, {});
+    }, [legendList]);
+
+    const { control, handleSubmit, reset } = useForm({
+        defaultValues
+    });
+
+    React.useEffect(() => {
+        reset(defaultValues);
+    }, [defaultValues, reset]);
+
+    const onSubmit = React.useCallback(
+        (formValues) => {
+            const values = legendList.map((_, index) => formValues[getFieldName(index)]);
+            console.log(`你要提交的内容为：${values}`);
+        },
+        [legendList]
+    );
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            {legendList.map((item, index) => (
+                <FormField
+                    key={`${item}-${index}`}
+                    control={control}
+                    legend={item}
+                    name={getFieldName(index)}
+                />
+            ))}
+            <button type="submit">submit</button>
+        </form>
+    );
+}
+
+export default Form;

React/sandboxs/package-lock.json

@@ -0,0 +1,50 @@
+import React from 'react';
+import Input from '../Input';
+
+export default class Form extends React.Component {
+    constructor(props) {
+        super(props);
+
+        const legend = props.legend && props.legend.length ? props.legend : ['用户名'];
+
+        this.state = {
+            legend,
+            values: legend.map(() => '')
+        };
+    }
+
+    // Form 对在里面的所有的 Input 都传递了 handleChange
+    // 当其中一个变化时，直接修改了 Form 的 state 
+    // 那么整个 Form 、 Form 中所有的 Input 都会 re-render
+    handleChange = (index, nextValue) => {
+        this.setState((prevState) => {
+            const values = [...prevState.values];
+            values[index] = nextValue;
+
+            return { values };
+        });
+    };
+
+    handleClick = () => {
+        // 提交整个表单
+        console.log(`你要提交的内容为：${this.state.values}`);
+    }
+
+    render() {
+        const { legend, values } = this.state;
+
+        return (
+            <form>
+                {legend.map((item, index) => (
+                    <Input
+                        key={`${item}-${index}`}
+                        legend={item}
+                        value={values[index]}
+                        transform={(nextValue) => this.handleChange(index, nextValue)}
+                    />
+                ))}
+                <button onClick={this.handleClick}>submmit</button>
+            </form>
+        );
+    }
+}

React/sandboxs/package.json

@@ -0,0 +1,22 @@
+import React from 'react';
+
+function Input(props) {
+    console.log(`=== ${props.legend} render`)
+
+    function handleChange(e) {
+        // 在子组件中将用户数据的值，传递给父组件
+        // 让父组件来进行修改，那么就需要调用父组件传入的更新函数（事件）
+        props.transform(e.target.value);
+    }
+
+    return (
+        <fieldset>
+            <legend>{props.legend}</legend>
+            {/* 受控组价 */}
+            <input  value={props.value}
+            type="text" onChange={handleChange} />
+        </fieldset>
+    );
+}
+
+export default Input;