React简介

最新推荐文章于 2023-06-09 07:00:00 发布

Bupt_Lili

最新推荐文章于 2023-06-09 07:00:00 发布

阅读量371

点赞数

分类专栏： React基础文章标签：前端 React

本文链接：https://blog.csdn.net/Bupt_Lili/article/details/76512658

版权

3 篇文章 0 订阅

订阅专栏

 
 React是Facebook在2013年开源在GitHub上的JavaScript库。 

 
 1、React特点： 

 
  
 (1) Virtual DOM 

 
 DOM操作非常昂贵，React把真实的DOM树转换成JavaScript对象树，也就是Virtual DOM。每次数据更新后，重新计算Virtual DOM，并与上一次生成的Virtual DOM做对比，对变化的部分做批量更新，从而提升性能。 

 
 React还提供了shouldComponentUpdate生命周期回调，来减少数据变化后不必要的Virtual DOM对比过程，以保证性能。 

 
 (2) 函数式编程 

 
 React把过去不断重复构建UI的过程抽象成了组件，并能充分利用很多函数式方法减少冗余代码。 

 
 函数式编程是React的精髓！ 

 
 2、JSX语法 

 
 JSX的官方定义是类XML语法的ECMAScript扩展。 

 
 JSX将HTML语法加入到JavaScript代码中，再通过编译转换成纯JavaScript后由浏览器执行。 
 在实际开发中，JSX在产品打包阶段就已经编译成纯JavaScript，采用Bable的JSX编译器实现。JSX让代码更易于阅读和开发，并易于维护。 

 
 (1) 语法特点： 

 
 1) 定义标签时，只允许被一个标签包裹。 

 
 如const component = <span>name</span> <span>value</span> 这样写会报错。 

 
 原因是一个标签会被转译成对应的React.creatElement调用方法，最外层没有被包裹就无法转译成方法调用。 

 
 2) 标签一定要闭合。 

 
 (2) 元素类型： 

 
 react中创建的虚拟元素分为两类：DOM元素与组件元素，分别对应着原生DOM元素与自定义元素。 

 
 JSX里根据HTML标签首字母是否为小写字母的规则对应两类元素。其中小写首字母对应DOM元素，大写首字母对应组件元素。 

 
 如构建一个List组件： 

 
 const List = () =>( 

 
 <div> 

 
 <Title>This is title.</Title> 

 
 <ul> 

 
 <li>list item</li> 

 
 <li>list item</li> 

 
 </ul> 

 
 </div> 

);

 
 List组件中的<div>标签会生成DOM元素，Title以大写字母开头，会生成组件元素。 

 
 等到依赖的组件元素中不再出现组件元素，就可以构建出完整的DOM树。 

 
 (3) 元素属性： 

 
 1) DOM元素的属性是标准规范属性，但有两个例外：class和for，因为在JS中这两个单词都是关键词。JSX中对这两个属性进行了转换： 

 
 class属性转换为className; 

 
 for属性转换为htmlFor。 

 
 组件元素的属性是完全自定义的属性，也可以理解为为实现组件所需要的参数。 

 
 如：const Header = (title, children) => ( 

 
 <h3 title = {title}>{children}</h3> 

);

 
 调用：<Header title = "hello world">hello world</Header> 

 
 给Header组件加了一个title属性。 

 
 2) Boolean属性： 

 
 省略Boolean属性值会导致JSX认为bool值设为了true。要传false时，必须使用属性表达式。这常用于表单元素中，如disabled、required、checked和readOnly等。 

 
 例如，<Checkbox checked = {true} />可以简写为<Checkbox checked />, 

 
 反之，<Ckeckbox checked = {false} /> 就可以省略checked属性。 

 
 3) 展开属性： 

 
 如果事先知道组件需要的全部属性，JSX可以这样来写： 

 
 const component = <Component name={name} value={value} />; 

 
 可以用ES6  
 rest/spresd特性 
 来提高效率： 

 
 const data = { name: 'foo', value: 'bar' }; 

 
 const component = <Component name={data.name} value={data.value} />; 

 
 可以写成： 

 
 const data = { name: 'foo', value: 'bar' }; 

 
 const component = <Component  
 {...data} 
  />; //取data中的数据 

 
 ES6  
 spresd 特性介绍： 
 http://blog.csdn.net/kittyjie/article/details/50384157 

 
 rest 特性介绍： 
   
 http://blog.csdn.net/kittyjie/article/details/50400904

 
 4) 自定义HTML属性： 

 
 在DOM元素中传入自定义属性是不会渲染的，如果要使用HTML 
 自定义属性，要在属性名前加data- 前缀（作用是便于取数据，对DOM元素进行操作） 

 
 如： <div data-attr = "xxx" > content </div> 

 
 而在自定义标签中任意的属性都是支持的。 

关注

专栏目录