2022/3/10_ts rootappdocument.body.appendchild-CSDN博客

本文链接：https://blog.csdn.net/weixin_43754182/article/details/123415797

虽然说要熟悉react，但是之前学的vue也不能忘。

今天学vue+webpack，从零开始搭建项目。

第一步：npm init
第二步: npm install webpack vue vue-loader
第三步：npm i css-loader vue-template-compiler
第四步：新建src文件夹创建vue文件

webpack打包的资源是需要通过http一起加载的内容，比如说css,javascript等，全部被写在webpack里。
第五步：创建webpack.config.js文件
因为vue无法直接被webpack加载，所以需要创建index.js，将app.vue页面挂载到html中，这样就可以间接加载
vue文件了。
index.js的操作如下：（vue挂载html，js作为入口文件）
import Vue from ‘vue’
import App from ‘./app’

const root = document.createElement(‘div’)
document.body.appendChild(root)

new Vue({
render:(h)=>h(App)
}).$mount(root)

第六步：配置webpack.config.js，配置入口文件和出口文件。
注意：path.join(__dirname,当前路径）
（注意：所有的js文件都可以用node.js，包括webpack.config.js也是！比如const path = require(‘path’) ）
（可以管module.exports叫做“打包”)
如下：
const path = require(‘path’)
module.exports={
entry:path.join(__dirname,‘src/index.js’),
output:{
filename:‘bundle.js’,
path:path.join(__dirname,‘dist’)
}
}

webpack.config.js的output文件就是运行在浏览器的js代码。该js代码也称作“脚本”，也就是"scripts"，配置
在package.json的"scripts"中，“build"是新取名字(是的，js代码就是运行在脚本上的）

第七步：将webpack.config.js写进package.json的脚本中：
（“build”)
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”:“webpack --config webpack.config.js”
},

第八步：npm run build

