react开发教程（－）初识

Allen 发布于2019-08-21 15:36 / 1917人阅读

摘要：定义一个组件可以在其他组件中调用这个组件调用组件刘宇组件插入内容在上面的案例中可以看到吧写到当中，这种写法称为。

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 (
      
        {this.props.name}
        {this.props.children}
      
    );
  }
}
export default Comment;

可以在其他组件中调用这个组件

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

class App extends Component {
  render() {
    return (
      
        {/**调用组件**/}
        组件插入内容
      
    );
  }
}

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 = () => (
    
        列表元素1
        列表元素2
        列表元素3
        列表元素4
    
)

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

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

元素类型

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

注释

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

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

元素属性

元素除了标签之外，另一个组成部分就是标签的属性。
在JSX中，不论是DOM元素还是组件元素，他门都有属性。不同的是，DOM元素的属性是标准规范属性，但有两个例外--class和for，这是因为在JavaScript中这两个单词都是关键词。因此有对应的俩个转化

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

在组件中元素的属性是完全自定义的属性，也可以理解为组件传递的参数。

组件插入内容

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

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

也可以使用es6语法

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

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

 //不被渲染
 //成功渲染

HTML转译

React会将所有要显示到DOM的字符串转义，防止XSS。所以，如果jsx中含有转义后的实体字符。可以使用以下方法

直接使用utf-8字符
使用对应的Unicode编码查询编码；
使用数组组装
{["cc",©," 2017"]}

直接插入原始html

虚拟DOM(Virtual DOM)

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

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

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

这是普通的Html标签写法


React

这是在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写法是：


  Item 1
  Item 2
  Item 3

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88246.html

react开发教程（二）安装

摘要：使用快速构建开发环境第一步安装全局包是来自于，通过该命令我们无需配置就能快速构建开发环境。执行以下命令创建项目项目目录在浏览器中打开，即可显示上一篇开发教程初识下一篇开发教程三组件的构建 react安装 React可以直接下载使用，下载包中也提供了很多学习的实例。本教程使用了 React 的版本为 15.4.2，你可以在官网 http://facebook.github.io/reac...

Jonathan Shieber 2019-08-20 15:51 评论0 收藏0
初识redux

摘要：主要用于构建，很多人认为是中的视图。函数接受另一个函数作为参数，返回新生成的对象的变化，会导致的变化。用户无法直接改变只能触发上绑定的事件。表示应该要发生变化了。允许使用方法设置监听函数，一旦发生变化，就自动执行这个函数。什么是react React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。...

xumenger 2019-08-22 16:13 评论0 收藏0
React系列---React（一）初识React

摘要：系列一初识系列二组件的和系列三组件的生命周期是推出的一个库，它的口号就是用来创建用户界面的库，所以它只是和用户界面打交道，可以把它看成中的视图层。系列一初识系列二组件的和系列三组件的生命周期 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---React（三）组件的生命周期 showImg(https://...

lanffy 2019-08-20 17:27 评论0 收藏0