React.01

React 简介

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

React安装

react安装有两种方式
1> 通过 CDN 获得 React 和 ReactDOM 的 UMD 版本

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

2> 通过npm 进行安装create-react-app

npm install -g create-react-app

安装依赖

npm install

差不多是这种目录结构；
package.json：node的包文件，关于项目的一些介绍及一些项目的指令等。

node_modules：项目依赖的第三方的包，是脚手架实现自己功能依赖的一些外部的文件。

public 文件夹下：

favicon.ico：项目图标，可以自己制作一个ico图标，取名为favicon.ico，覆盖该文件。

index.html：项目的首页。

manifest.json：定义网页快捷方式。

src目录下：

index.js：整个程序的入口文件。

registerServiceWorker.js ：(pwa)用户第一次访问网页需要联网，下次即使断网，也依然可以显示。

App.test.js：项目测试文件。

运行 npm start 即可运行项目

React初体验

我们可以看到 render渲染函数中出现了标签，这个是react的一大特色，被称为

jsx语法。

jsx ：jsx即为JavaScript XML，它是对 js 语法的一种扩展，React 使用 JSX 来
替代常规的 JavaScript。你也可以认为JSX其实就是JavaScript。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。是react核心机制之一。
优点：1> 快，执行速度更快，因为它在编译为JavaScript代码后进行了优化。
2>可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模板更加简单快速。

基本语法

定义变量
1> 可以再render（）函数之后，retrun之前。

引用变量的话，需要用单{}。 vue中是双{{}}引入。

2> 再者就是在constructor()构造器中定义，在constructor()记住要跟一个super()超类，其中props参数是由父组件传进来的参数。

{this.state.text} 使用的时候同样是单{}。

动态类型值

vue是使用v-bind来检测动态值；

React是使用jsx来检测{}的值；

vue是用v-model进行双向绑定，React中没有这个指令，它是调用onChange事使用this.setState()方法进行修改数值的修改。

this.setState()方法修改参数有两种方式：
1> 传入一个{}，key代表要修改的参数，value是要改变的值。
2>传入一个回调函数，在函数体内修改参数，在回调完成可以获取它的值。

setState()修改值是异步的，在100个setState()中，它会批量执行，在一个渲染周期内，都会集中处理，一次更新页面，需要得到它更新后的值，可以使用第二种方法

事件

vue3.0以下是在methods中定义事件函数。

React 需要在function外部定义，或者是在他的原型定义事件

在调用的时候要注意this上下文的问题，可以用两种方法，一种用bind绑定this，或者备份。另一种可以使用箭头函数，箭头函数的this是定义的时候已经绑死的。

循环
React中没有指令的概念，要做循环需要使用jsx语法，遍历数组每一项，创建标签，返回给一个新变量，在render（）中用{}引入变量即可