React教学（1）
React产生背景
React 是Facebook 在2013年推出的一款前端框架。
当时Facebook的开发者在实现首页状态栏的时候，要实现当前好友请求数、消息列表、状态列表3者的展示。发现当有一条新的消息出现时，不能及时的刷新显示的数字，点开一条新的消息也不能立即更新消息数字。
问题出现的原因：
- 传统的UI操作需要关注的细节太多了。
- 应用程序的状态又太过分散在各处，难以追踪和维护。
传统的更新方式：当有一条新的消息加入后，我们需要先获取消息列表的dom结构，然后在获取的dom结构中找出已存在的消息记录的最后一条，最后将新的消息添加到原来的dom结构中。
React更新方式：react提出始终
整体刷新页面,不需要关注已存在的消息记录。我只关心我的数据是怎样的，UI布局是怎样的，不需要关系DOM细节操作。
前端的开发演变
静态页面–>AJAX阶段–>MVC阶段–>SPA阶段
- 静态页面:前端代码是后端代码的一部分（jsp、php）。均是由服务端收到前端请求后，在后端生成静态的页面，然后返回给浏览器进行渲染。
- AJAX阶段：局部页面刷新。后端只负责提供数据，展示和前端逻辑操作均由前端自己完成。
- MVC阶段：随着业务的复杂化，单纯从后端获取数据已不能满足用户需求。不依赖于后端的应用陆续出现，那么前端本身也可以作为一个应用程序存在，所以出现了MVC的阶段。
M:模型;V:视图;C:控制器。 - SPA阶段:单张网页的应用程序(single-page application)，用户浏览器只需载入一次网页，即可基于这张网页进行所有操作，能够快速的响应用户操作，也能虚拟的进行页面切换。（Vue、React、Angluar）
什么是React
React 是一个用于构建用户界面的 JavaScript 库。相对于MVC中的V。
特点
-
声明式设计：只关注我们想要的是什么（页面布局），不关注怎么进行实现（数据驱动视图）
-
高效：通过对虚拟DOM的操作，减少了真是DOM的交互。
-
JSX:支持对JSX的应用，使代码更加明晰简练。
JSX（JavaScript XML）是JavaScript的语法扩展，可以让我们在js中写HTML标记语言。
-
组件化开发：能够最大限度的进行代码复用。
-
单向数据流：减少了重复的数据绑定。
React本身并不存在单向数据流的问题，单向数据只是为了解决父子组件状态难以统一管理衍生的。
-
灵活:能够跟已知的库和框架很好的搭配。
应用场景
-
构建一个大型的应用项目。(组件划分更细，更加灵活可配置)
-
需要用时适应web端和APP(React Native)
如果期望应用竟可能的更小更快，那么选择Vue更好，Vue的重新渲染做了追踪优化，而React却需要手动设置。
Diff算法
Tree diff:通过updateDepth对Virtual DOM树进行层级控制,两棵树只进行同层节点比较，这样只需一次遍历即可完成整颗树的比较component diff:依旧根据层级比较，同类型的组件可通过shouldComponentUpdate判断是否更新，不同类型组件直接替换。element diff:对同层的节点，可根据key值进行删除、插入、移动。
如何创建一个React项目
传统的创建方式
传统的创建方式是基于nodejs环境+npm+webpack实现。
webpack是一个现代JavaScript应用程序的静态模块打包器，它会递归的构建一个依赖关系图，然后生成一个或多个bundle。
1.安装node环境
下载路径：https://nodejs.org/en/download/
nodejs中含有npm管理工具
2.安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm是淘宝团队做的国内镜像，因为npm服务器位于国外很可能影响依赖下载。
当然也可以使用yarn。
npm install -g yarn
3.创建项目目录
这里我创建的项目名为react-demo1
4.初始化项目
cnpm init
一直回车即可
5.下载相关依赖
cnpm install --save-dev react react-dom
cnpm install --save-dev babel-loader @babel/core @babel/preset-react @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-transform-react-jsx
cnpm install --save-dev css-loader style-loader
cnpm install --save-dev webpack webpack-dev-server
6.创建显示主页
在根目录下新建一个dist目录，并在其下创建一个index.html文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Demo1</title>
</head>
<body>
<div id="react-demo"></div>
<script src="bundle.js"></script>
</body>
7.创建React入口文件
在根目录下新建一个src目录，并在其下创建entry.js文件，内容如下：
let React = require('react');
let ReactDOM = require('react-dom');
// import DemoApp from './components/DemoApp.js';
let HolloTest = require('./components/HolloTest.js');
ReactDOM.render(
<HolloTest />,
document.getElementById('example')
);
8.创建模块内容
在src目录下创建components目录，并在其下创建HelloWorld.jsx文件，内容如下：
import React from 'react';
export default class HelloWorld extends React.Component{
render(){
const style = {color:"blue",fontSize:"24"};
return (
<div style={{style}}>
hello world!<br/>
this is my first demo！
</div>
)
}
}
9.配置webpack打包文件
在根目录下创建webpack.config.js文件，配置如下：
let path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/entry.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {//指定可以被import的文件名后缀
extensions: ['.js', '.jsx', 'less', '.ts']
},
mode:'none',
module: {
rules: [
{
test: /\.(js|jsx)?$/,
include: path.resolve(__dirname, './src'),
exclude: '/node_modules/',
use: {
loader:'babel-loader',
options: {
presets: [
'@babel/preset-env',
"@babel/preset-react"
],
plugins: [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-transform-runtime'
]
}
},
},
{ test: /\.css$/, use: ['style-loader,css-loader'] },
//打包css文件
]
},
//4、服务器依赖包配置
devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2.x已经不支持该属性了
contentBase: "./dist",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
10.修改package.json文件夹的scripts
{
"name": "react-demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-transform-react-jsx": "^7.9.4",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"style-loader": "^1.1.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
11.打包项目
cnpm start
12.运行项目
cnpm run dev
13.浏览器效果
使用create-react-app脚手架
官方文档：https://github.com/facebook/create-react-app#readme
1.脚手架安装
cnpm install -g create-react-app
2.使用脚手架创建项目
进入到你需要创建项目的目录，执行如下命令：
create-react-app react-demo2
3.运行项目
cnpm start
默认情况下是隐藏了webpack的配置文件的，但是我们可以运行
cnpm run eject将配置文件拉出来
4.效果图
yarn的使用
yarn --version //查看版本号
yarn init //初始化项目
yarn add [package] --dev //添加依赖包到devDependencies中
yarn upgrade [package] //升级依赖包到最新版本
yarn remove [package] //移除依赖包
yarn install //下载所有依赖项
yarn global add [package] //全局安装依赖包
相关学习网站
React中文网：https://zh-hans.reactjs.org/
yarn中文网：https://yarn.bootcss.com/
it //初始化项目
yarn add [package] --dev //添加依赖包到devDependencies中
yarn upgrade [package] //升级依赖包到最新版本
yarn remove [package] //移除依赖包
yarn install //下载所有依赖项
yarn global add [package] //全局安装依赖包
## 相关学习网站
React中文网：[https://zh-hans.reactjs.org/](https://zh-hans.reactjs.org/)
yarn中文网：[https://yarn.bootcss.com/](https://yarn.bootcss.com/)
1239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
