React.js 快速上手开发知识梳理

前言

文章涉及的内容可能不全面，但量不少，须要慢慢看。我花了很长的时间整理，用心分享心得，但愿对你们有所帮助。可是不免会有打字的错误或理解的错误点，但愿发现的能够邮箱告诉我1163675970@qq.com，我会及时的进行修改，只但愿对你有所帮助，谢谢。

React 是什么？

React 是一个由 facebook 开源的 前端框架，核心专一于视图，目的是实现组件化开发；

• 组件化的概念

咱们能够很直观的将有一个复杂的页面分割成若干个独立的组件，每一个组件包含本身的 html 结构、样式和js逻辑，而后再将这些组件组合，便可完成一个复杂的页面。这样既减小了逻辑的复杂度，又实现了代码的重用；

• 组件化的优点：

1. 可组合：一个组件能够和其余组件一块儿使用或者能够直接嵌套在另外一个组件内部
2. 可重用：每一个组件都具备独立的功能，他能够被使用在多个场景中
3. 可维护：每一个小的组件仅仅包含自身的逻辑，更容易被理解和维护

配置 React 的开发环境

1.安装 react 的脚手架 create-react-app ：

npm install create-react-app -g
复制代码

2.使用 react 脚手架初始化一个项目：create-react-app 项目名，例如 :

create-react-app first-app
复制代码

3.等待依赖安装完成，而后执行:

cd first-app
npm start
复制代码

React 的组成部分

react由两部分组成：

1. react.js 是 React 的核心库
2. react-dom.js 是提供与 DOM 相关的功能，会在 window 下增长 ReactDOM 属性；其中经常使用的是 render 方法，render 能够将 react 元素或者组件插入到页面中；

vue是MVVM框架（model view viewModel）

须要咱们处理的是

• model ：data（defineProperty GETTER/SETTER）、computed、vuex...
• view ：template、el、render...
• viewModel：vue自己实现，用来监听数据和视图的改变，从而实现双向数据绑定

REACT是MVC框架（model view controll）

看图

REACT脚手架：create-react-app

https://create-react-app.dev
复制代码

全局环境安装脚手架

$ npm install -g create-react-app
复制代码

基于脚手架快速构建工程化的项目

$ create-react-app  xxx  （若是电脑上安装了yarn，默认基于yarn安装）
复制代码

---

不想安装在全局，能够基于npx一步到位 $ npx create-react-app xxx

脚手架建立的项目目录

|- node_modules  全部安装的模块
|- public 
	|- index.html  SPA单页面应用中，各组件最后合并渲染完成的结果都会放入到页面的#root盒子中呈现
	|- xxx.html  MPA/SPA这里存放的是最后编译页面的模板
	|- 咱们还可能会在此放一些公共资源，把这些资源直接基于SRC/LINK的方式调入到页面模板中，而不是基于webpack最后合并在一块儿（不建议：可是项目中，可能存在一些木块不支持CommonJS/ES6Module规范，此时咱们只能在这里直接引入使用了）
|- src 整个项目的大部分源码都写在这个目录下
	|- index.js  项目的入口,webpack从这个文件开始导入打包（MPA中须要建立多入口文件）
	|- api  数据处理
	|- store REDUX公共状态管理的
	|- assets 存储公共资源的（图片和样式）
	|- utils 公共的JS模块
	|- routes 路由管理的
	|- components 公共的组件
	|- ...
|- package.json
复制代码

默认的配置清单

• 生产依赖项
  • react REACT框架的核心，提供了状态、属性、组件、生命周期等
  • react-dom 把JSX语法渲染成为真实的DOM，最后显示在浏览器中
  • react-scripts 包含了当前工程化项目中webpack配置的东西（嫌弃把webpack放到项目目录中看上去太丑，脚手架把全部webpack的配置项和依赖都隐藏到node_modules中了，react-scripts这个REACT脚本执行命令，会通知webpack打包编译）
• scripts 当前项目可执行的脚本命令（$ yarn xxx）
  • $ yarn start => 开发环境下启动项目（默认会基于WEBPACK-DEV-SERVER建立一个服务，用来随时编译和渲染开发的内容）
  • $ yarn build => 生产环境下，把编写内容打包编译，放到build文件目录下（服务器部署）
  • $ yarn eject => 把全部隐藏在node_modules中的webpack配置项都暴露出来（方便本身根据项目需求，二次更改webpack配置）

yarn eject

• babel-preset-react-app 解析JSX语法的

若是执行yarn start/build 提示少模块，咱们则少了谁就安装谁

• @babel/plugin-transform-react-jsx
• @babel/plugin-transform-react-jsx-source
• @babel/plugin-transform-react-jsx-selfcls

|- scripts
	|- start.js  => $ yarn start
	|- build.js  => $ yarn build
|- config
	|- 这里存储的就是webpack的配置项
复制代码

PACKAGE.JSON

"scripts": {
	"startMac": "PORT=8081 node scripts/start.js",
	"start": "set PORT=8081&&set HOST=127.0.0.1&&set HTTPS=true&&node scripts/start.js",
	"build": "node scripts/build.js"
},
复制代码

修改less的处理配置

• $ yarn add less less-loader

config/webpack.config.js

const cssRegex = /\.(css|less)$/;


