React系列---React（一）初识React

lanffy 发布于2019-08-20 17:27 / 1255人阅读

摘要：系列一初识系列二组件的和系列三组件的生命周期是推出的一个库，它的口号就是用来创建用户界面的库，所以它只是和用户界面打交道，可以把它看成中的视图层。系列一初识系列二组件的和系列三组件的生命周期

React系列---React（一）初识React
React系列---React（二）组件的prop和state
React系列---React（三）组件的生命周期

React是Facebook推出的一个JavaScript库，它的口号就是“用来创建用户界面的JavaScript库”，所以它只是和用户界面打交道，可以把它看成MVC中的V（视图）层。

React三大特性 组件

React的一切基于组件。使用React，唯一要关心的就是构建组件。各个组件有各自的状态，状态变更时，会自动重新渲染组件。组件特性也是Web前端发展的趋势。

一个Profile组件的例子：

// Profile.jsx
import React from "react";
export default Class Profile extends React.Component {
    render() {
        return (
          
            Hi, I am {this.props.name}
          
        )
    }
}

其他组件中，可以像HTML标签一样引用它：

import Profile from "./profile";

export default function(props) {
    return (
      
    )
}

JSX

上面的render方法中，有一种直接把HTML嵌套在JS中的写法，被称作JSX。这种语法结合了JavaScript和HTML的优点，即可以像平常一样使用HTML，也可以在里面嵌套JavaScript语法，运行时，Babel等工具会将JSX编译成JavaScript语法。

用HTML这种语义化的方式代替写JavaScript，总让人惬意许多。

Virtual DOM

React的设计中，开发者基本上无需操纵实际的DOM节点，每个React组件都是用Virtual DOM渲染的，可以看成是一种用JavaScript实现的内存DOM抽象。React在Virtual DOM上实现了一个Diff算法，渲染组件时，会高效的找出变更的节点，刷新到实际DOM上。

理解React特性 理解Virtual DOM

Web页面是由一个个HTML元素嵌套组合而成的。当使用JavaScript来描述这些元素时，这些元素可以简单地被表示成纯粹的JSON对象的。
比如现在需要描述一个按钮（button），我们都知道，HTML语法如下：

其中包括了元素的类型和属性。我们可以用这样一个JSON对象去表达这个按钮：

{
  type: "button",
  props: {
    className: "btn btn-blue",
    children: {
      type: "em",
      props: {
        children: "Confirm"
      }
    }
  }
}

这即是Virtual DOM的思想：将实际DOM节点抽象为内存中的JavaScript对象。

理解组件

当然，我们可以很方便地封装上述button元素，得到一种构建按钮的公共方法：

const Button => ({ color, text }) {
    return {
      type: "button",
      props: {
        className: `btn btn-${color}`,
        children: {
          type: "em",
          props: {
            children: text,
          },
        },
      },
    };
}

当我们要生成DOM元素中具体按钮时，就可以调用Button({color:"blue", text:"Confirm"})来创建。
仔细思考这个过程可以发现，Button方法其实也可以作为元素存在（上面的Profile组件，就是这一回事），方法名对应了DOM元素类型，参数对应了DOM元素属性，这样构建的元素就是React的组件元素。JSON结构描述这个组件的话，大概是这样：

{
    type: Button,
    props: {
      color: "blue",
      children: "Confirm"
    }
}

这也是React的核心思想之一。因为有公共的表达方法，我们就可以让元素们彼此嵌套混合。这些层层封装的React组件元素，最终递归渲染出完整的DOM树。

React系列---React（一）初识React
React系列---React（二）组件的prop和state
React系列---React（三）组件的生命周期

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

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

React系列---React（三）组件的生命周期

摘要：组件装载过程装载过程依次调用的生命周期函数中每个类的构造函数，创造一个组件实例，当然会调用对应的构造函数。组件需要构造函数，是为了以下目的初始化，因为生命周期中任何函数都有可能访问，构造函数是初始化的理想场所绑定成员函数的环境。 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---之React（三）组件的生...

geekzhou 2019-08-20 17:33 评论0 收藏0
React系列---React（二）组件的prop和state

摘要：给赋值也是构造函数的工作之一。在的构造函数中，还给两个成员函数绑定了当前的执行环境，因为方式创建的组件并不自动给我们绑定到当前实例对象。我们可以利用的功能，避免判断逻辑这种充斥在构造函数之中，让代码更优。 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---React（三）组件的生命周期组件是React...

Labradors 2019-08-20 17:33 评论0 收藏0
初识React

摘要：初识依稀记得那年参加线下活动，第一次听说这个词语，当时的主讲人是郭达峰，他播放了一个关于及的性能对比视频。合成事件会以事件委托的方式绑定到组件最上层，并且在组件卸载的时候自动销毁绑定的事件。初识React 依稀记得2015那年参加线下活动，第一次听说React这个词语，当时的主讲人是郭达峰，他播放了一个关于ember、angular及react的性能对比视频： React.js Co...

kuangcaibao 2019-08-21 14:47 评论0 收藏0
react开发教程（－）初识

摘要：定义一个组件可以在其他组件中调用这个组件调用组件刘宇组件插入内容在上面的案例中可以看到吧写到当中，这种写法称为。 React初识 React是Facebook推出的一个javascript库(用来创建用户界面的Javascript库)，所以他只是和用户的界面打交道，你可以把它看成MVC中的V(视图)这一层。组件 React的一切都是基于组件的。web世界的构成是基于各种HTML标签的...

Allen 2019-08-21 15:36 评论0 收藏0