(webpack暂且搁浅了，因为学的版本太低了，有很多bug。。。）

下午：
发现解构赋值是用在let,const上的，但是发现解构赋值原来是用在初始化的时候的。
let [a,b,c]=[1,2,3]
let {a,b=20} = {a:20} //b=20是设置默认值
解构赋值，一种是数组解构赋值，一种是对象解构赋值，哪种都可以，只要对称就行。

举个例子：
let c = [1,2,3,4,5] let [a,b,f]=c
那么a ==1

允许参数设置默认值是从es6开始的。以前设置默认值是y = y||‘hello’，现在设置默认值是
log(x,y=‘hello’)，若y没有值就取’hello’，和y=y||'hello’是一个意思。

看一下es6对于对象设置默认值的两种写法，分析一下他们的区别：
// 写法一
function m1({x = 0, y = 0} = {}) {
return [x, y];
}

// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}

就从写法一看吧，就很正规，给x和y互相设置了默认值。作为参数传递，传递的是对象，但是对象就算不给x或y
设置值，也不影响默认值。
从写法二看吧，设置的默认值只有一个，是对象。就是：{x:0,y:0}，意思就是说，如果传入的是{x:3} ，那就是一个对象
传进去了，对象都传进去了，那默认值是对象就没有用了，结果依旧是这个对象，{x:3}，
{x:3}扩展也就是{x:3,y:undefined}

关于es6的rest参数，其实看了例子就知道了，传入的参数不止一个，用rest参数。
rest参数的那个变量可以当数组对待了。
例子1：
function add(…values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
输入：
add(2, 5, 3) // 输出：10

例子2：
function a(…values){
for(var i =0 ; i<values.length;i++){
console.log(values[i],‘i’)
}
}
输入：
a(7,8,9,10)

输出：
7 “i”
8 “i”
9 “i”
10 “i”

es6进阶：
当我们需要严格地判断NaN和-0时，可以使用Object.is(…)

总结：
再一次深入明白解构，如果是数组解构就要数组对数组，对象对对象，要对称解构。同时，解构赋值用在初始化变量时。
对象设置默认值有两种方法，一是对属性设置，而是对对象设置，两者有区别。
默认值是从es6开始的。
rest参数，参数大概跟数组的使用方法一致。
Object.is()…

es6进阶：https://juejin.cn/post/7016520448204603423
rest参数和扩展运算符：
很容易混淆的点，rest参数和扩展运算符都是…xx
但是rest参数传的是a,b,c, …x，x是数组。
扩展运算符是 …数组，所以…数组的结果是a,b,c。
就是（其实rest参数和扩展运算符遵循的规则是一样的)
(a,b,c) = …x
…x = a,b,c
[…x] = [a,b,c]=[x]
现在应该明白了：
…数组===a,b,c 数组是数组变量，…数组就是a,b,c了。要区分开。
同时：
…Set结果也是a,b,c一样的意思。

在反义字符串里，${}里可以放变量，也可以放表达式，比如 ${} 里面装score>60?'的成绩合格':'的成绩不合格'外面再加$ {name}
完全ok，也就是，const result = ${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'};

精确搜索用find，不精确用filter，记得return.(用find是为了性能优化，当找到item的时候返回结果为true的item）

Object.values()可以获得对象属性的所有值。并且是一个数组。[m1,m2,],m1是第一个属性的值，m2是第二个属性的值。

！！！一个新的数组方法，flat方法，如果使用.flat(Infinity)，则不管是几维的数组都会变成一维数组。（记得传入了Infinity）
举个例子：const arr2 = [0, 1, 2, [[[3, 4]]]];
输入：arr2.flat(Infinity)
输出：[0, 1, 2, 3, 4]

flat方法也叫扁平化方法。

es6的新方法之可选链操作符?.，使用方式：
https://www.jianshu.com/p/2852b6efed8e
可选操作符可用于深层访问属性。

https://juejin.cn/post/7016520448204603423

学习就是要多看文档，多敲代码

回到学习react~

关于如何创建一个react项目：

首先安装react的脚手架：npm install create-react-app -g
然后创建项目（找一个路径）：create-react-app my-project

出现：
We suggest that you begin by typing:

cd my-project
npm start

Happy hacking!

按说的来做就好了。

关于npm start!!:就是本地开启一个服务器。

开始创建一个js文件，写完一个react组件后，在src/index.js中将该组件挂载在reactDom里
（在src创建welcome.js:(模仿app.js敲的)

function Welcome() {
return (
< div >
12345678910
< /div >
);
}
export default Welcome;

在src/index.js中，将welcome.js代替app.js引入到reactDom里：
如下：

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import Welcome from ‘./Welcome’
import reportWebVitals from ‘./reportWebVitals’;
ReactDOM.render(
<React.StrictMode>
< Welcome />
</React.StrictMode>,
document.getElementById(‘root’)
);
reportWebVitals();

不知道为啥QQ浏览器显示不了所以我用ie可以

总结：ReactDom.render()存在于index.js中，表示将组件挂载在dom节点上。

在return里面有段很像html的，不管它叫html，而是jsx

！！！！！！！！！！！！！！！！React的语法很简单：就是花括号里加表达式。
就是像Welcome.js：

function Welcome() {
return (
< div>
{12+34}
< /div>
);
}
export default Welcome;

这里{12+34}就是react语法。

看一下数组的显示：{[1,2,3]} 结果显示在页面是：123

当然花括号里可以直接加jsx表达式，如{ < p > this is jsx < /p >} （当然jsx不必加上花括号~）

总结！！！：jsx可以是一段html标签代码，可以是{}里加表达式，这两种都是jsx。（很简单，react就是js语法，按这个逻辑敲代码，
就知道什么时候需要{}，什么时候不需要了。）

作为变量都需要{}加上

变量的创建写在return之前。

做一个遍历的例子：

function Welcome() {
const list1= [1,2,3,4];
return (
< div>
< ul>
{list1.map(item=>
< li>{item}</ li>)}
< /ul>
< /div>
);
}
export default Welcome;
结果：
1
2
3
4

跑个题：（不属于react/jsx，纯js语法)
关于list.map对了更加深刻的认知，它就像是在改造一个数组，也就是数组的再加工，例子：
比如原先数组长这样：var names = [‘Alice’, ‘Emily’, ‘Kate’];
想把数组变成：["< h1 >helloAlice</ h1>", “< h1>helloEmily< /h1>”, “< h1>helloKate< /h1>”]
这样子就行：
var arr = names.map(item=> {return <h1>hello${item}</h1>})
知道map的作用不如知道map怎么用~

v-if在react中用三元表达式。（三目运算符）
代码如下：