欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React初识整理(一)

程序员文章站 2022-06-19 23:08:32
一、React的特点 1、自动化的UI状态管理:自动完成数据变化与界面效果的更新。 2、虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然后与页面的DOM进行对比,React可以做优化,优化后可只修改变化的部分,缩小节点更改的范围,从而提 ......

 

一、react的特点

1、自动化的ui状态管理:自动完成数据变化与界面效果的更新。 

2、虚拟dom:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟dom,然后与页面的dom进行对比,react可以做优化,优化后可只修改变化的部分,缩小节点更改的范围,从而提高效率。(正常情况下改变节点后要重新渲染页面,效率慢)。

3、组件化开发:管理页面的各功能,将1个功能视为1个组件。每个组件都可以有各自的结构、样式、行为,然后把所有的组件拼合起来的开发方式。单页应用的实现方式。

4、完全在js中定义ui:一个组件就是1个js。

5、jsx:javascript xml。使react的标签写法像html那样来编写

6、只是mvc构架中的v:mvc是一种架构模式,model(模型:获取数据)→ view(视图:渲染)→controller(控制器:关联数据与视图)。

7、单向数据流:只能父级传子级,便于追踪数据的来源。

二、创建一个react应用

1、引入两个react的在线js文件:

<script crossorigin src="js/react.development.js"></script>
 <script crossorigin src="js/react-dom.development.js"></script>

  

2、使用:

  ①渲染到页面:reactdom.render();

  ②创建元素:react.createelement()

     - 参数1:元素名

     - 参数2:元素属性,格式为json。多个单词用驼峰命名,class属性要写成classname

     - 参数3:标签内容,可以是文本,也可以是另一个元素对象。

3、jsx语法

   ①引入jsx编译器 babel.min.js ,然后在script里写入type值为text/babel,让浏览器认为该代码为jsx代码。但是该方法编译速度很慢,效率低。

   ②jsx规则与xml一致:

    - 允许嵌套

    - 标签必须严格闭合

    - 属性:

       - 大部分属性和html标签一致

       - 两个特殊:for→htmlfor class→classname

       - 可以自定义属性

    - 引用变量必须用 {}花括号,花括号中可做运算

    React初识整理(一)

    - 引用组件用<>尖括号

    - 注释,{/*注释*/} ,要加花括号

    - style属性要写成花括号形式,如:style={{color:"red"}};

三、react的组件

  1、组件是编写react应用的基础,一个应用就是由大大小小的组件组合而成。

  2、组件分类:

     - 无状态组件:普通函数定义,无状态,没有生命周期,能够优化性能。

    React初识整理(一)

    - 有状态组件:推荐es6语法定义,react内部会创建实例,并拥有完整的生命周期。

    React初识整理(一)