form表单、右侧预览功能，form表单与右侧预览区域联动

需求：

1. 左侧为：form表单内容，例如：标题，描述，然后进行保存提交
2. 右侧为：表单预览内容
3. 左侧表单内容发生变化时，右侧预览区域内容同时发生变化

封装组件，并在组件中创建index.tsx文件

import React from 'react';

const PreviewSon: React.FC<any> = (props) => {
const { formData } = props;
 const [form] = Form.useForm();
 // 实时存储的form表单里面的所有值
 const [formValues, setFormValues] = useSetState<any>({
    title: '', // 标题
    content: '', // 描述
 });

 // 初始进来的时候默认的值
 useUpdateEffect(() => {
   const obj= {
      title: formData.title,
      content: formData.content
   }
   form.setFieldsValue(obj); // 表单存储的值 setFieldsValue设置表单的值
   setFormValues(obj); // 右边实时变化的值
  }
 }, [formData]);
 
 // 表单变化的值 存储然后在右边实时显示
 const ValuesChanges = (_: object, allValues: object) => {
    setFormValues(
      Object.assign(formValues, {
        title: allValues.title,
        content: allValues.content,
      }),
    );
 };

 // 保存事件
 const handlerSave = () => {
    // 先触发表单验证
    form?.validateFields(['content',  'title']).then((res) => {
     // 这里需要调用保存接口 进行传入数据 使用useRequest进行调用
       runSave(
         Object.assign(res, {
           title: formValues.title,
           content: formValues.content,
         }),
       );
     }).catch(() => {});
  }
 
 return (<View>
  <Form name="layout" form={form} className="form" onValuesChange={ValuesChanges}>
     <Form.Item name="title" rules={[{ required: true, message: '请输入标题' }]}>
       <Input placeholder="请输入" maxLength={20} />
     </Form.Item>
     <Form.Item name="content" rules={[{ required: true, message: '请输入描述' }]}>
       <TextArea placeholder="请输入" maxLength={50} />
     </Form.Item>
  </Form>
  // 右侧预览区域
  <div className="right-preview">
     <div className="preview-title">{formValues.title || '链接标题'}</div>
     <div className="preview-content">
       <div className="content">{formValues.content || '文案描述'}</div>
       <Image width={56} src={'/img/mini-icon.jpg'} />
     </div>
  </div>
  // 点击保存，保存左侧表单以及右侧预览区域
  <Button onClick={handlerSave}>保存</Button>
</View>)
}
export default PreviewSon;

父组件调用

import React, { useState } from 'react';
import PreviewSon from './components/previewSon'
const PreviewFather: React.FC = () => {
  // 默认值，或者可以是接口获取的默认数据
  const [defaultData] = useState({
    title: '', // 标题
    content: '', // 描述
  });
  return (<>
   <PreviewSon  defaultData={defaultData}/>
  </>)
}
export default PreviewFather;

结果：

总结

useEffect的第二个参数作用：
第二个参数存放变量，当数组存放变量发生改变时，第一个参数逻辑处理函数将会被执行（类似于监听）
第二个参数只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次
第二个参数不传，浏览器会无限循环执行逻辑处理函数。

useUpdateEffect：它的用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行。

useSetState：管理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致。