Gateway To React

尚硅谷React教程

原生JavaScript痛点

• 操作DOM，繁琐，效率低（DOM-API操作UI）
• 直接操作真实DOM，浏览器会进行大量重排重绘（消耗浏览器资源，影响性能）
• 没有组件化代码模块，代码复用率低（重复代码多，可读性差）

JSX语法规则：

1. 样式不能使用class, 而是className
2. 内联样式使用Style，需传入一个对象，style = {{}}属性名驼峰命名法
3. 标签中混入js表达式，使用{}包裹
   • js的一个表达式会产生一个值
   • js语句：if、for、while、switch、try...catch等，不能直接放在{}
   • js表达式：变量(a)、函数(demo(1))、对象、数组、字符串, 方法(function test) 等，能直接放在{}中
4. 虚拟DOM，必须只能有一个根元素，不能有多个根元素
5. 标签必须闭合，必须有结束标签
6. 标签首字母
   • 若是小写字母，自动转为html里边同名元素，如果找不到则报错
   • 若是大写字母，React就直接自动去渲染对应的组件

模块与组件

• js模块：把不同功能的代码放在不同的js文件里边，复用js代码，简化js编写，提高js运行效率
• 组件：结构，样式，交互，音视频，图片等资源的集合，（html, css, js, video/audio/image），复用代码，简化项目，提供执行效率

函数式组件

• 组件名首字母需大写
• 组件必须有一个返回值JSX
• 渲染函数式组件的时候用标签的形式

类式组件

类

1. 类的构造函数不是必须，初始化操作的时候需要
2. 子类继承父类，如果子类写了构造器，则子类构造器中必须调用super
3. 类中定义的方法都放在类的原型对象上，供实例使用
4. ...