React 简介

2019年8月31日 172次阅读 来源: newsning

React 引见

React是Facrbook内部的一个JavaScript类库并开源，可用于建立Web用户交互界面。它引入了一种新的体式格局来处置惩罚浏览器DOM。那些须要手动更新DOM、辛苦地纪录每一个状况的日子一去不复返。React运用很新鲜的体式格局处理了这些题目。你只须要声明地定义各个时刻点的用户界面，而无序关联在数据变化时，须要更新哪一部份DOM。在任何时刻点，React都能以最小的DOM修改来更新全部运用程序。

React主要有四个主要观点组成，下面离别来简朴引见一下

Virtual DOM

  • 之所以引入假造DOM，一方面是机能的斟酌。Web运用和网站差别，一个Web运用 中一般会在单页内有大批的DOM操纵，而这些DOM操纵很慢
  • 在React中，运用程序在假造DOM上操纵，这让React有了优化的时机。简朴说， React在每次须要衬着时，会先比较当前DOM内容和待衬着内容的差别， 然后再决议怎样最优地更新DOM
  • 除了机能的斟酌，React引入假造DOM更主要的意义是供应了一种一致的开辟体式格局来开辟服务端运用、Web运用和手机端运用

《React 简介》

由于有了假造DOM这一层，所以经由过程装备差别的衬着器，就能够将假造DOM的内容 衬着到差别的平台。而运用开辟者，运用JavaScript就能够通吃各个平台了。相称棒的思绪！且
假造DOM是内存数据，机能是极高的，而对现实DOM举行操纵的仅仅是 Diff部份，因而能到达进步机能的目标

React组件

关于React而言，则完全是一个新的思绪，开辟者从功用的角度动身，将UI分红差别的组件，每一个组件都自力封装。
在React中，你依据界面模块天然离别的体式格局来构造和编写你的代码，关于批评界面而言，全部UI是一个经由过程小组件组成的大组件，每一个组件只体贴本身部份的逻辑，相互自力。

《React 简介》
《React 简介》

  • 组件化开辟特性:

React以为一个组件应当具有以下特性：

1.可组合（Composeable）：一个组件易于和别的组件一同运用，或许嵌套在另一个组件内部。假如一个组件内部建立了另一个组件，那末说父组件具有（own）它建立的子组件，经由过程这个特性，一个庞杂的UI能够拆分红多个简朴的UI组件；

2.可重用（Reusable）：每一个组件都是具有自力功用的，它能够被运用在多个UI场景；

3.可保护（Maintainable）：每一个小的组件仅仅包括本身的逻辑，更轻易被明白和保护；

4.可测试（Testable）：由于每一个组件都是自力的，那末关于各个组件离别测试明显要比关于全部UI举行测试轻易的多。

  • 组件定义

在React中定义一个组件也是相称的轻易，组件就是一个 完成预定义接口的JavaScript类：

  1. 组件衬着

ReactDOM.render 是 React 的最基础要领，用于将模板转为 HTML 言语，并插进去指定的 DOM 节点。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

而这个要领， 必需而且只能返回一个有用的React元素。这意味着，假如你的组件是由多个元素组成的，那末你必需在外边包一个顶层 元素，然后返回这个顶层元素。比方我们建立一个规划组件：

render:function(){
    return React.createElement(
        "div",null,
        React.createElement("div",null,"header"),
        React.createElement("div",null,"content"),
        React.createElement("div",null,"footer")
    );
}
  1. ES5体式格局定义组件
"use strict";
var HelloMessage = React.createClass({
  displayName: "HelloMessage",
    render: function render() {
        return React.createElement(
            "div",
            null,
            "Hello ",
            this.props.name
        );
    }
});
  1. ES6体式格局定义组件
import './Hello.css';
import './Hello.scss';
import React, {Component} from 'react';
// 内联款式
let style={
    backgroundColor:'blue'
}
export default class Hello extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 'es6'};
    }
    render() {
        return (
            <div>
                <h1 style={style}>Hello world{this.state.count}</h1>
                <br/>
                <image/>
            </div>
        )
    }
}
  1. JSX体式格局定义组件
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

Jsx语法

  • 什么是jsx

在用React写组件的时刻，一般会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个 XML标签都会被JSX转换东西转换成纯Javascript代码，固然你想直接运用纯Javascript代码写也是能够的，只是
应用JSX，组件的构造和组件之间的关联看上去越发清楚

  • Jsx语法运用

HTML 言语直接写在 JavaScript 言语当中，不加任何引号，这就是 JSX 的语法，它许可 HTML 与 JavaScript 的混写。

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

上面代码表现了 JSX 的基础语法划定规矩：碰到 HTML 标签（以 < 开首），就用 HTML 划定规矩剖析；碰到代码块（以 { 开首），就用 JavaScript 划定规矩剖析。

JSX 许可直接在模板插进去 JavaScript 变量。假如这个变量是一个数组，则会睁开这个数组的一切成员

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

上面代码的arr变量是一个数组，效果 JSX 会把它的一切成员，添加到模板，运转效果以下。

《React 简介》

Data Flow（单向数据流）

  • 单向数据流

先来相识一下 Flux 的中心“单向数据流“怎样运作的：
Action -> Dispatcher -> Store -> View
更多时刻 View 会经由过程用户交互触发 Action，所以一个简朴完全的数据流相似如许：
《React 简介》

全部流程以下：

1.起首要有 action，经由过程定义一些 action creator 要领依据须要建立 Action 供应给 dispatcher
2.View 层经由过程用户交互（比方 onClick）会触发 Action
3.Dispatcher 会分发触发的 Action 给一切注册的 Store 的回调函数
4.Store 回调函数依据吸收的 Action 更新本身数据之后会触发一个 change 事宜关照 View 数据更改了
5.View 会监听这个 change 事宜，拿到对应的新数据并挪用 setState 更新组件 UI
一切的状况都由 Store 来保护，经由过程 Action 通报数据，组成了如上所述的单向数据流轮回，所以运用中的各部份分工就相称明白，高度解耦了。
这类单向数据流使得全部体系都是通明可展望的。

    原文作者：newsning
    原文地址: https://segmentfault.com/a/1190000018626718
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