react开发教程（－）初识

React初识

React是Facebook推出的一个javascript库(用来建立用户界面的Javascript库)，因此他只是和用户的界面打交道，你能够把它当作MVC中的V(视图)这一层。

组件

React的一切都是基于组件的。web世界的构成是基于各类HTML标签的组合，这些标签也叫语意化标签每一个标签表明一个含义，在react，vue，angular中咱们能够将这些标签组合成一个轮播／导航...等，能够称为自定义组件。
react中最重要的特性就是基于组件的设计流程。使用React你惟一须要关心的就是如何构建组件（封装性，复用性，测试）,以下图，每一个块都是一个组件，页面由组件构建而成，就像搭积木。

每一个组件都有各自的状态，当状态变动时，便会从新渲染整个组件。
定义一个组件

import React, { Component } from 'react';、
import './Comment.css';

class Comment extends Component {
  render() {
    return (
      <div className="Comment">
        {this.props.name}
        {this.props.children}
      </div>
    );
  }
}
export default Comment;

能够在其余组件中调用这个组件

import React, { Component } from 'react';
import Comment from "./Comment";
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        {/**调用组件**/}
        <Comment name="刘宇">组件插入内容</Comment>
      </div>
    );
  }
}

export default App;

JSX

在上面的案例中能够看到react吧html写到js当中，这种写法称为JSX。这是一种相似XML的写法，他能够定义相似HTML同样简洁的树状结构。这种语法结合了JavaScript语法和HTML的优势，既能够像日常同样使用HTML,也能够在里面前套JavaScript语法。这种有好的格式，让开发者易于阅读和开发。并且，对于组件来讲，直接使用相似HTML的格式，也是很是嗨皮的。可是须要注意的是。JSX和HTML彻底不是一回事，JSX只是做为编辑器，把相似HTML的结构编译成JavaScript。

注意：在浏览器中不能直接使用这种格式，须要添加JSX编译器来完成这项工做。

JSX基本语法

使用类XML语法的好处是标签能够任意嵌套，咱们能够像HTML同样清晰地看到DOM树状结构及其属性。好比，咱们构建一个List组件

const List = () => (
    <ul>
        <li>列表元素1</li>
        <li>列表元素2</li>
        <li>列表元素3</li>
        <li>列表元素4</li>
    </ul>
)

写这个组件的过程就像写html同样，只不过它被包裹在JavaScript的方法中，须要注意如下几点。

定义标签时，只容许被一个标签包裹
标签必定要闭合

元素类型

在React中建立的虚拟元素能够分为两类，DOM元素(DOM element)与组件元素(component element)
分别对应着原生DOM元素与自定义元素，而JSX与建立元素过程有这莫大的关联，在JSX中对应的规则是HTML标签首字母是否为小写字母，其中小写首对应DOM元素，而组件元素天然对应大写首字母

注释

在HTML中，注释语法是<!--注释内容-->在jsx依旧使用的是js语法注释，惟一要注意的是，在一个组件的子元素位置使用注释要用{}包起来。

const List = () => (
    <ul>
        {/**这个是个列表**/}
        <li>列表元素1</li>
    </ul>
)

元素属性

元素除了标签以外，另外一个组成部分就是标签的属性。
在JSX中，不管是DOM元素仍是组件元素，他门都有属性。不一样的是，DOM元素的属性是标准规范属性，但有两个例外--class和for，这是由于在JavaScript中这两个单词都是关键词。所以有对应的俩个转化

class属性改成className。
for属性改成htmlFor。

在组件中元素的属性是彻底自定义的属性，也能够理解为组件传递的参数。

<Comment name="刘宇">组件插入内容</Comment>

在自定义组件中除了上面传递属性的方法外也能够

const comment = <Comment>组件插入内容</Comment>;
comment.props.name = "刘宇";

也可使用es6语法

const data = {name:"刘宇",age:10};
const comment = <Comment {...data}>组件插入内容</Comment>;

自定义html属性，上面说的是组件上的属性，在JSX中往DOM元素中传入自定义属性，React是不会渲染的；
若是要使用HTML自定义属性，要使用data-前缀，这与HTML标准也是一致的：

<div a="aaa"></div> //不被渲染
<div data-a="aaa"></div> //成功渲染

HTML转译

React会将全部要显示到DOM的字符串转义，防止XSS。因此，若是jsx中含有转义后的实体字符。可使用如下方法

直接使用utf-8字符
使用对应的Unicode编码查询编码；
使用数组组装<div>{["cc",<span>©</span>," 2017"]}</div>
直接插入原始html

虚拟DOM(Virtual DOM)

在传统的web应用中每次更新页面的时候都须要手动操做DOM来更新

事件－》执行操做－》改变dom

DOM操做很是昂贵。在前端开发中，性能消耗最大的就是DOM操做，并且这部分的操做代码很差维护。React把真实的DOM操做转成JavaScript对象树，也就是虚拟DOM;

这是普通的Html标签写法

<!--html-->
<a class="link" href="https://github.com/facebook/react">React<a>

这是在js中手动生成相同dom的写法

//javascript dom
var a = document.createElement('a')
a.setAttribute('class', 'link')
a.setAttribute('href', 'https://github.com/facebook/react')
a.appendChild(document.createTextNode('React'))
//这是一种封装，沿用的React.createElement的命名
var a = React.createElement('a', {
    className: 'link',
    href: 'https://github.com/facebook/react'
}, 'React')

全部html结构，均可以用js dom来构造，并且能将构造的步骤封装起来，作到「数据-dom结构」的映射。
缓存初始数据，新数据进来时，与旧数据对比，找到差别，根据差别自己的性质进行dom操做；无差别，则不做为。

dom自己在js中就是一种数据结构
console.dir(document.body)
在控制台能够看到body的数据结构。然而，dom相关的数据丰富并且复杂，咱们其实只关心少数元素的少数属性。

创建一个javascript plain object，很是轻量，用它保存咱们真正关心的与dom相关的少数数据；对它进行操做，而后对比操做先后的差别，再根据映射关系去操做真正的dom，无疑能提升性能。

相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，并且更简单。DOM 树上的结构、属性信息咱们均可以很容易地用 JavaScript 对象表示出来：

var element = {
  type: 'ul', // 节点标签名
  props: { // DOM的属性，用一个对象存储键值对
    id: 'list'
  },
  children: [ // 该节点的子节点
    {type: 'li', props: {className: 'item'}, children: ["Item 1"]},
    {type: 'li', props: {className: 'item'}, children: ["Item 2"]},
    {type: 'li', props: {className: 'item'}, children: ["Item 3"]},
  ]
}

上面对应的HTML写法是：

<ul id='list'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
  <li class='item'>Item 3</li>
</ul>

每次数据更新后，从新计算虚拟DOM,并和上一次的做比较，对发生改变的部分作批量更新。React也提供了生命周期方法减小了没必要要的对比过程，以保证性能

下一篇：react开发教程（二）安装