- 第一段：
jquery ，vue ，react 。不同的设计模式。后者比前者优秀。
- 第二段：
react 组件化概念贯穿所有，用的class创建组件。
- 第三段：
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参数传递
//备注： 这里写的方法一般在虚拟dom里面触发调用，所以在虚拟dom里面有什么需要触发的时间都是要在这里写的，与render方法同级
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() {
//这里写样式对象或者props属性对象等 例子如下：
const styles = {
a:{
border:"1px solid red",
color:"black",
},
}
const {xxx} = this.props.XXX;
const {aaa} = this.state.AAA;
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>
)
}
}
