react design pro 的操作心得

1. 第一段：
   jquery ，vue ，react 。不同的设计模式。后者比前者优秀。
2. 第二段：
   react 组件化概念贯穿所有，用的class创建组件。
3. 第三段：
   react里面的东西，虚拟dom/diff算法/jsx或者tsx语法，虚拟dom就是用js渲染的标签，react里面用diff算法实现虚拟dom的实时更新。
   看码解释：（下面的代码例子，源于ant design pro ）

//类关键字定义我们的组件， extends 关键字继承我们的react组件，从而让新创建的组件拥有react组件的属性和方法（简称特性）
 class Myform extends React.Component {
      //这里写实例方法，可以操作该类已经拥有的属性和方法，对应的具体业务就是操作state（私有数据仓库）和props（外界传入的属性值一般是取值操作）
     // 从而实现组件的功能要素,有些可以从外界获取或者从父组件传的内容来获取，没有也可以自己创建。 这里可以是方法或者数据或者样式结构，在jsx里面引用就使用到位了
    //这个a函数用事件调用，才有e参数传递
      a = (e: any): void => {
        e.preventDefault();
        //这个从props里面从父组件获取而来 这个是ant.defign.pro 的东西，但使用了有form这个属性的组件后，就能获取到这个东西
        this.props.form.validateFields((err: any, values:any)
          if (!err) {
            //验证过的数据操作，values里面是表单数据
            console.log('Received values of form: ', values);
            // console.log(this.props.form.getFieldsValue().name); 这是另一种获取表单值的方式
          }
        });
      }
       
      onChange = (date, dateString) => {
        console.log(dateString);
        console.log(date._d.valueOf());  //时间戳 
      }
      //这个是组件继承来的父类里面必然存在的render方法
      render() { 
        return (
           //虚拟dom渲染，这里面必须写符合规范的jsx内容
          <Form hideRequiredMark={true} layout="inline" style={{ backgroundColor: "white", padding: "1rem" }}>
            <Row gutter={32} justify="center">
              <Col div={8}>
                <Form.Item style={{ paddingTop: "2.5rem" }}>
                  <Button type="primary" htmlType="submit" onClick={(e: any) => this.a(e)}>
                    查询
               </Button> 
                </Form.Item>
              </Col>
            </Row>
          </Form>
        )
      }
    }

react design pro 的操作心得

原文：https://www.cnblogs.com/aryu/p/12193166.html