react 概述

React是一款构建用户界面的js库,如果你熟悉MVC的话react 就是 其中的view。可以简单的理解为是React将帮助我们将界面分为一个一个独立的小块,每一块都是一个组件,这些组件可以组合、嵌套、就完成了我们的整个页面。

React是一个库,并不是一个框架,它只提供UI层面的解决方案。在实际开发中可能需要借助其他库,如: Reduxreact-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下载

Downloads

入门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>

React 学习之路 (二) jsx


Meils
1.6k 声望157 粉丝

前端开发实践者