【React框架-1】React概览

什么是React.js?

用于构建用户界面的库
由Facebook创建维护
MVC中的V
可以运行在Client && Server

虚拟DOM

虚拟DOM对真实的DOM进行了抽象，所以使得编程更加简单
是剪裁版的DOM，只更新这些DOM的部分
更快
单向数据流动

为何使用React.js?

简单：React管理所有的UI更新
声明式：知道刷新时只更新应用的一部分
可读性高，可重用：所有东西都被看作组件

JSX

tag风格的语法，类似XML & HTML
推荐使用，但不强制

Babel编译器

将JSX代码翻译成JS
可以使用ES6风格语法
与Webpack协作良好，这是很棒的模块打包工具

<script type="text/babel">

示例：

var helloMessage = React.createClass({render: function() {return <div>Hello {this.props.name}</div>;}
});ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app')
);

States & Props

props: 组件间数据传递
state: 组件的内部状态

当组件的state改变时，组件重新渲染，标记将会被更新，这样实现的效果就是比较动态的。

生命周期

React会在组件渲染或者更新时触发特定的函数：

render: 渲染组件
getInitialState:
getDefaultProps
componentWillMount
componentDidMount

插件

辅助开发React.js应用的组件
动画组件
双向数据绑定组件
测试组件等

END.

参考：https://www.youtube.com/watch?v=vYldnghykaU&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO

【React框架-1】React概览相关推荐

（React 框架）React技术
1.简介 React 是Facebook 开发并开源的前端框架当时他们的团队在市面上没找到合适的MVC 框架,就自己写一个 JS 框架,用来架设 instagram(图片分享社交网路),2013年开 ...
从0实现react框架，React Fiber架构和Fiber Diff算法
react框架是目前最为流行的前端框架之一,尤其在很多大厂,应用更为广泛.相对于一些mvvm框架,react上手需要一定的技术基础,但掌握后,编码体验和性能是很不错的.react整体思想是函数式编程, ...
React框架新手入门
目录 React框架简介特点创建一个react项目成功后 React入门案例渲染语法事件函数类 React框架简介 react是Facebook公司产品用于创建用户界面Javascri ...
采用React框架搭建项目
使用vue框架也做了很多项目,基本的需求业务逻辑都没可满足,可是依然对框架内部工作原理不是很熟悉,只是套用一些指令方法去应用,做开发越接近本质收入越大. 原生的一些写法可能已经很过时了,但是仍然要熟悉 ...
React.js开发生态系统概览 [译-转]
React.js 开发生态系统概览 [译] JavaScript领域发展速度很快,甚至有人认为这已经引起了负效应.一个前端库从早期开发的小玩具,到流行,再到过时,可能也就几个月时间.判断一个工具能否在 ...
从Facebook的React框架事件学习一下开源协议
前言前一阵子由于Facebook BSD+PATENTS License的原因,Apache项目禁止使用带该license的代码,引人注目的就是Facebook的React前端框架. 后来在知乎上看 ...
如何在React框架中使用ECharts图库表制图？
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...
基于Ant Design UI框架的React项目
概述这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目详细代码下载:http://www.demodashi.com/demo ...
jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
九：以理论结合实践方式梳理前端 React 框架 ——— 简述中间件
redux-saga 基本简介中间件是一种独立运行于各个框架之间的代码,以函数的形式存在,连接在一起,形成一个异步队列,可以访问请求对象和响应对象,可以对请求进行拦截处理,再将处理后的控制权向下传递 ...

【React框架-1】React概览

什么是React.js?

虚拟DOM

为何使用React.js?

JSX

Babel编译器

States & Props

生命周期

插件

【React框架-1】React概览相关推荐

最新文章

热门文章