React前端框架详解-优快云博客

maimai 前端技术架构

前端：react+es6+webpack+gulp   
node端：nodejs+koa
在测试过程中，需要看前端代码，了解开发思路，定位bug原因
但是发现代码中很多语法很奇怪，不太看得懂。
问了开发哥哥才知道看着奇怪的语法，是他们用的react框架。。。
所以打算学习下这个react到底是什么东东。。。

学习缘由

React是一个JS框架或者说JS库，它的核心思想是：封装组件。

各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。

基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。

概念

React 大体包含下面这些概念：

组件
JSX
Virtual DOM
Data Flow

找到一个react组件，先大体了解下这些概念

import React, { Component } from 'react';
import { render } from 'react-dom';

class HelloMessage extends Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

// 加载组件到 DOM 元素 mountNode
render(<HelloMessage name="John" />, mountNode);

组件

上面定义的HelloMessage就是一个react构建封装的组件，组件可以像html标签一样,在网页中插入这个组件<HelloMessage></HelloMessage>

最后的render()会把这个组件显示到页面上的某个元素mountNode里。

显示的内容就是组件里的render()内容<div>Hello John</div>

也就是说，<HelloMessage name="John" /> 相当于this.props.name==John

props 是组件包含的两个核心概念之一

还有一个是state（这里没用到，之后再找例子解释）

可以把 props 看作是组件的配置属性，只是在调用这个组件的时候传入不同的属性（比如这里的 name）来定制显示这个组件。

JSX

jsx，是react的一个语法，直接将html嵌套在JS代码里了。

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，你只要先知道有这么个概念。

元素渲染

来猜猜下面的reavt+es6代码在页面渲染的结果是什么。。。

<body>

<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}

setInterval(tick, 1000);
</script>

</body>