react 概述
React是一款构建用户界面的js库,如果你熟悉MVC的话react 就是 其中的view
。可以简单的理解为是React将帮助我们将界面分为一个一个独立的小块,每一块都是一个组件,这些组件可以组合、嵌套、就完成了我们的整个页面。
React是一个库,并不是一个框架,它只提供UI层面的解决方案。在实际开发中可能需要借助其他库,如: Redux
、react-router
等来协作完成任务。
React的发展
1. facebook内部用来开发Instagram
2. javascript MVC框架
3. 2013年开源
4. 随后发布了React Native
React的特点
-
虚拟DOM
: React也是以数据驱动的,每当数据发生变化的时候,React就会扫描整个虚拟DOM树,自动计算与上次的虚拟DOM的差异,然后针对需要改动的地方进行重新渲染。(这一点跟Vue即为类似) -
组件化
: React将整个功能界面,进行UI分解,得到不同的组件,个组件独立封装,,整个UI就是由一个一个的小组件来实现的一个大组件,每个组件只关系自身的逻辑,彼此独立又存在一定的联系。(这一点跟Vue即为类似) -
单项数据流
: React的设计里面跟Vue的双向数据绑定不同,采用的是单项数据流(从父节点传递到子节点)。
react下载
入门helloworld实例
一、下载两个文件
- react.js: 实现React核心逻辑,且于具体的渲染引擎无关,从而可以跨平台公用。
- react-dom.js:包含了具体的DOM渲染更新逻辑,以及服务端渲染的逻辑,这部分就是与浏览器相关的部分了。
二、引入这两个文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../react/react.js"></script>
<script src="../react/react-dom.js"></script>
<script>
// React.createClass 注册一个组件类
var helloworldComponent = React.createClass({
render: function() {
// 通过React.createElement创建html内容
return React.createElement('h1', null, 'helloworld');
}
})
// ReactDOM.render 用于将模板转换为html语言,并插入dom节点
ReactDOM.render(
React.createElement(helloworldComponent, null),
document.getElementById('app')
)
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。