react开辟教程（－）初识

2019年8月31日 256次阅读 来源: 太阳

React初识

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

组件

React的一切都是基于组件的。web天下的组成是基于种种HTML标签的组合，这些标签也叫语意化标签每一个标签代表一个寄义，在react，vue，angular中我们能够将这些标签组合成一个轮播／导航…等，能够称为自定义组件。
react中最主要的特征就是基于组件的设想流程。运用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开辟教程（二）装置

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