【React基础一】React简介和特点、虚拟DOM、JSX、项目搭建、组件与State状态

1. 背景介绍

1.1 React 是什么？

React 起源于Facebook的内部项目。2013年开源供给大家使用。是一个声明式 ，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作"组件"。

React的声明式特点减少了操作DOM的性能损耗，同时组件化开发使得大量的组件得以复用。内部实现的虚拟DOM和DOM diff算法使DOM的操作变得高效。

1.2 React 特点

声明式设计 −React采用声明范式，可以轻松描述应用。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，也维护的数据安全性

1.3 虚拟DOM

虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化。

1.4 CDN引入React

js 复制代码

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

使用CDN方式引入的时候，script片段代码需要申明type为text/babel

1.4 JSX语法

直接写在 JavaScript 语言之中的HTML 语言就是JSX。JSX,是一种 JavaScript 的语法扩展，它允许 HTML 与 JavaScript 的混写。JSX是facebook为React框架开发的一套语法糖

js 复制代码

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

你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。

js 复制代码

const name = 'Tina';
const element = (
  <div>
     Hello, {name}! 
  </div>
);

1.5 JS语法

react提供了一个createElement方法创建虚拟DOM，方法接收3个参数，第一个参数是标签名，第二是标签属性，第三个是标签内容。

js 复制代码

 const dom =  React.createElement('h1','','hello,word!')

2.项目搭建

使用脚手架创建项目

npx是webpack的运行工具

js 复制代码

npx create-react-app my-app
cd my-app
npm start

添加路由库 react-router-dom

复制代码

npm i react-router-dom

3.组件

一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)把这些局部功能组装到一起，就形成了组件。在react里，组件的最小颗粒度是一个标签元素

3.1 创建组件

用函数定义组件

js 复制代码

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

使用Class定义组件

js 复制代码

class HelloMessage extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

4.State状态

React 把组件看成是一个状态机。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

在React中，我们可以在组件（Class定义的组件）里添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

js 复制代码

class HelloMessage extends React.Component {
   constructor(props) {
    super(props);
    this.state = {name: 'World'};
  }
  render() {
    return <h1>Hello {this.state.name}!</h1>;
  }
}

更改组件的name属性，即可更改页面渲染结果

js 复制代码

class HelloMessage extends React.Component {
   constructor(props) {
    super(props);
    this.state = {name: 'World'};
  }
  nameChange(){
  	 this.setState({
         name:'Tina'
     })
  }
  render() {
    return <div>
        	<h1>Hello {this.state.name}!</h1>
      		<button onClick={()=>{this.nameChange()}}>变身</button>
        </div>;
  }
}