React入门-原创

前言

React 来自于Facebook。起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架都不满意，就决定自己写一套，用来架设 instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

在React的官方博客中明确阐述了React不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具。所以顶多算是MVC中的V。经过这几年的沉淀，React越来越强大，也受到了越来越多的开发者喜爱。

React是一个声明式的，高效的，并且灵活的用于构建用户界面的 JavaScript 库。它允许您使用”components(组件)“（小巧而独立的代码片段）组合出各种复杂的UI。

React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。

Ant Design 一套React开发者手中的神兵利器；

antd 的代码质量和文档质量都非常高，是阿里蚂蚁金服开源出来的杰出作品。它提供了一套开箱即用的高质量 React 组件，用于开发和服务于企业级中后台产品。

谁在使用：蚂蚁金服、阿里巴巴、腾讯、百度、口碑、美团、滴滴、饿了么

React非常快速是因为它从不直接操作DOM。

这可以说是一个全新的概念，所谓的虚拟DOM，就是如下的代码：

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('example')

);

ReactDOM.render 是 React 的最基本方法，用于将模板（即函数中的第一个参数）转为 HTML 语言，并插入指定的 DOM 节点。React会通过他自己的逻辑去转化为真正的DOM。所以，把这种叫做虚拟DOM。

使用虚拟DOM可以带来的明显好处就是，当有数据变动导致DOM变动时，React不是全局刷新，而是通过它内部的 dom diff算法计算出不同点，然后以最小粒度进行更新。这也是React号称性能好的原因。

JSX是React的重要组成部分，他使用类似XML标记的方式来声明界面及关系。HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法。

它允许 HTML 与 JavaScript 的混写。

const element = <h1>Hello, world!</h1>;

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(

  <div>

   {

     names.map(function (name) {

       return <div>Hello, {name}!</div>

     })

   }

  </div>,

  document.getElementById('example')

);

我们想要在组件之间进行传值，那么props属性就起到了这个作用，在React中 props 和 state 是两个非常非常非常重要的属性一定要掌握这两个。

案例参考：【4、React 组件类型 -- 类组件】

函数式组件形式上表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 arrow function的形式在创建，并且该组件是无state状态的。具体的创建形式如下：

function HelloComponent(props) {

  return <div>Hello {props.name}</div>

}

ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利。

除此之外无状态组件还有以下几个显著的特点：

1、组件不会被实例化，整体渲染性能得到提升

因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。

2、组件不能访问this对象

无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件

3、组件无法访问生命周期的方法

因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

4、无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。

React.Component 是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，相对于 React.createClass可以更好实现代码复用。

import React, { Component } from 'react';

import './App.css';

// 函数组件

function Alerts(props) {

  return (

    <button className="square" onClick={props.onClick}>

      {props.value}

    </button>

  );

}

// 类组件

class ClsCpmt extends Component {

  handleClick(){

    alert(888)

  }

  render() {

    return (

      <div className="App">

        <Alerts value="点击弹出数字888 " onClick={this.handleClick} />

      </div>

    );

  }

}

export default ClsCpmt;

1、ClsCpmt 是一个 React 组件类，Alerts 是一个函数组件，统称为 React 组件类型。

2、组件接收参数，称为 props(属性)，并通过 render 方法返回一个显示的视图层次结构。

3、render 方法返回您要渲染的内容描述，然后 React 接受该描述并将其渲染到屏幕上。

搭建React 环境

## node 版本必须 8 或以上

node -v

v10.10.0

npm -v

6.4.1

## -------------------------------

## 安装 create-react-app 脚手架

npm install -g create-react-app

## 使用脚手架搭建 react 项目

create-react-app my-react-project

## 安装结束后，进入 'my-react-project' 文件夹，执行 'npm start' 命令

cd my-react-project && yarn start

## 启动后 浏览器会自动打开  http://localhost:3000 项目搭建完成。