初始react

时间 2019-11-10

标签初始 react 栏目 React 繁體版

原文原文链接

　　好久就期待学习react了，惰性，一直都没有去翻阅react的资料，最近抽空，简单的了解了一下react，先记录一下，后续慢慢的学习。javascript

1、ReactJS简介

　　React 起源于 Facebook 的内部项目，由于该公司对市场上全部 JavaScript MVC 框架，都不满意，就决定本身写一套，用来架设 Instagram 的网站。作出来之后，发现这套东西很好用，就在2013年5月开源了。html

　　ReactJS官网地址：http://facebook.github.io/react/前端

　　Github地址：https://github.com/facebook/reactjava

2、ReactJS特色

　　React 的核心思想是：封装组件。react

　　各个组件维护本身的状态和 UI，当状态变动，自动从新渲染整个组件。
　　基于这种方式的一个直观感觉就是咱们再也不须要不厌其烦地来回查找某个 DOM 元素，而后操做 DOM 去更改 UI。基于这些概念：组件，JSX，Virtual DOM，Data Flowwebpack

　　组件git

　　React 应用都是构建在组件之上。
　　上面的 HelloMessage 就是一个 React 构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是 <div>Hello John</div>。
props 是组件包含的两个核心概念之一，另外一个是 state（这个组件没用到）。能够把 props 看做是组件的配置属性，在组件内部是不变的，只是在调用这个组件的时候传入不一样的属性（好比这里的 name）来定制显示这个组件。+es6

　　JSXgithub

　　从上面的代码能够看到将 HTML 直接嵌入了 JS 代码里面，这个就是 React 提出的一种叫 JSX 的语法，这应该是最开始接触 React 最不能接受的设定之一，由于前端被“表现和逻辑层分离”这种思想“洗脑”过久了。但实际上组件的 HTML 是组成一个组件不可分割的一部分，可以将 HTML 封装起来才是组件的彻底体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种很是聪明的作法，让前端实现真正意义上的组件化成为了可能。
　　好消息是你能够不必定使用这种语法，后面会进一步介绍 JSX，到时候你可能就会喜欢上了。如今要知道的是，要使用包含 JSX 的组件，是须要“编译”输出 JS 代码才能使用的，以后就会讲到开发环境。web

　　Virtual DOM

　　当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法从新渲染整个组件的 UI。
固然若是真的这样大面积的操做 DOM，性能会是一个很大的问题，因此 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要从新渲染组件的时候，会经过 diff 寻找到要变动的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，因此实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，因此性能会比原生 DOM 快不少。

　　Data Flow

　　“单向数据绑定”是 React 推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在通常应用场景下你可能不会意识到它的存在，也不会影响你开始使用 React，你只要先知道有这么个概念。

　　注意，这四类，咱们使用时类名必须大写。

3、ReactJS简单例子

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/jsx">
      var mountNode = document.getElementById("container");
      var HelloMessage = React.createClass({
          render: function() {
            return <div>Hello {this.props.name}</div>;
          }
        });

        React.render(<HelloMessage name="John" />, mountNode);
    </script>
  </body>
</html>

　　jsx编译后出现（React部分）：

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

　　JSXTransformer.js是来编译jsx的，jsx与js不兼容，因此咱们要在script标签里面加text/jsx，已示区别，因为babel.js能更好的是将 JSX 语法转为 JavaScript 语法（也能够把ES6转换为ES5）。编译转换，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

　　安装babel

npm install -g babel  babel-cli

　　转换：

$ babel src --out-dir build

　　上面命令能够将 src 子目录的 js 文件进行语法转换，转码后的文件所有放在 build 子目录。

　　例子还有还有一种写法：经过browser.js将jsx语法转换为javascript语法。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

　　上面代码有两个地方须要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是由于 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
　　其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的做用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

　　参考学习资料：

　　也许，DOM 不是答案（解释dom致使了web页面性能低下）

　　React 入门实例教程

　　React中文官网api

　　React中文api(非官网)

　　基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用

　　babel中文编译示例

　　gulp入门+ES6

　　react-demos

　　React官方JSX 语法

　　Babel 在线工具

　　React.cn中文