一、react特点

  1. 声明式编码
    2. 组件化编码
    3. React Native 编写原生应用
    4. 高效(优秀的Diffing算法)

    二、react高效的原因

  2. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
    2. DOM Diffing算法, 最小化页面重绘。

    三、helloReact

    ```html <!DOCTYPE html>

  1. <a name="B8jzc"></a>
  2. # 四、JSX语法规则
  3. 1、定义虚拟dom时,不要写引号<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/611675/1630479606615-6035c550-ddc2-486a-8f75-c20f9b394932.png#clientId=u4bc2974d-9c59-4&from=paste&height=123&id=u99aa7eb7&margin=%5Bobject%20Object%5D&name=image.png&originHeight=245&originWidth=985&originalType=binary&ratio=1&size=43055&status=done&style=none&taskId=ua8c185e1-7738-49cf-bb45-8dc705a5996&width=492.5)<br />2、标签中混入js表达式,要用{}<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/611675/1630480060917-28a579ca-6196-4d1b-86b2-2197628e63b7.png#clientId=u4bc2974d-9c59-4&from=paste&height=261&id=u4a50ee03&margin=%5Bobject%20Object%5D&name=image.png&originHeight=521&originWidth=1744&originalType=binary&ratio=1&size=124582&status=done&style=none&taskId=ua3ea7588-b80f-4ae3-9b21-8525ac8941c&width=872)<br />3、样式的类名指定不要用class,用className<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/611675/1630480257125-f83477ba-1360-4830-8727-1bfeb854ced3.png#clientId=u4bc2974d-9c59-4&from=paste&height=545&id=u93e17398&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1090&originWidth=1778&originalType=binary&ratio=1&size=222514&status=done&style=none&taskId=uccff69f0-0c79-4a58-b832-d5e1e2aac63&width=889)<br />4、内联样式,要用style={{key:value}}的形式去写<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/611675/1630480593591-3e4ec04f-f4f9-4f0f-942a-a04901aff45b.png#clientId=u4bc2974d-9c59-4&from=paste&height=363&id=u57e64a15&margin=%5Bobject%20Object%5D&name=image.png&originHeight=726&originWidth=2182&originalType=binary&ratio=1&size=236041&status=done&style=none&taskId=u8bf9bde6-2b17-4efd-8489-cbcab9b7391&width=1091)<br />5、虚拟dom只有一个根标签<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/611675/1630480692780-41779e72-be82-46aa-b4b2-9489d8bd6793.png#clientId=u4bc2974d-9c59-4&from=paste&height=187&id=u4da9dc35&margin=%5Bobject%20Object%5D&name=image.png&originHeight=373&originWidth=889&originalType=binary&ratio=1&size=52565&status=done&style=none&taskId=u4f760660-9e30-4506-8965-dd8286df81c&width=444.5)<br />6、标签必须闭合<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/611675/1630480924965-076cfc07-3417-4f11-b621-ca1239da8926.png#clientId=u4bc2974d-9c59-4&from=paste&height=146&id=u20677302&margin=%5Bobject%20Object%5D&name=image.png&originHeight=292&originWidth=934&originalType=binary&ratio=1&size=38654&status=done&style=none&taskId=uea3d42e8-ec86-4852-bc4a-4e974b5805e&width=467)<br />7、标签首字母<br />1)若小写字母开头,则讲该标签转为html中的同名元素,若html没有同名标签,则报错<br />示例:标签 <good> 小写字母开头,找html是否有<good> 标签,<br />有的话,转换为html标签,没有的话,报错<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/611675/1630481009926-44a03e92-36d1-49cb-82de-3cce76faad03.png#clientId=u4bc2974d-9c59-4&from=paste&height=327&id=u3b49413d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=653&originWidth=1991&originalType=binary&ratio=1&size=160253&status=done&style=none&taskId=uc5bb16a9-afe8-4bfe-b696-afdc0f0d293&width=995.5)<br />2)若大写字母开头,则react就去渲染对应的租金啊,若组件没有定义,则报错<br />示例:标签 <Good> 大写字母开头,找对应组件,组件没有定义,则报错![image.png](https://cdn.nlark.com/yuque/0/2021/png/611675/1630481046251-4f4cfd0a-9c74-40cc-b7db-61ba7b4f5ef2.png#clientId=u4bc2974d-9c59-4&from=paste&height=339&id=u37c7adfd&margin=%5Bobject%20Object%5D&name=image.png&originHeight=678&originWidth=1648&originalType=binary&ratio=1&size=142021&status=done&style=none&taskId=ue213b1f8-29eb-491a-92af-ae2b93c09ce&width=824)
  4. <a name="Tag1A"></a>
  5. # 五、区分js语句 与js表达式
  6. 1、表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方<br />示例:(能用const x = 接的()<br />1)a<br />2)a+b<br />3)demo(1)<br />4)arr.map()
  7. ```html
  8. let arr = [1,3,5,7,9]
  9. arr.map((num)=>{
  10. return num+1
  11. }
  12. )

5)function test () {}
2、语句(代码)
示例:
1) if(){}
2)for(){}
3)switch(){}

六、jsx小练习

image.png
image.png
image.png

七、模块

  1. 理解:向外提供特定功能的js程序, 一般就是一个js文件
    2. 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
    3. 作用:复用js, 简化js的编写, 提高js运行效率

    八、组件

  2. 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
    2. 为什么要用组件: 一个界面的功能更复杂
    3. 作用:复用编码, 简化项目编码, 提高运行效率

    九、模块化

    当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

    十、组件化

    当应用是以多组件的方式实现, 这个应用就是一个组件化的应用