React.js

react

一、React概述

React是一个是一个开源的js库,用来为数据渲染视图的,由facebook,Instagram社区维护的。(例如美团、阿里、airbnb都在使用React开发)

为什么会出现React:

频繁的数据操作-->① 大量的DOM操作(自动操作DOM);②逻辑会比较复杂(状态与内容对应起来)

React发展历史:

2011年 react受php当中xhp框架的影响,部署在facebook的newsfeed;

2012年 Instagram;

2013年 React宣布在JSConf开源;

2014年 成为一个github(托管开源项目网站)旗舰级的项目;

2015年 在jsConf,ReactNative技术实现原生开发当中的ui的展现;

React的特点:

①声明式的设计:轻松的描述应用;②高效:虚拟DOM结合算法保证最大限度减少与DOM的交互;③灵活:不是框架,而是一个非常小的库可以搭配ui库、js框架等去使用;④组件:React构建视图的基本单位;⑤单项数据流;⑥状态: 内容与状态对应起来;⑦JSX:js语法的扩展 允许在js中写HTML

React的相关网址:
reactjs.com  --> facebook.github.io/react
https://www.gitbook.com/book/hulufei/react-tutorial/details

问题:

①React 不支持IE8以下的浏览器
②如果你的应用或者站点 不需要频繁的更新页面 -->使用React 实现很小的功能,需要编写很多代码
③React 年轻的库,需要开发者去造轮子
④极大的减慢你的速度 react state props

二、React的核心思想和概念

React的核心思想:封装组件->好处:提高代码的复用率,降低代码的复杂度,提高开发速度,提高代码的质量。各个组件,维护自己的状态和UI,当状态改变,自动更新组件

React的概念:①组件;②JSX js的扩展:javaScriptXml并不是新的语言。React必须使用jsx的语法,建议我们使用。特点:支持在js中编写html,在使用组件时管理组件本身的数据和视图;③Virtual DOM:大面积操作DOM,性能会有问题,react实现虚拟DOM,组件真实DOM结构映射到虚拟DOM,在虚拟DOM上实现一个DOM算法,当需要更新组件时,会通过diff算法找到需要变更的DOM节点,然后再去更新。真实DOM节点--》元素;虚拟DOM节点--》组件;④数据流:单项数据流,状态与内容;


三、搭建React的开发环境、使用React

①方式一:引入react.js react-dom.js browser.js 三个js文件

 ReactDOM.render(渲染的内容,渲染的元素);是React最基础方法,用于将模板转为html语言,插入到指定的DOM节点;

②方式二:CLI命令行

JSX基本语法:①遇到HTML标签 (<),使用HTML来解析;②遇到代码块({}),使用js来解析;③注释,{/*这是一个注释语句*/}

 组件:

创建组件:

        

注意:①React是根据组件的名称的首字母是否大写,判断是组件还是普通的html标签;

   ②组件类 在render返回的时候,只能有一个顶层标签,否则会出问题(顶层标签的元素在return时是不能换行的)

复合组件:通过创建多个组件,来合成一个组件(复合组件),把组件的不同功能进行分离。

 props

组件的用法 添加任意属性

<MainComponent userName="Tom"/>

this.props.userName

this.props对象的属性与组件的属性是一一对应的。

this.props.children 表示所有的子节点,返回值有3种(①没有子节点undefined ②一个子节点object ③多个子节点array);

React.Children.map(this.props.children,function(child){})

ref

虚拟DOM-->组件

 组件并不是真实的DOM节点,内存中的数据结构,也就是虚拟DOM。如果从组件获取真实DOM的节点,-->ref属性

<input type=\'text\'  ref=\'inputTxt\'/>
function(){ this.refs.inputTxt-->拿到真实的DOM节点}

     控制台输出--》

 

以上是 React.js 的全部内容, 来源链接: utcz.com/z/382828.html

回到顶部