{
	test: cssRegex,
	exclude: cssModuleRegex,
	use: getStyleLoaders({
		importLoaders: 1,
		sourceMap: isEnvProduction && shouldUseSourceMap,
	}, "less-loader"),
	// Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, 复制代码

jsx 语法

• jsx 语法是一种 js 和 HTML 混写的语法，将组件的结构，数据甚至样式都聚合在一块儿定义组件，最终通过编译造成普通的 javascript；

• 在 jsx 中，长得像 HTML 元素的就是 react 元素，React 使用 jsx 语法开发，学习 React 须要掌握 jsx 语法；

• jsx 能够写在 js 文件中，也能够新建 .jsx 文件；可是在 js 文件中须要导入 React

import React from 'react';

// 导入 React 以后才能开始写 jsx 语法
复制代码

jsx 示例

import React from 'react'
import ReactDOM from 'react-dom'

let data = {
  name: '帅哥',
  age: 18
};

let h = <h1 id="xyz">姓名：{ data.name }, 年龄：{ data.age }</h1>; // 这个 h 就是一个 react 元素，也能够成jsx元素，这个元素是虚拟DOM（js对象）

// 把 react 元素渲染到页面中
ReactDOM.render(h, document.querySelector('#root'), () => {
  console.log('100');
  console.log(document.getElementById('xyz'))
});
复制代码

使用 jsx 的注意事项

1. JSX 元素须要放到 ReactDOM.render() 函数中，且最外层只能有一个根节点；

2. 须要注意 jsx 是js，写 jsx 需注意遵照 js 的语法；

3. jsx 元素能够经过 { } 来使用表达式，注意只能是表达式，不容许写语句

4. jsx 元素一样可使用行内属性，可是 原来 html 行内的 class 属性，在 jsx 中有特殊意义，须要改为 className ；原有的 label 的 for 属性，须要改为 htmlFor ； style属性要写成对象的形式

5. jsx 元素（react元素）并非真正的 DOM，而是虚拟 DOM ，最终通过 babel 编译成普通js的对象；

示例：

let d1 = <div className="x1">这是一个div { false ? 1 : 0 }</div>
let d2 = (<div className={ false ? 'x1' : 'y1' }> 这是一个div <p>这里面减值能够写一个html</p> </div>); // 若是换行用小括号包裹起来

let d3 = <div style={{color: 'red', background: '#000'}}>11111<label htmlFor="name"><input type="text" defaultValue={data.name} id="name" /></label></div>; ReactDOM.render(d3, document.getElementById('root')); 复制代码

ReactDOM.render() 渲染

1. 在执行 render 时，先将jsx虚拟的 DOM 元素转换成真实的 DOM 元素
2. 而且把当前真实的 DOM 插入到真实的DOM元素中
3. 把DOM 渲染到真实的 DOM 以后，才会执行后面的回调函数，能够在这个函数中操做 DOM；

在 React 中使用样式

在 react 中使用样式，直接在 js 中经过 import 导入 css 样式；最终打包的时候，webpack 会帮咱们把样式处理好；

示例

import React from 'react'
import ReactDOM from 'react-dom'

import './css/3-css.css' // 在 react 中使用样式，直接在 js 中经过 import 导入 css 样式
let p1 = <p className="p1">这是一个p标签</p>; // 注意不能使用 class 指定元素类名，而应该使用 className 属性

ReactDOM.render(p1, document.querySelector('#root'));
复制代码

列表渲染和条件渲染

列表渲染

React 和 Vue 相似都是数据驱动的，均可以根据给定的数据生成一组 DOM 元素，或者根据数据的特定状况生成或者不生成 DOM 元素；在 Vue 中使用 v-for 指令，可是 React 没有指令系统，须要使用 数组的 map 方法，在 map方法的回调函数中返回要生成的 jsx 元素；

示例

import React from 'react'
import ReactDOM from 'react-dom'

let ary = [
  {
    name: '瘦大大',
    age: 18,
    title: '宇宙集团军总司令'
  },
  {
    name: '胖小小',
    age: 17,
    title: '银河小魔仙'
  }
];

// 在 Vue 中使用 v-for，可是 React 中没有指令
// 在 React 中使用列表渲染，须要使用 数组的 map 方法，在 map 方法的回调函数中返回要生成多个的元素；

// 使用传统的匿名函数：
let lis = ary.map(function (item, index) {
  return <li key={index}>姓名：{item.name}；年龄：{item.age}；职务：{item.title}</li>
}); // map 方法将原数组映射成一个新数组，

console.log(lis); // 虚拟 DOM 数组
let ul = (<ul> {lis} {/*使用列表渲染出来的数据，在 html 里面使用须要使用 { lis }*/} </ul>);

// 使用 箭头函数
let ul2 = (<ol> { ary.map((item, index) => <li key={index}>name: {item.name}; age: {item.age}; title: {item.title}</li>) } </ol>);

ReactDOM.render(ul2, document.querySelector('#root'));
复制代码

条件渲染

React 一样没有 v-if，可是须要条件渲染，就须要使用 if-else 等判断语句

示例

let flag = Math.round(Math.random() * 10)
let el;
if (flag > 5) {
    el = <h1>大于5</h1>
} else {
    el = <h1> 小于等于 5</h1>
}
复制代码

React.createElement

React.createElement() 方法是用来建立虚拟 DOM 的方法，而 jsx 语法中，jsx 元素就是 createElement 方法的语法糖；

React.createElement(type, props, ...children) 参数

• type: 标签类型
• props: 行内属性，对象数据类型
• children： 从第三个参数开始都是 type 的子元素

示例

import React from 'react';
import ReactDOM from 'react-dom';
let ele = (<h1 x="1" y="2"> hello <span s="1">1</span> <span>2</span> </h1>);
let eleByCreateElement = React.createElement(
   'h1',
   {x: 1, y: 2},
   'hello',
   React.createElement('span', {s: 1}, 1),
   React.createElement('span', null, 2)
);
// React.createElement(type, props, ...children)
// type: 标签类型
// props: 行内属性，对象数据类型
// children： 从第三个参数开始都是 type 的子元素
ReactDOM.render(eleByCreateElement, document.getElementById('root'));` javascript 复制代码

​